web-components
web-components copied to clipboard
Remove the space prefixing the accessible name of the vaadin-button
What is the problem?
When the accessible name for a vaadin-button
is coming from the contents then a extra space is added.
A "Button" will be " Button" for no apparent reason (and also an empty button will have a name " " with empty space that can confuse the Accessibility Checker)
This is because of this CSS:
.vaadin-button-container::before {
content: '\2003';
display: inline-block;
width: 0;
max-height: 100%;
}
One solution could be to replace the css by this:
.vaadin-button-container::before {
content: '\2003' / '';
display: inline-block;
width: 0;
max-height: 100%;
}
More details here: https://www.sitelint.com/blog/hide-content-in-css-pseudo-elements-from-screen-readers/
Browsers
- [ ] Chrome
- [ ] Firefox
- [ ] Safari
- [ ] Safari on iOS
- [ ] Edge
Screen Readers
- [ ] None
- [ ] NVDA
- [ ] JAWS
- [ ] VoiceOver on MacOS
- [ ] VoiceOver on iOS