Remove the space prefixing the accessible name of the vaadin-button

[jcgueriaud1]

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