Indicate dropdown selection with aria-selected attribute

[alundgard]

Current behavior

aria-current is used to indicate a dropdown selection. Use aria-selected instead.

Steps to reproduce

Example page: Spotlight Accessibility for SODA - San Francisco Buildings.

Click on one of the dropdown menu options ("Sort by relevance," "12 per page").

Possible solution

WCAG Level A

See SODA's recommendation below.

Reported by SODA

Violation: Avoid inappropriate use of ARIA roles, states, and properties Severity: Minor

[Issue] The dropdown for the sorting uses aria-current to indicate which is selected. The appropriate attribute here is aria selected.

Note that aria-current is used for the the page selector at the bottom and is appropriate there.

[User Impact] When inappropriate ARIA roles, states, and/or properties are used it may prevent users of assistive technology from correctly interpreting and interacting with the content.

[Code Reference]

<div class="dropdown-menu show" role="menu" x-placement="bottom-start" style="...">
  <a class="dropdown-item " role="menuitem" href="...">relevance</a>
  <a class="dropdown-item " role="menuitem" href="...">year (new to old)</a>
  <a class="dropdown-item active" role="menuitem" aria-current="page" href="...">year (old to new)</a>
  <a class="dropdown-item " role="menuitem" href="...">author</a>
  <a class="dropdown-item " role="menuitem" href="...">title</a>
  <a class="dropdown-item " role="menuitem" href="...">publisher</a>
</div>

[Recommendation] Change aria-current to aria-selected="true".

[jcoyne]

Is this because we are combining links and role="menuitem"? I believe aria-current is appropriate for links, no?