raft-tech / TANF-app

Repo for development of a new TANF Data Reporting System
Other
16 stars 3 forks source link

[bug fix] As an A11y user I want to be able to have screen reader available for collapsed sidenav navbar in mobile mode #2307

Open raftmsohani opened 1 year ago

raftmsohani commented 1 year ago

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.

Screen Shot 2022-12-07 at 7 00 58 PM

Solution

Upgrade USWDS to version 3.2.0.

Deliverables

  1. Upgrade USWDS to 3.2.0
  2. Use forward instead of Import updated SASS from USWDS according to USWDS documentation.
  3. 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

  1. Tabing through navbar, all items should be readable by NVDA screen reader.
  2. Test other pages with screen reader
  3. Additional acceptance test for other frontend scripts and components to ensure no collateral negative affect on other items

Notes:

robgendron commented 7 months ago

@reitermb Is this related to Parity?

reitermb commented 7 months ago

@reitermb Is this related to Parity?

This is a relatively high priority accessibility issue but isn't technically parity.