fix: set aria-hidden="true" on prefix and suffix #5049
Conversation
|
Kudos, SonarCloud Quality Gate passed!
|
| @@ -98,13 +98,13 @@ class Button extends ButtonMixin(ElementMixin(ThemableMixin(ControllerMixin(Poly | |||
| } | |||
| </style> | |||
| <div class="vaadin-button-container"> | |||
| <span part="prefix"> | |||
There was a problem hiding this comment.
Note if someone comes around this with the question:
But isn't this a problem for icon-only buttons?
For accessible icon-only buttons it was already mandatory to add an aria-label to the vaadin-button element.
There was a problem hiding this comment.
Also, for icon-only buttons, it's still possible to place the icon inside a default slot (at least in the web component). The Flow component uses prefix or suffix for setIcon() - by default, it's prefix.
There was a problem hiding this comment.
Indeed, providing an accessible name for the icon itself has worked before, but the recommended approach has always been to set aria-label on the button instead.
|
I created an issue for adding mentions of prefix+suffix announcements in docs: vaadin/docs#1902 |
Co-authored-by: Serhii Kulykov <[email protected]>
Co-authored-by: Serhii Kulykov <[email protected]>
Co-authored-by: Serhii Kulykov <[email protected]>
Co-authored-by: Serhii Kulykov <[email protected]>
|
This ticket/PR has been released with Vaadin 24.0.0.alpha5 and is also targeting the upcoming stable 24.0.0 version. |
Description
Fixes #2924
See #2924 (comment) for a confirmation by @knoobie that this approach works in NVDA.
Given that prefix and suffix are not announced in field components and are typically used for icons (or supplementary content, e.g.
$currency sign in case of the money field), let's changevaadin-buttonto work the same way.Type of change