Seven theme's details/summary focus style is broken/missing in some browsers.

Important follow-up to #2854624: Details and accordion update based on Seven Style Guide. There is a WCAG failure at level A.

Problem/Motivation

The details/summary elements in Seven theme have inconsistent focus styles across different browsers (some show a focus indicator, others don't).

In some browsers (Chrome + Opera on Mac) the summary element has an underline when it is focused, but in others it doesn't (Safari on Mac, others...?). I noticed this halfway though manual testing of the long list of OS/browser combinations we support, and didn't go back to check them all over again ;-)

We MUST HAVE a clear visual focus style for the summary element.

• In the case where the focused summary DOES NOT get an underline, the ONLY indication is a slight colour change. This is a failure of WCAG 1.4.1 Use of Color (level A). The focus state is essential information, and it is being conveyed by colour alone.
• Since the colour change on focus is so slight, it's also a failure of WCAG 2.4.7 Focus Visible (~borderline ...) and 1.4.11 Non-text contrast (both level AA).

Now, Proposal: A Style Guide for Seven doesn't actually have a focus style for the summary element. We definitely need to make summary focus visible in all browsers, so lets investigate an fix that in a follow-up.

Major, because it is currently a level A WCAG failure in affected browsers.

Proposed resolution

1. Must-have: Ensure all browsers (including mobile phone browsers) indicate when the summary element is focused.
   The simplest approach is to make the underline-on-focus style work in all of our supported browsers. No design work is needed to satisfy WCAG 2.0 SC 2.4.7 "Focus Visible".
2. Could-have: The seven style guide doesn't have a focus style for summary elements, so we may want to create one.

Remaining tasks

Investigate:

1. Which browsers show focus, and which ones don't?
   • Firefox 64 (mac, linux) - shows focus, OK.
   • Chrome 71 (mac, linux), 73 (mac) - does not show focus.
   • Opera 57 (mac, linux) - does not show focus.
   • Safari 12 (mac)- does not show focus.
   • IE11 ?
   • Edge ?
   • Chrome (android) ?
   • Safari (iOS) ?
2. Find out underlying cause - selectors?

User interface changes

Accessibility fix. Complete details/summary styling in Seven theme, so all browsers indicate when the summary element has focus.

API changes

none

Data model changes

none