Twenty Seventeen: Native audio and video embeds have no focus state.

[kjellr]

As raised in Tenon's accessibility audit of Gutenberg, it looks like audio and video elements in Twenty Seventeen have no focus state.

​https://github.com/WordPress/gutenberg/issues/15312

The full text of the original issue is below:

---

Media players receive focus but show no visible focus state

• Severity: High
• Affected Populations:
  • Low-Vision
  • Motor Impaired
  • Cognitively Impaired
• Platform(s):
  • All / Universal
• Components affected:
  • Output Markup

Issue description

Keyboard users who are navigating through a published (or previewed)
page may come across media players implemented with native audio and
video elements. These receive keyboard focus in most or all browsers,
but the page does not visually show it. This results in invisible Tab
stops.

All interactive elements should have a visible and obvious focus
indicator, so that sighted keyboard users have a clear indication of
which element has focus.

Issue Code

    :focus {


        outline: none;


    }

Remediation Guidance

Whenever the native focus outline is removed from focusable
elements, a replacement visual focus state must be provided, with a
minimum contrast ratio of 3:1.

Recommended Code

audio:focus, video:focus {


        outline: 1px solid #0085ba;


    }

Relevant standards

2.1.1 Keyboard (Level A)
​https://www.w3.org/TR/WCAG20/#keyboard-operation-keyboard-operable

2.4.7 Focus Visible (Level AA)
​https://www.w3.org/TR/WCAG20/#navigation-mechanisms-focus-visible

Note: This issue may be a duplicate with other existing accessibility-related bugs in this project. This issue comes from the Gutenberg accessibility audit, performed by Tenon and funded by WP Campus. This issue is GUT-106 in Tenon's report

[kjellr]

47190.patch adds the missing focus states.

Before:

After:

It looks like this is necessary because Twenty Seventeen clears out :focus styles globally:

​https://themes.trac.wordpress.org/browser/twentyseventeen/2.2/style.css#L576

That seems like a somewhat aggressive approach, and may be a better way to accomplish what that line of code is intending to do. But in general, this patch should fix the current problem.

[ianbelanger]

Changing version to 5.0, as that is when this issue was most likely introduced to core and moving to 5.3 milestone, as there is currently no plans to release a bundled theme update until the next major release. This could possibly be revisited for 5.2.2 if there are a large number of bundled theme fixes ready.

[SergeyBiryukov]

In 45425:

Twenty Seventeen: Accessibility: Add missing focus state for native audio and video embeds.

Props kjellr, karlgroves.
Fixes #47190.

[JeffPaul]

Reopening this so it can be back-ported to the 5.2 branch.

[JeffPaul]

This also needs testing to validate if this ticket is good to land in 5.2.3.

[SergeyBiryukov]

In 45846:

Twenty Seventeen: Accessibility: Add missing focus state for native audio and video embeds.

Props kjellr, karlgroves.
Merges [45425] to the 5.2 branch.
Fixes #47190.