Lighthouse and axe-core extension flagging buttons for missing labels even if it is not focusable

[Shivam93937]

Product

axe-core

Product Version

No response

Latest Version

• I have tested the issue with the latest version of the product

Issue Description

Expectation

As per https://dequeuniversity.com/rules/axe/4.10/button-name, I would expect that buttons with tabindex=-1 should not be flagged for missing aria labels or names.

Actual

Buttons which are not focusable are still flagged by lighthouse and axe-core extension

How to Reproduce

<button
role="none"
mat-button
class="carousel-button carousel-button-next"
(click)="moveRight($event)"
[class.hidden]="!showRightCarouselButton"
tabindex="-1"

Additional context

Any thing else we should know about the issue?

[WilcoFiers]

@Shivam93937 this is intentional. There is a subtle and somewhat confusing interaction between ARIA and HTML that cause this to be an accessibility issue.

tabindex="-1" makes it so that an element is focusable but not included in the focus sequence. I.e. you cannot get to it by repeatedly pressing tab, but there are other ways to move the focus around such as clicking on it, or by navigating focus through a browser's search or the inline caret. The most common use case for this is to put tabindex="-1" on the main element so that when you target it with a skiplink, focus actually moves there.

The second subtle problem this then hits is that, because the button is focusable, ARIA does not allow role="none" to take effect. This is called presentational role conflict. Role=none will be ignored on focusable elements and elements with global ARIA attributes. Safari is the only browser that follows this requirement in ARIA, so in Chromium or Firefox browsers you won't see this issue. But VoiceOver users as a result will encounter an empty button here.

The easiest way to fix this is to set inert on the button. You won't need role=none or tabindex=-1 anymore if you do.

[Shivam93937]

@WilcoFiers , thanks for the quick response.
Making it inert would also make it unclickable, which is not my use case.
My use case is that it is a chevron left/right button, but it only appears on hover, and need not be keyboard focusable.

[WilcoFiers]

IIRC inert doesn't prevent click handlers from firing. You could also use disabled instead of tabindex="-1" that does make buttons non-focusable, so that role=none will work. That's kind of hacky though. You could also change the button to be a span, in which case you don't need to set a role and tabindex. You're kind of fighting against the browser trying to make a button not behave like a button here.

I would also consider whether there's really any harm to just allow those to be accessible buttons. Even if there is a keyboard accessible way to do the same thing those buttons can do, its not likely to get in the way, and it might help people using keyboard who see the button and expect to be able to control it.