Details/summary focus trapping allows user to tab to summary element outside of drawer

[KaichenWang]

Describe the current behavior

When a details/summary is open, JS traps focus to the focusable descendants of the details element. The summary element is part of the focusable elements, but this is not always desired. For example when the mobile filtering drawer is opened, the user can tab to the summary element, which is "behind" the modal.

Describe the expected behavior

Trapped focus does not allow user to tab to outside of drawer when it is open.

Version information (Dawn, browsers and operating systems)

• Dawn Version: 1.1.0
• Chrome Version Version 92.0.4515.131
• macOS Version 11.4

Possible solution

Trap focus includes summary elements in its list of focusable elements. This may be too generic of a selector since we won't always want to include summary as a focusable element.

function getFocusableElements(container) {
  return Array.from(
    container.querySelectorAll(
      "summary, a[href], button:enabled, [tabindex]:not([tabindex^='-']), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe"
    )
  );
}

Additional context/screenshots
n/a

[kmeleta]

Should have checked for this issue first.. I may have just opened a dupe, but I added some more observations that might be useful or more relevant to the header and to the current Dawn version #2496