WordPress.org

Make WordPress Core

Opened 5 months ago

Closed 8 weeks ago

Last modified 8 weeks ago

#47190 closed defect (bug) (fixed)

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

Reported by: kjellr Owned by: SergeyBiryukov
Milestone: 5.2.3 Priority: normal
Severity: normal Version: 5.0
Component: Bundled Theme Keywords: has-patch fixed-major needs-testing
Focuses: accessibility Cc:
PR Number:

Description

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

https://cldup.com/RnYMMlGa0A-3000x3000.png

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

Attachments (1)

47190.patch (427 bytes) - added by kjellr 5 months ago.

Download all attachments as: .zip

Change History (8)

@kjellr
5 months ago

#1 @kjellr
5 months ago

47190.patch adds the missing focus states.

Before:

https://cldup.com/f02dcmGebx-3000x3000.png

https://cldup.com/slrtit5vt8-1200x1200.png

After:

https://cldup.com/WLjMgxd6fG-3000x3000.png

https://cldup.com/IuJeZRu6c5-3000x3000.png

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 there 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.

Last edited 5 months ago by kjellr (previous) (diff)

#2 @ianbelanger
5 months ago

  • Milestone changed from Awaiting Review to 5.3
  • Version changed from 5.2 to 5.0

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.

#3 @SergeyBiryukov
5 months ago

  • Owner set to SergeyBiryukov
  • Resolution set to fixed
  • Status changed from new to closed

In 45425:

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

Props kjellr, karlgroves.
Fixes #47190.

#4 @JeffPaul
2 months ago

  • Keywords fixed-major added
  • Milestone changed from 5.3 to 5.2.3
  • Resolution fixed deleted
  • Status changed from closed to reopened

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

#5 @JeffPaul
2 months ago

  • Keywords needs-testing added

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

#6 @SergeyBiryukov
8 weeks ago

  • Resolution set to fixed
  • Status changed from reopened to closed

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.

This ticket was mentioned in Slack in #core by sergey. View the logs.


8 weeks ago

Note: See TracTickets for help on using tickets.