Accessibility (a11y): Hidden element has focusable content

Created on 12 June 2024, 14 days ago

Problem/Motivation

The SiteImprove browser extension flags this element, saying "Hidden element has focusable content; A page element with attribute aria-hidden="true" contains focusable elements (elements that can receive focus from a keyboard)":

<button type="button" class="ot-floating-button__close" aria-label="Close Preferences" aria-hidden="true">
  <svg role="presentation" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Banner_02" class="ot-floating-button__svg-fill" transform="translate(-318.000000, -725.000000)" fill="#ffffff" fill-rule="nonzero"><g id="Group-2" transform="translate(305.000000, 712.000000)"><g id="icon/16px/white/close"><polygon id="Line1" points="13.3333333 14.9176256 35.0823744 36.6666667 36.6666667 35.0823744 14.9176256 13.3333333"></polygon><polygon id="Line2" transform="translate(25.000000, 25.000000) scale(-1, 1) translate(-25.000000, -25.000000) " points="13.3333333 14.9176256 35.0823744 36.6666667 36.6666667 35.0823744 14.9176256 13.3333333"></polygon></g></g></g></g></svg>
</button>

Proposed resolution

The SiteImprove browser extension stopped reporting the issue if I added tabindex="-1" to the button.

πŸ› Bug report
Status

Active

Version

2.1

Component

Code

Created by

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Comments & Activities

Production build 0.69.0 2024