Lighthouse warning: Buttons do not have an accessible name

[abdonrd]

Lighthouse report from vaadin-button v2.0.1 demos:
https://builder-dot-lighthouse-ci.appspot.com/report.1530781843420.html

[web-padawan]

Apparently, latest Lighthouse beta changed the a11y audit and there are new warnings. We need to check other components too.

[abdonrd]

@web-padawan thanks! Anyway, I have used the stable Lighthouse v3.0.0.

[web-padawan]

Confirmed this warning with the Lighthouse 3.0.1 (available as a Chrome extension)
Note that Chrome builtin audit in DevTools still uses 2.9.1

[abdonrd]

Any news here? Thanks in advance!

[aarondrabeck]

+1

[aarondrabeck]

+1

[Haprog]

Reopening this, as the previous fix had to be reverted (c451eaa) to fix a performance regression (#128)

[chrisgo67]

Any news on this?
What is the status with Vaadin 14 components?

[web-padawan]

I tested this with axe and it reports following accessibility violations:

---
Rule: aria-allowed-role
Impact: minor
ARIA role must be appropriate for the element (https://dequeuniversity.com/rules/axe/3.4/aria-allowed-role?application=axeAPI)

Issue target: vaadin-drawer-toggle,button
Context: <button type="button" role="presentation" tabindex="0"></button>
Fix any of the following:
  ARIA role presentation  is not allowed for given element

---
Rule: button-name
Impact: critical
Buttons must have discernible text (https://dequeuniversity.com/rules/axe/3.4/button-name?application=axeAPI)

Issue target: vaadin-drawer-toggle
Context: <vaadin-drawer-toggle tabindex="0" role="button"></vaadin-drawer-toggle>
Fix any of the following:
  Element does not have inner text that is visible to screen readers
  aria-label attribute does not exist or is empty
  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  Element's default semantics were not overridden with role="presentation"
  Element's default semantics were not overridden with role="none"
  Element has no title attribute or the title attribute is empty
---

When trying to use aria-hidden there is another error:

Accessibility Violations
---
Rule: aria-hidden-focus
Impact: serious
ARIA hidden element must not contain focusable elements (https://dequeuniversity.com/rules/axe/3.4/aria-hidden-focus?application=axeAPI)

Issue target: vaadin-drawer-toggle,button
Context: <button type="button" aria-hidden="true" tabindex="0"></button>
Fix all of the following:
  Focusable content should be disabled or be removed from the DOM

Regardless of that, VoiceOver on Safari properly handles role="button" on the host element (which is vaadin-drawer-toggle or vaadin-button - both use the same structure).

[web-padawan]

Note: the original decision to use this roles structure was done 2 years ago:

See the comments

• Adding Aria attributes vaadin-button#9 (comment)
• Adding Aria attributes vaadin-button#9 (comment)

I have tried to revert role="presentation" and tested it with VoiceOver on Mac OS Mojave:

• Chrome: "button, group. you are currently on a button"
• Safari: "you are currently on a button inside web content"

When adding aria-label="toggle" to the drawer toggle, Chrome works correctly.

[web-padawan]

See https://www.w3.org/TR/using-aria/#fifthrule for the actual issue.

[anezthes]

See vaadin/vaadin-button#144 (comment).

[juuso-vaadin]

Did some testing and buttons are announced as they should when using

• Safari + VoiceOver

Button label is not announced at all in

• Chrome + VoiceOver
• Chrome + NVDA
• Firefox + NVDA
• Chrome + Windows Narrator

I don't have access to JAWS at the moment.

Current workaround is to manually set the aria-label.
In Flow this is done with
button.getElement().setAttribute("aria-label", "Click me");

[web-padawan]

Closing as fixed by #2394. I have created a separate ticket for testing - see #2571.