Custom drop down menus

[cstarcher]

Relevant Components:

• Global

Description Whenever possible, use native HTML5 elements with the semantics required. For instance, {{<select>}} with children {{<option>}} have the necessary semantics to fix the issues with keyboard functionality on most of the offending components, without dealing with attributes or customization.

Using semantically accurate components is important in two ways.

• the use of semantically accurate components ensures consistency throughout the web as far as operation of a website goes, particularly for people using assistive technology.

• the use of semantically accurate components provides accurate and succinct information to those using assistive technology upon encountering the component. People who use the web with assistive technology know what a {{<select>}} is. A {{<div>}} is the epitome of ambiguity.

Solution Use semantically accurate elements.

[jcreel]

We are using ul with appropriate role attributes for our dropdown selection. Will this be adequate for screen readers, etc?

[ghost]

@cstarcher you mind if I assign myself this issue?

[cstarcher]

@wwelling It's all yours!

[ghost]

@cstarcher What is the definition of done on this issue?

[cstarcher]

@wwelling That's a good question. It seems this would be a front end code review and refactor. I did not prioritize this one well for the current sprint. I believe there are other specific accessibility issues that are higher priority. I'm going to reprioritize in favor of some others issues. We can revisit it later if there is time.