Skip to content

Add tab index to .md-search__scrollwrap in the search plugin #7193

@jzazo

Description

@jzazo

Bug description

I am running the https://accessibilityinsights.io/ extension and I get flagged an error: scrollable-region-focusable: Elements with scrollable content must be accessible by keyboard.

This error is flagged when enabling the search plugin.

Path: .md-search__scrollwrap

Snippet:
- <div class="md-search__scrollwrap"> <div class="md-search-result" data-md-component="search-result">
- <div class="md-search-result__meta">Type to start searching</div> <ol class="md-search-result__list" role="presentation"></ol> </div> 

Fix ONE of the following:
- Element should have focusable content
- Element should be focusable

Adding a tabindex="0" to the div section <div class="md-search__scrollwrap"> removes the error.

Related links

Reproduction

doh.zip

Steps to reproduce

  1. Unzip and poetry install
  2. mkdocs serve
  3. Download extension and fast run: https://accessibilityinsights.io/

Browser

Edge

Before submitting

Metadata

Metadata

Assignees

No one assigned

    Labels

    working as intendedIssue reports behavior in line with specification

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions