Fixed a11y violations for Select examples (#1479)

iTwin · Aug 14, 2023 · eb088b0 · eb088b0
1 parent afd3111
commit eb088b0
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 9 deletions.
diff --git a/examples/Select.disable.tsx b/examples/Select.disable.tsx
@@ -3,12 +3,13 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { Select } from '@itwin/itwinui-react';
+import { LabeledSelect } from '@itwin/itwinui-react';
 
 export default () => {
   return (
-    <Select<number>
+    <LabeledSelect
       disabled
+      label={'Disabled Select Label'}
       options={[
         {
           value: 1,

diff --git a/examples/Select.icon.tsx b/examples/Select.icon.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 { Select } from '@itwin/itwinui-react';
+import { LabeledSelect } from '@itwin/itwinui-react';
 import {
   SvgSmileyHappy,
   SvgSmileySad,
@@ -12,7 +12,8 @@ import {
 
 export default () => {
   return (
-    <Select
+    <LabeledSelect
+      label={'Choose feeling'}
       options={[
         {
           value: 'happy',

diff --git a/examples/Select.statuses.tsx b/examples/Select.statuses.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 { MenuItem, Select } from '@itwin/itwinui-react';
+import { MenuItem, LabeledSelect } from '@itwin/itwinui-react';
 
 export default () => {
   const options = [
@@ -22,7 +22,8 @@ export default () => {
   ];
 
   return (
-    <Select<string>
+    <LabeledSelect
+      label={'Choose color'}
       options={options}
       placeholder={'Placeholder text'}
       itemRenderer={(option) => (

diff --git a/examples/Select.sublabels.tsx b/examples/Select.sublabels.tsx
@@ -25,6 +25,13 @@ export default () => {
   ];
 
   return (
-    <Select options={options} placeholder={'Placeholder text'} size={'large'} />
+    <Select
+      triggerProps={{
+        'aria-label': 'Select label',
+      }}
+      options={options}
+      placeholder={'Placeholder text'}
+      size={'large'}
+    />
   );
 };
diff --git a/examples/Select.truncate.tsx b/examples/Select.truncate.tsx
@@ -3,7 +3,11 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { MenuItem, MiddleTextTruncation, Select } from '@itwin/itwinui-react';
+import {
+  MenuItem,
+  MiddleTextTruncation,
+  LabeledSelect,
+} from '@itwin/itwinui-react';
 import { useCallback, useState } from 'react';
 
 export default () => {
@@ -35,7 +39,8 @@ export default () => {
     [],
   );
   return (
-    <Select
+    <LabeledSelect
+      label={'Choose file'}
       options={options}
       value={selectedValue}
       onChange={setSelectedValue}