A page element with the attribute aria-hidden="true" contains focusable content, such as an input field. This violates best practices for accessible web design and WCAG 2.2 guidelines. Elements hidden with aria-hidden="true" should not contain interactive or focusable elements because they become inaccessible, leading to a poor user experience.
To Reproduce
Steps to reproduce the behavior:
Open the web application.
Navigate to the "Selecting ENCs" page.
Use a web accessibility testing tool (siteimprove) to identify the error.
Inspect the element with aria-hidden="true" and verify that it contains focusable content (e.g., an input field).
Expected Behavior
Elements with aria-hidden="true" should not contain focusable or interactive elements. If a hidden element must be interactive, it should not use aria-hidden="true", and alternative methods should be employed to handle its visibility and interactivity.
Screenshots
Additional Context
In the application, an <input> element is inside a container with aria-hidden="true", making it invisible in terms of accessibility but still focusable by keyboard users. This can lead to a confusing experience as the input field may be operable but inaccessible to users who rely on proper keyboard navigation.
Describe the Bug
A page element with the attribute
aria-hidden="true"contains focusable content, such as an input field. This violates best practices for accessible web design and WCAG 2.2 guidelines. Elements hidden witharia-hidden="true"should not contain interactive or focusable elements because they become inaccessible, leading to a poor user experience.To Reproduce
Steps to reproduce the behavior:
Open the web application.
Navigate to the "Selecting ENCs" page.
Use a web accessibility testing tool (siteimprove) to identify the error.
Inspect the element with
aria-hidden="true"and verify that it contains focusable content (e.g., an input field).Expected Behavior
Elements with
aria-hidden="true"should not contain focusable or interactive elements. If a hidden element must be interactive, it should not usearia-hidden="true", and alternative methods should be employed to handle its visibility and interactivity.Screenshots
Additional Context
In the application, an
<input>element is inside a container witharia-hidden="true", making it invisible in terms of accessibility but still focusable by keyboard users. This can lead to a confusing experience as the input field may be operable but inaccessible to users who rely on proper keyboard navigation.