2.32 Dropdown list items coded as buttons (M)

FIGURE 2.66: Ethnicity dropdown highlighted with NVDA screen reader activated on the Patient Settings page

2.32.1 WCAG 3.2.4 (AA), 4.1.1 (A), 4.1.2 (A) - Desktop

On the Patient Settings page, the items within the Ethnicity dropdown menu are coded as buttons and are announced as such by screen readers.

This goes against HTML specifications. These are items in a list and should be coded accordingly. The current implementation would cause confusion for screen reader users who would expect a button to perform some action. It is not made obvious that this is a drop down list for them to choose an option from.

2.32.2 Code Snippet

<li _ngcontent-gxd-c129="">
<button _ngcontent-gxd-c129="" type="button"> Black African </button> 
</li>

2.32.3 Recommendation

Use native HTML for dropdown lists using the <select> tag.

2.32.4 Spot check: December 2022

This issue is unresolved. Please refer to the recommendation above to fix the issue.

---