1791648 - Button with display: contents does not accept keyboard focus

Status: UNCONFIRMED

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

Description

[Adrian Roselli]

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;
}

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

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.

Comment 2

[James Teh [:Jamie]]

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.

Comment 3

[Kris Maglione [:kmag]]

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.

Comment 4

[Adrian Roselli]

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