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

[ragul0205]

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