Open Bug 1791648 Opened 7 days ago Updated 1 day ago

Button with display: contents does not accept keyboard focus

Categories

(Core :: DOM: UI Events & Focus Handling, defect)

Firefox 104
defect

Tracking

()

UNCONFIRMED

People

(Reporter: aroselli, Unassigned)

Details

(Keywords: access)

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:104.0) Gecko/20100101 Firefox/104.0

Steps to reproduce:

  1. Navigate to https://cdpn.io/aardrian/debug/NWqbggX
  2. Start pressing the Tab key to move through the buttons.
  3. Observe the last button ("Contents") does not receive focus.
  4. Click/tap the button to confirm it is interactive.

Actual results:

The <button> with display: contents does not receive focus, but others do.

Expected results:

All native HTML <button>s on the page should receive focus when tabbing through the page, including the one with display: contents.

  • Shows as a button in the accessibility inspector;
  • CANNOT be navigated with NVDA 2022.1 button command (B);
  • CAN be activated with a mouse, touch, and screen reader virtual cursor;
  • tools show a keyboard use warning.

Code:

<button type="button" class="contents" onclick="alert(this.innerText);">Contents</button>
.contents {
  display: contents;
}

The Bugbug bot thinks this bug should belong to the 'Core::Disability Access APIs' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Component: Untriaged → Disability Access APIs
Product: Firefox → Core

No browser currently supports this because focus requires a layout box, but display: contents explicitly doesn't have one. Aside from implementation challenges of focusing something without a layout box, not having a layout box means we can't display a focus indicator, which would itself be an accessibility problem.

Given that (AFAIK) no browser has any plans to address this any way, my feeling is that we should try to get this addressed in the spec if it isn't already. That is, the spec should state that focus is not possible for display: contents.

Component: Disability Access APIs → DOM: UI Events & Focus Handling
Keywords: access
You need to log in before you can comment on or make changes to this bug.