03/04: improve accessibility of the location suggestions listbox

Author: kettanaito

exercises/03.guides/04.problem.api-mocking/app/components/forms.tsx

@@ -12,7 +12,12 @@ import { Input } from './ui/input.tsx'
 import { Label } from './ui/label.tsx'
 import { Textarea } from './ui/textarea.tsx'
 import { cn } from '#app/utils/misc.tsx'
-import { Command, CommandItem, CommandList } from './ui/command.tsx'
+import {
+	Command,
+	CommandItem,
+	CommandList,
+	CommandListProps,
+} from './ui/command.tsx'
 
 export type ListOfErrors = Array<string | null | undefined> | null | undefined
 
@@ -206,14 +211,16 @@ export function CheckboxField({
 export function ComboboxField({
 	labelProps,
 	inputProps,
+	listboxProps = {},
 	errors,
 	options,
 	className,
 }: {
 	labelProps: React.LabelHTMLAttributes<HTMLLabelElement>
 	inputProps: React.TextareaHTMLAttributes<HTMLInputElement> & { key: any }
+	listboxProps?: CommandListProps
 	errors?: ListOfErrors
-	options: Array<{ label: string; value: string }>
+	options: Array<{ id: string | number; label: string; value: string }>
 	className?: string
 }) {
 	const fallbackId = useId()
@@ -228,8 +235,9 @@ export function ComboboxField({
 	const [isDirty, setDirty] = useState(false)
 	const [isListOpen, setListOpen] = useState(false)
 	const [query, setQuery] = useState<string>('')
+
 	const [filtered, setFiltered] = useState<
-		Array<{ label: string; value: string }>
+		Array<{ id: string | number; label: string; value: string }>
 	>([])
 
 	const filterOptions = useCallback(
@@ -257,6 +265,8 @@ export function ComboboxField({
 			<Label htmlFor={id} {...labelProps} />
 			<Input
 				{...inputProps}
+				role="combobox"
+				aria-expanded={isListOpen ? 'true' : 'false'}
 				aria-invalid={errorId ? true : undefined}
 				aria-describedby={errorId}
 				autoComplete="off"
@@ -281,10 +291,10 @@ export function ComboboxField({
 			{isListOpen && filtered.length > 0 && (
 				<div className="bg-popover text-popover-foreground border-muted-foreground/60 absolute z-10 mt-1 w-full rounded-md border shadow">
 					<Command>
-						<CommandList>
+						<CommandList {...listboxProps}>
 							{filtered.map((option) => (
 								<CommandItem
-									key={option.value}
+									key={option.id}
 									value={option.value}
 									onSelect={() => {
 										control.change(option.value)

exercises/03.guides/04.problem.api-mocking/app/components/ui/command.tsx

@@ -80,10 +80,11 @@ function CommandInput({
 	)
 }
 
-function CommandList({
-	className,
-	...props
-}: React.ComponentProps<typeof CommandPrimitive.List>) {
+export type CommandListProps = React.ComponentProps<
+	typeof CommandPrimitive.List
+>
+
+function CommandList({ className, ...props }: CommandListProps) {
 	return (
 		<CommandPrimitive.List
 			data-slot="command-list"

exercises/03.guides/04.solution.api-mocking/app/components/forms.tsx

@@ -12,7 +12,12 @@ import { Input } from './ui/input.tsx'
 import { Label } from './ui/label.tsx'
 import { Textarea } from './ui/textarea.tsx'
 import { cn } from '#app/utils/misc.tsx'
-import { Command, CommandItem, CommandList } from './ui/command.tsx'
+import {
+	Command,
+	CommandItem,
+	CommandList,
+	CommandListProps,
+} from './ui/command.tsx'
 
 export type ListOfErrors = Array<string | null | undefined> | null | undefined
 
@@ -206,12 +211,14 @@ export function CheckboxField({
 export function ComboboxField({
 	labelProps,
 	inputProps,
+	listboxProps = {},
 	errors,
 	options,
 	className,
 }: {
 	labelProps: React.LabelHTMLAttributes<HTMLLabelElement>
 	inputProps: React.TextareaHTMLAttributes<HTMLInputElement> & { key: any }
+	listboxProps?: CommandListProps
 	errors?: ListOfErrors
 	options: Array<{ id: string | number; label: string; value: string }>
 	className?: string
@@ -258,6 +265,8 @@ export function ComboboxField({
 			<Label htmlFor={id} {...labelProps} />
 			<Input
 				{...inputProps}
+				role="combobox"
+				aria-expanded={isListOpen ? 'true' : 'false'}
 				aria-invalid={errorId ? true : undefined}
 				aria-describedby={errorId}
 				autoComplete="off"
@@ -282,7 +291,7 @@ export function ComboboxField({
 			{isListOpen && filtered.length > 0 && (
 				<div className="bg-popover text-popover-foreground border-muted-foreground/60 absolute z-10 mt-1 w-full rounded-md border shadow">
 					<Command>
-						<CommandList>
+						<CommandList {...listboxProps}>
 							{filtered.map((option) => (
 								<CommandItem
 									key={option.id}

exercises/03.guides/04.solution.api-mocking/app/components/ui/command.tsx

@@ -80,10 +80,11 @@ function CommandInput({
 	)
 }
 
-function CommandList({
-	className,
-	...props
-}: React.ComponentProps<typeof CommandPrimitive.List>) {
+export type CommandListProps = React.ComponentProps<
+	typeof CommandPrimitive.List
+>
+
+function CommandList({ className, ...props }: CommandListProps) {
 	return (
 		<CommandPrimitive.List
 			data-slot="command-list"

exercises/03.guides/04.solution.api-mocking/app/routes/users+/$username_+/__note-editor.tsx

@@ -155,6 +155,10 @@ export function NoteEditor({
 								...getInputProps(fields.location, { type: 'text' }),
 								placeholder: 'Select a location...',
 							}}
+							listboxProps={{
+								label: 'Location suggestions',
+								'aria-label': 'Location suggestions',
+							}}
 							errors={fields.location.errors}
 						/>
 						<div>

exercises/03.guides/04.solution.api-mocking/tests/e2e/notes-create.test.ts

@@ -37,10 +37,11 @@ test('displays location suggestions when creating a new note', async ({
 
 	const locationInput = page.getByLabel('Location')
 	await locationInput.fill('San')
-	await expect(page.getByRole('option')).toHaveText([
-		'San Francisco',
-		'San Jose',
-	])
+	await expect(
+		page
+			.getByRole('listbox', { name: 'Location suggestions' })
+			.getByRole('option'),
+	).toHaveText(['San Francisco', 'San Jose'])
 
 	await page.getByRole('option', { name: 'San Francisco' }).click()
 	await expect(locationInput).toHaveValue('San Francisco')