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

[knoobie]

A similar suggestion was previously raised by Rolf here: #2924 (comment)