Accessible Web Components

Dropdown Selector

dropdown-selector

The dropdown selector is a form input that can be used to in place of a native select element in single mode.

Work in progress

I'm currently working on the design of the documentation and how to include demonstrations and code examples for the components.

Demonstration

Accessibility

If a label has been associated to the dropdown-selector, then clicking on the label will open the list of options for the selector.

Keyboard navigation is also available. The element is focusable with tab.

When closed

When open

Screen readers

Screen reader users will be informed that they have focused a combobox, along with the label associated with the dropdown-selector, and that it can open a listbox with options.

On opening the listbox, the user will be informed of how many items are in the list and what the current setting is, and as they use the keyboard to navigate up and down the list, they will be told which option they are hovering over.

Example code

Vanilla

               
<label for="choose-month">Choose a month</label>
<dropdown-selector id="choose-month">
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5" selected>June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</dropdown-selector>

Vue.js

               
<script setup>
const months = [
'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December',
]
 
const month = ref(5);
</script>
 
<template>
<label for="choose-month">Choose a month</label>
<dropdown-selector id="choose-month" v-model="month">
<option v-for="(month, m) in months" :key="m" :value="m">month</option>
</dropdown-selector>
</template>

React

               
const months = [
'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December',
]
 
const [month, setMonth] = useState(5);
 
useLayoutEffect(() => {
const {current} = selectorRef;
 
const handleChange = (event) => {
setOutput(event.target.value)
};
current.addEventListener('change', handleChange);
 
return () => current.removeEventListener('change', handleChange);
}, [selectorRef]);
 
return (
<label htmlFor="choose-month" value="{month}">Choose a month</label>
<dropdown-selector id="choose-month">
{ months.map((month, m) => (
<option key={m} value="{m}">{month}</option>
))}
</dropdown-selector>
)

API

More information