Dialog : Accessibility - Element "span" should not be focusable within the subtree of an element with an 'aria-hidden' attribute with value 'true'

Describe the bug

Accessibility Violation

Element "span" should not be focusable within the subtree of an element with an 'aria-hidden' attribute with value 'true' A hidden element should not contain any tabbable elements

Why is this important?

1. Using either role="presentation" or aria-hidden="true" on a focusable element will result in some users focusing on "nothing". A focusable element with aria-hidden="true" is ignored as part of the reading order, but still part of the focus order, making its state of visible or hidden unclear. This rule checks that elements with an aria-hidden attribute do not contain focusable elements.

Element location

<span
    data-pc-section="firstfocusableelement"
    data-p-hidden-focusable="true"
    data-p-hidden-accessible="true"
    aria-hidden="true"
    role="presentation"
    tabindex="0"
    class="p-hidden-accessible p-hidden-focusable">

What to do

When designers and developers want to hide parts of a web page that are pure decoration, such as icon fonts - that are not meant to be read by assistive technologies:

• ensure that assistive technologies will ignore the element by adding aria-hidden="true" to the element *ensure none of the target elements are part of sequential focus navigation

• ensure no descendants are part of sequential focus navigation

Example

• In the following example, the button element is focusable by default. Therefore, using aria-hidden="true" violates the rule:

    <div aria-hidden="true">
        <div aria-hidden="false">
            <button>Some button</button>
        </div>
    </div>
  

Note: Using aria-hidden="false" on a descendant of an element with aria-hidden="true" does not expose that element. Using aria-hidden="true" hides itself and all its content from assistive technologies.

Rule ID: aria_hidden_nontabbable
Reason ID: Fail_1

Reproducer

No response

System Information

Can be reproduced in every environment using IMB Accessibility checker

Steps to reproduce the behavior

1. Create a Dialog.
2. Run IMB Accessibility checker.
3. Check Violations.

Expected behavior

1. ensure that assistive technologies will ignore the element by adding aria-hidden="true" to the element *ensure none of the target elements are part of sequential focus navigation
2. ensure no descendants are part of sequential focus navigation

Start by reproducing the Dialog and inspecting the generated span marked data-pc-section="firstfocusableelement" and class p-hidden-focusable. Check how its aria-hidden and tabindex attributes are produced; done when the IBM Accessibility checker no longer reports aria_hidden_nontabbable for the Dialog.