@W-12627165@ Improve accessibility of quantity picker #1552
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1. Add aria-labels for the buttons 2. Allow keyboard focus on the buttons 3. Allow space/enter to trigger button click
alexvuong
reviewed
Nov 21, 2023
packages/template-retail-react-app/app/static/translations/compiled/en-US.json
Outdated
Show resolved
Hide resolved
alexvuong
reviewed
Nov 21, 2023
| </Button> | ||
| <Input {...input} /> | ||
| <Button data-testid="quantity-increment" {...inc}> | ||
| + | ||
| <FormattedMessage id="product_view.label.quantity_increment" defaultMessage="+" /> |
There was a problem hiding this comment.
Why do we need translations for these symbols?
There was a problem hiding this comment.
Turn on VoiceOver. Tab into [+] and [-] to see that it says "increment quantity" / "decrement quantity", rather than just "plus" / "minus".
The interaction/functionality works fine but it keeps reading the "Missing translation" error out loud instead of the actual label.
|
@wjhsf Is it just me... I'm seeing the minus sign rendered like this: |
vmarta
reviewed
Nov 21, 2023
| @@ -428,10 +428,9 @@ const ProductView = forwardRef( | |||
| <Box fontWeight="bold"> | |||
| <label htmlFor="quantity"> | |||
| {intl.formatMessage({ | |||
| defaultMessage: 'Quantity', | |||
| defaultMessage: 'Quantity:', | |||
There was a problem hiding this comment.
TIL: react-intl will know to exclude the colon sign in this case.
Comment on lines
67
to
69
| await user.type(input, '{shift>}{tab}') // > modifier in {shift>} means "keep key pressed" | ||
| const button = screen.getByText('−') | ||
| expect(button).toHaveFocus() |
There was a problem hiding this comment.
Cool, adding tests for accessibility 👍
packages/template-retail-react-app/app/components/quantity-picker/index.jsx
Outdated
Show resolved
Hide resolved
This reverts commit c112bce.
Signed-off-by: Will Harney <62956339+wjhsf@users.noreply.github.com>
shethj
approved these changes
Nov 21, 2023
vmarta
approved these changes
Nov 21, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
(git2GUS compliant redo of #1545)
Description
Types of Changes
Changes
How to Test-Drive This PR
Checklists
General
Accessibility Compliance
You must check off all items in one of the follow two lists:
or...
Localization