Skip to content

Move tabindex=0 to the direct parent div for code blocks #236

@rianrietveld

Description

@rianrietveld

From the accessibility audit, issue #232

SC 2.2.2 keyboard: The code blocks are scrollable but cannot be focussed with the keyboard. That means keyboard only users can't read code that overflows the container. The code examples must be made focusable, that way scrolling with the arrow keys is possible. Firefox autmatically makes overflow boxes scrollable, so it's easy to miss the issue when Firefox is your default browser. This occurs on all pages with code blocks, for example https://wpaccessibility.org/docs/topics/content/alt-text/

Note Rian: There is a tabindex on the code blocks, but to make axe Devtools shut up it must be on the direct container <div class="highlight"> and not on the wrapper <div class="language-html highlighter-rouge" tabindex="0">.

<div class="language-html highlighter-rouge" tabindex="0">
  <div class="highlight">
    <pre class="highlight">
      <code>
        [...]

The work:
Move tabindex="0" to <div class="highlight">.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    Status

    Done

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions