Skip to content

Accessibility: Fix issues on Product details screen #15686

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 4 commits into from
May 30, 2025
Merged

Accessibility: Fix issues on Product details screen #15686

merged 4 commits into from
May 30, 2025
+28 −1

Conversation

itsmeichigo
Copy link
Contributor

Part of WOOMOB-505

Description

This PR fixes accessibility issues in the layout of the Product details screen. Additionally, some unnecessary accessibility items on the Blaze dashboard card are also hidden to avoid confusion.

Testing steps

Dashboard card

  1. Log in to a test store eligibile for Blaze.
  2. On the My Store tab, enable the Blaze card on the dashboard.
  3. Confirm that the Blaze icon and product image are no longer identified as accessibility items.

Product details

  1. Log in to a test store with at least one product.
  2. Navigate to the Products tab and select a product. Increase the font size to an accesibility size.
  3. Confirm that no text is clipped except for the product description row. This is intentional as the description can be long. However, there's now an accessibility hint on the description row suggesting to tap the row to read more and edit the description.
  4. Select Add more details and confirm that no text is clipped.
  5. Select Product type and confirm that no text is clipped on the product type sheet.
  6. Confirm that icons are no longer identified as accessibility items.
  7. Confirm that the spacer rows are no longer identified as tappable.

Testing information

Tested on simulator iPhone 16 iOS 18.4 with large font sizes.

Screenshots

Simulator.Screen.Recording.-.iPhone.16.-.2025-05-29.at.19.12.29.mp4
  • I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

@itsmeichigo itsmeichigo added this to the 22.5 milestone May 29, 2025
@itsmeichigo itsmeichigo added type: task An internally driven task. feature: product details Related to adding or editing products, including Product Settings. feature: Blaze Related to the integration of the Blaze ads platform Accessibility labels May 29, 2025
@dangermattic
Copy link
Collaborator

dangermattic commented May 29, 2025 •
edited
Loading

1 Warning
⚠️ This PR is assigned to the milestone 22.5. This milestone is due in less than 2 days.
Please make sure to get it merged by then or assign it to a milestone with a later deadline.

Generated by 🚫 Danger

@itsmeichigo itsmeichigo marked this pull request as ready for review May 29, 2025 12:17
@itsmeichigo itsmeichigo requested a review from RafaelKayumov May 29, 2025 12:17
@wpmobilebot
Copy link
Collaborator

wpmobilebot commented May 29, 2025 •
edited
Loading

App Icon📲 You can test the changes from this Pull Request in WooCommerce iOS Prototype by scanning the QR code below to install the corresponding build.

App NameWooCommerce iOS Prototype
Build Number30149
VersionPR #15686
Bundle IDcom.automattic.alpha.woocommerce
Commit6de76e2
Installation URL6iuh1ge36nigg
 Automatticians: You can use our internal self-serve MC tool to give yourself access to those builds if needed.

RafaelKayumov
RafaelKayumov approved these changes May 29, 2025
View reviewed changes
Copy link
Contributor

@RafaelKayumov RafaelKayumov left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM works as described.

I guess there will be some conflicts with [WCAG 2.1 AA] Voice over updates

WooCommerce/Classes/ViewRelated/Products/Edit Product/ProductFormTableViewDataSource.swift Outdated
@@ -346,6 +348,7 @@ private extension ProductFormTableViewDataSource {
cell.backgroundColor = .listBackground
cell.hideSeparator()
cell.configure(height: Constants.settingsHeaderHeight)
cell.accessibilityElementsHidden = true
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just FYI - handled in [WCAG 2.1 AA] Voice over updates in SpacerTableViewCell

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed in 6de76e2 to avoid duplication.

@itsmeichigo itsmeichigo enabled auto-merge May 30, 2025 02:38
@itsmeichigo itsmeichigo merged commit de5c39a into trunk May 30, 2025
13 checks passed
@itsmeichigo itsmeichigo deleted the woomob-505-blaze-layout-accessibility-audit branch May 30, 2025 03:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@RafaelKayumov RafaelKayumov RafaelKayumov approved these changes

Assignees
No one assigned
Labels
Accessibility feature: Blaze Related to the integration of the Blaze ads platform feature: product details Related to adding or editing products, including Product Settings. type: task An internally driven task.
Projects
None yet
Milestone
22.5
Development

Successfully merging this pull request may close these issues.
4 participants
@itsmeichigo @dangermattic @wpmobilebot @RafaelKayumov