[a11y-defect-2]: Edit & Remove buttons do not have distinct aria-labels

[jeana-adhoc]

Point of contact

@jeana-adhoc

Severity level

2, Serious. Should be fixed in 1-2 sprints post-launch.

Details

On the disability exam page, when there are multiple edit and remove buttons on the page, aria-labels must be added to the buttons and be made unique so that you know what is being edited.

Reproduction steps

1. Enable a screen reader
2. Navigate to the disability exam page
3. Add 2 or more exam dates
4. Go back and click "Edit" You will hear "Edit exam date" for each card.

Proposed solution or next steps

The aria-label for each edit button should be "Edit exam date for actual exam date" And include the actual date that is being edited.

The aria-label for each remove button should be "Remove exam date for actual exam date" And include the actual date that is being edited.

References, articles, or WCAG support

1. WCAG2.1 Understanding Success Criterion 2.5.3: Label in Name

Type of issue

• [ ] Axe-core
• [X] Screenreader | assistive tech & device support
• [ ] Keyboard
• [ ] Zoom
• [ ] Color, typography, & visual elements
• [ ] Components and pattern standards
• [ ] Content organization
• [ ] Focus
• [ ] Headings
• [ ] Content style guide
• [ ] Link and button labels
• [ ] Semantic HTML
• [ ] Markup and metadata
• [ ] Non-text content and media
• [ ] Overall user experience
• [X] Cognitive | user flows & navigating
• [ ] URL standards
• [ ] Something else

[tlei123]

PR opened.

[tlei123]

PR merged — changes should be in Staging by ~4:45 PM ET.

[tlei123]

@tbaker1026 @jeana-adhoc @rachelshearerux , fix is now in Staging, ready for validation.

[jeana-adhoc]

This works great!! Verified in staging. Edit and remove buttons aria-labels include the date making them unique.