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

[luke-denton-aligent]

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:

• [x] venia-ui

[m2-assistant[bot]]

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

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.

[luke-denton-aligent]

@Jordaneisenburger Can you please review

[anthoula]

@magento export issue to JIRA project PWA as Story

[github-jira-sync-bot]

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

[anthoula]

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.

[Sahilsks]

@magento I am working on this

[Tarun50745]

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]

@adobe export issue to JIRA project PWA as Bug

[github-jira-sync-bot]

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

[glo42707]

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]

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.