Problem
The navbar items in mobile mode are hidden from NVDA screen reader.
Cause
Following issue #1984, it is evident that the source of the problem is caused by a bug in USWDS package version 2.13.3 currently being used in the project (see also email below). The mobile navbar sandwich button adds aria-hidden="true" to all the parent elements, and since aria-hidden hides all accessibility features from the element and all its children (see this), the navbar items will be hidden from screen reader.
Solution
Upgrade USWDS to version 3.2.0.
Deliverables
Upgrade USWDS to 3.2.0
Use forward instead of Import updated SASS from USWDS according to USWDS documentation.
Build frontend using Webpack following USWDS documentation. Note: The build script should be updated to include build paths for new USWDS (now ./node_modules/@uswds/uswds).
Acceptance Criteria
Tabing through navbar, all items should be readable by NVDA screen reader.
Test other pages with screen reader
Additional acceptance test for other frontend scripts and components to ensure no collateral negative affect on other items
Notes:
Note 1: NVDA is a MS Windows program, as such the test has to be done in Windows env
Description
Problem The navbar items in mobile mode are hidden from NVDA screen reader.
Cause Following issue #1984, it is evident that the source of the problem is caused by a bug in USWDS package version 2.13.3 currently being used in the project (see also email below). The mobile navbar sandwich button adds
aria-hidden="true"
to all the parent elements, and since aria-hidden hides all accessibility features from the element and all its children (see this), the navbar items will be hidden from screen reader.Solution
Upgrade USWDS to version 3.2.0.
Deliverables
Acceptance Criteria
Notes: