<summary> not activatable if it has descendant <input>

[Malvoz]

Steps to reproduce:

1. Open the following HTML in a browser:
   
   

   <details>
     <summary>
       <label>
         <input type="checkbox" checked>
         <span>accessible name</span>
       </label>
     </summary>
     <p>content</p>
   </details>

2. Tab (once) to focus the <summary> element
3. Press Enter or Space

Actual behavior:

Details element is not opened, instead the input element is toggled.

Expected behavior:

Details element should be opened.

System configuration

NVDA installed/portable/running from source:

Installed

NVDA version:

2020.3

Windows version:

10.0.19042 build 19042

Name and version of other software in use when reproducing the issue:

Chrome 88.0.4324.104

[Malvoz]

The HTML spec currently states that phrasing content (including interactive content such as label and input) is allowed in summary. That may change, per whatwg/html#2272. I believe this should be considered a bug regardless (I'm assuming this is a bug, I'm not an advanced screen reader user) since nothing prevents authors from nesting interactive elements inside summary.

cc @JAWS-test

[JAWS-test]

@Malvoz

You are right. It is a screen reader bug (NVDA and JAWS), but it results from a bug in the HTML specification. As long as the HTML bug exists, screen readers should correctly output and operate elements within summary, especially since Chrome correctly passes the role of the checkbox to the Accessibility API.

Until the bug is fixed, all web developers are advised to use only plain text in the summary and no structured text or interactive elements.

[Adriani90]

Test case:
https://codepen.io/stevef/pen/NWooyJr

It seems in Firefox it works as expected with NVDA 2024.1 RC1, the control for expanding and colapsing the element is rendered on a separate line in browse mode and it is reachable by tab in focus mode.

However, in Chrome the summary element is merged with the link and it cannot be navigated with the keyboard. I can however colaps and xpand the summary element without touching the link by using the mouse.

Not sure whether Chromium exposes something wrong here or NVDA behaves unexpected. cc: @jcsteh do you have any details how this was solved in Firefox?

cc: @aleventhal