Focus not visible on Content Structure pane

[karlgroves]

Focus not visible on Content Structure pane

• Severity: Medium
• Affected Populations:
  • Low-Vision
  • Motor Impaired
  • Cognitively Impaired
• Platform(s):
  • All / Universal
• Components affected:
  • Structure and Navigation

Issue description

Keyboard users cannot see their focus position within the Content
Structure popover, when focus is on the popover itself, or on the
"Document Statistics" section within it.

All focused 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

    <div class="components-popover__content" tabindex="-1">


        <div class="table-of-contents__counts" role="note" aria-label="Document Statistics" tabindex="0">


            ...


        </div>


    </div>


    ...


    a, div {


        outline: 0;


    }

Remediation Guidance

Remove the CSS which negates the focus style on these elements, or
override it with specific focus styles on the applicable elements.

Recommended Code

    components-popover__content {


        /* some outline style */


    }

Relevant standards

• 2.4.7 Focus Visible (Level
  AA)

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-26 in Tenon's report

[melchoyce]

Screenshot from full report:

[afercia]

At some point, there was a focus indication on the popover container, see:

Popover: Visually indicate focus effect on popover content
#3057

Looks like it's not working any longer or been removed? /Cc @aduth

[aduth]

By the git history of the component, it seems like it may have been removed around the time of 6517ee9 or 6f38bba / d3bd425 , which each seem to modify the specific style. But in the context of their respective pull requests #3400 and #3401, it's not clear whether or not if or for what purpose it was intended.

cc @youknowriad @jasmussen

[jasmussen]

I took a stab at a fix in #15479.