search

indiana-university / rivet-source

Indiana University’s design system for web application development
https://rivet.iu.edu
BSD 3-Clause "New" or "Revised" License
54 stars 5 forks source link

Breadcrumbs incorrectly use aria-label instead of aria-current to indicate current page #756

Open mmeller75 opened 4 weeks ago

mmeller75 commented 4 weeks ago

Describe the bug

The breadcrumb navigation pattern includes aria-label="Current page" on the last, non-link <li>. aria-label will override any content of the <li> as the accessible name.

Some assistive technology may not recognize aria-label on a <li> since it is not interactive and does not have a landmark role. For example, VoiceOver on iOS and NVDA do not recognize aria-label on the <li> so do not announce that this is the current page.

Expected behavior

Replace aria-label="Current page" with aria-current="page" to correctly convey that this <li> is the current page within the series of list items. About aria-current.

Relevant context (required)

Screenshots of 1) current code with accessibility tree and properties, and 2) expected code with accessibility tree and properties. Screenshot 2024-06-06 at 3 21 36 PM Screenshot 2024-06-06 at 3 22 17 PM

Steps to reproduce

  1. Turn on a screen reader.
  2. Listen as you navigate the breadcrumbs. Depending on screen reader/browser combination, you may or may not hear "current page" and/or the text content.
  3. Change the attribute to aria-current="page".
  4. Listen as you navigate the breadcrumbs. It should correctly identify the last item as the current page and announce the text content.