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

Input Field Number / Stepper Combo - fix accessibility of vertical stepper layout #1088

Open
1 of 3 tasks
Tracked by #813
thrbnhrtmnn opened this issue Apr 19, 2024 · 0 comments
Open
1 of 3 tasks
Tracked by #813
Labels
⭕ core team issue This is for the core team and should not be done by contributors 🎨 design issue Task is for designers ⌨️ dev issue Task is for developers

Comments

@thrbnhrtmnn
Copy link
Contributor

Description / User story

We got a report, that the vertical stepper layout is not accessible in the sizeVariants sm and md. The minimum click area must be 24px high or the distance to other clickable elements must be at least in a 24px radius. As long as the input can be smaller than 48 px in height, a vertical stepper layout is not possible.

This probably will also be reported by the storybook a11y addon, once the config has been updated and the rule for this has been turned on.

Requirements / Prerequisites

  • none

Acceptance Criteria

  • The input field number / stepper combo components have been updated in design to comply to the WCAG 2.2 requirements
  • The input field number / stepper combo components have been updated in code to comply to the WCAG 2.2 requirements

Additional information

  • ...

Code of Conduct

  • I agree to follow this project's Code of Conduct
@thrbnhrtmnn thrbnhrtmnn added 🎨 design issue Task is for designers ⌨️ dev issue Task is for developers ⭕ core team issue This is for the core team and should not be done by contributors labels Apr 19, 2024
@thrbnhrtmnn thrbnhrtmnn added this to the Accessibiltiy Level AA milestone Apr 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
⭕ core team issue This is for the core team and should not be done by contributors 🎨 design issue Task is for designers ⌨️ dev issue Task is for developers
Projects
None yet
Development

No branches or pull requests

1 participant