Skip to content
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.

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

[feature]: Remove increase/decrease buttons of quantity selector from the tab index #3766

Closed
1 task done
luke-denton-aligent opened this issue Apr 18, 2022 · 11 comments
Closed
1 task done
Assignees
Labels
enhancement New feature or request Issue: Needs Update Additional information is require, waiting for response Priority: P3 Progress: done triage-done

Comments

@luke-denton-aligent
Copy link
Contributor

Is your feature request related to a problem? Please describe.
Currently when tabbing through a PDP, a user has to tab twice to get passed the quantity selector. If the value in the quantity selector is greater than 1, then the user will have to tab 3 times to get passed it:

First tab press: Decrease button
Second tab press: quantity input
Third tab press: Increase button
Forth Tab press: next element in the DOM

Further, the increase/decrease buttons don't have any focus state currently either, so a user isn't able to visually see that they are focused on those elements (which we don't have to fix, as we're going to remove those buttons from the tab index)

Describe the solution you'd like
Keyboard users already have access to the keyboard, so that can enter the number for the quantity they like, without having to use the increase/decrease buttons. By removing the buttons from the tab order, we can make the usability of the app much better, without sacrificing any accessibility, as the input field is still focusable.
Unfortunately due to the current implementation of the quantity input itself, a user isn't able to use the up/down arrow keys to change the value, which I'll create another issue for.

Removing the buttons from the tab index would be done by simply adding tabindex="-1" to them.

Describe alternatives you've considered

Additional context
Add any other context or screenshots about the feature request here.

Please let us know what packages this feature is in regards to:

  • venia-ui
@luke-denton-aligent luke-denton-aligent added the enhancement New feature or request label Apr 18, 2022
@m2-assistant
Copy link

m2-assistant bot commented Apr 18, 2022

Hi @luke-denton-aligent. Thank you for your report.
To speed up processing of this issue, make sure that you provided sufficient information.

Add a comment to assign the issue: @magento I am working on this


@luke-denton-aligent
Copy link
Contributor Author

@Jordaneisenburger Can you please review

@anthoula
Copy link
Contributor

@magento export issue to JIRA project PWA as Story

@anthoula anthoula added the needs-triage A pull request or issue that needs to be triaged prior to being synced to JIRA label Apr 25, 2022
@github-jira-sync-bot
Copy link

✅ Jira issue https://jira.corp.magento.com/browse/PWA-2780 is successfully created for this GitHub issue.

@anthoula
Copy link
Contributor

Thanks for your feedback! We are planning to include accessibility improvements to the quantity stepper in an upcoming feature epic that is currently In Progress, and will include this feedback for review.

@anthoula anthoula added Progress: dev in progress and removed needs-triage A pull request or issue that needs to be triaged prior to being synced to JIRA labels Apr 25, 2022
@Sahilsks
Copy link
Contributor

Sahilsks commented Mar 7, 2023

@magento I am working on this

@Tarun50745
Copy link
Contributor

Tarun50745 commented Jul 7, 2023

Confirming issue,

Followed the instructions to replicate issue as mentioned in description.
Yes user needs to hit addition tabs in order to travers quantity field.

@glo42707
Copy link
Contributor

glo42707 commented Aug 4, 2023

@adobe export issue to JIRA project PWA as Bug

@github-jira-sync-bot
Copy link

✅ Jira issue https://jira.corp.adobe.com/browse/PWA-3173 is successfully created for this GitHub issue.

@github-jira-sync-bot github-jira-sync-bot added Priority: P3 needs-triage A pull request or issue that needs to be triaged prior to being synced to JIRA Progress: ready for grooming Progress: dev in progress Progress: PR review and removed Progress: dev in progress needs-triage A pull request or issue that needs to be triaged prior to being synced to JIRA Progress: ready for grooming labels Aug 4, 2023
@glo42707
Copy link
Contributor

glo42707 commented Aug 22, 2023

hey @luke-denton-aligent

as per recent review of this ticket, it pressing tab and navigating control on +/- button is good user expereicne in terms of accessibility scope hence we would not recomment to remove this feature. however could you please let us know that why do you required this change in functionality.

@glo82145
Copy link
Collaborator

glo82145 commented Sep 4, 2023

As we have waited for more than 14 days for response hence we are closing this issue.
Please feel free to reopen incase of any update.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request Issue: Needs Update Additional information is require, waiting for response Priority: P3 Progress: done triage-done
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants