Open Bug 1791648 Opened 2 years ago Updated 9 months ago

Button with display: contents does not accept keyboard focus


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

Firefox 104



Accessibility Severity s4


(Reporter: aroselli, Unassigned)



(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
  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.


<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

Yes, I think this requires spec work, but if we aren't displaying the primary box for the button, there isn't anything for us to draw the focusring on.

Someone else feel free to close as INVALID or WONTFIX, but I'm setting as S4 for now.

Severity: -- → S4
Whiteboard: [access-s4]

How is the focus ring calculated for links in flow content?

Accessibility Severity: --- → s4
Whiteboard: [access-s4]
You need to log in before you can comment on or make changes to this bug.