chore(search input): add a11y labels to examples (#11743)

* chore(search input): add a11y labels to examples

* updated aria labels

Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com>

* updated aria labels

Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com>

---------

Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com>

Author: Mash707

packages/react-core/src/components/DualListSelector/examples/DualListSelectorBasicSearch.tsx

@@ -102,6 +102,7 @@ export const DualListSelectorSearch: React.FunctionComponent = () => {
       value={isAvailable ? availableFilter : chosenFilter}
       onChange={(_event, value) => onFilterChange(value, isAvailable)}
       onClear={() => onFilterChange('', isAvailable)}
+      aria-label={isAvailable ? 'Search available options' : 'Search chosen options'}
     />
   );
 

packages/react-core/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx

@@ -115,6 +115,7 @@ export const DualListSelectorComplexOptionsActionsNext: React.FunctionComponent
       onChange={(_event, value) => onFilterChange(value, isAvailable)}
       onClear={() => onFilterChange('', isAvailable)}
       isDisabled={isDisabled}
+      aria-label={isAvailable ? 'Search available options' : 'Search chosen options'}
     />
   );
 

packages/react-core/src/components/DualListSelector/examples/DualListSelectorTree.tsx

@@ -182,6 +182,7 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
         value={isChosen ? chosenFilter : availableFilter}
         onChange={(_event, value) => onChange(value)}
         onClear={() => onChange('')}
+        aria-label={isChosen ? 'Search chosen items' : 'Search available items'}
       />
     );
   };

packages/react-core/src/components/SearchInput/examples/SearchInputAdvanced.tsx

@@ -32,6 +32,7 @@ export const SearchInputAdvanced: React.FunctionComponent = () => {
       />
       <br />
       <SearchInput
+        aria-label="Advanced search"
         attributes={[
           { attr: 'username', display: 'Username' },
           { attr: 'firstname', display: 'First name' }

packages/react-core/src/components/SearchInput/examples/SearchInputBasic.tsx

@@ -10,6 +10,7 @@ export const SearchInputBasic: React.FunctionComponent = () => {
 
   return (
     <SearchInput
+      aria-label="Search basic example"
       placeholder="Find by name"
       value={value}
       onChange={(_event, value) => onChange(value)}

packages/react-core/src/components/SearchInput/examples/SearchInputFocusSearch.tsx

@@ -7,7 +7,13 @@ export const SearchInputFocusSearch: React.FunctionComponent = () => {
 
   return (
     <>
-      <SearchInput ref={ref} value={value} onChange={(_event, value) => setValue(value)} onClear={() => setValue('')} />
+      <SearchInput
+        ref={ref}
+        value={value}
+        onChange={(_event, value) => setValue(value)}
+        onClear={() => setValue('')}
+        aria-label="Search focus using ref example"
+      />
       <Button onClick={() => ref.current && ref.current.focus()}>Focus on the search input</Button>
     </>
   );

packages/react-core/src/components/SearchInput/examples/SearchInputWithExpandable.tsx

@@ -15,6 +15,7 @@ export const SearchInputWithExpandable: React.FunctionComponent = () => {
 
   return (
     <SearchInput
+      aria-label="Search with expandable button example"
       placeholder="Find by name"
       value={value}
       onChange={(_event, value) => onChange(value)}

packages/react-core/src/components/SearchInput/examples/SearchInputWithNavigableOptions.tsx

@@ -29,6 +29,7 @@ export const SearchInputWithNavigableOptions: React.FunctionComponent = () => {
 
   return (
     <SearchInput
+      aria-label="Search match with navigable options example"
       placeholder="Find by name"
       value={value}
       onChange={(_event, value) => onChange(value)}

packages/react-core/src/components/SearchInput/examples/SearchInputWithResultCount.tsx

@@ -17,6 +17,7 @@ export const SearchInputWithResultCount: React.FunctionComponent = () => {
 
   return (
     <SearchInput
+      aria-label="Match with result count"
       placeholder="Find by name"
       value={value}
       onChange={(_event, value) => onChange(value)}

packages/react-core/src/components/SearchInput/examples/SearchInputWithSubmitButton.tsx

@@ -6,6 +6,7 @@ export const SearchInputWithSubmitButton: React.FunctionComponent = () => {
 
   return (
     <SearchInput
+      aria-label="Search with submit button example"
       placeholder="Find by name"
       value={value}
       onChange={(_event, value) => setValue(value)}