Combobox a11y fix (#1456)

iTwin · Aug 2, 2023 · 1533cd0 · 1533cd0
1 parent cd9280d
commit 1533cd0
Showing 1 changed file with 13 additions and 10 deletions.
diff --git a/examples/ComboBox.multipleSelect.tsx b/examples/ComboBox.multipleSelect.tsx
@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { ComboBox } from '@itwin/itwinui-react';
+import { ComboBox, Label } from '@itwin/itwinui-react';
 
 export default () => {
   const options = React.useMemo(
@@ -23,14 +23,17 @@ export default () => {
   ]);
 
   return (
-    <ComboBox
-      options={options}
-      inputProps={{ placeholder: 'Housing type' }}
-      multiple
-      value={selectedOptions}
-      onChange={(selected) => {
-        setSelectedOptions(selected);
-      }}
-    />
+    <>
+      <Label htmlFor='housing-input'> Select housing type </Label>
+      <ComboBox
+        options={options}
+        inputProps={{ id: 'housing-input', placeholder: 'Housing type' }}
+        multiple
+        value={selectedOptions}
+        onChange={(selected) => {
+          setSelectedOptions(selected);
+        }}
+      />
+    </>
   );
 };