fix a11y errors in settings

varname rename bodyText to ariaLabel
opendatahub-io · Feb 28, 2023 · 8850b5b · 8850b5b
1 parent 0b996c1
commit 8850b5b
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
diff --git a/frontend/src/components/FormGroupSettings.tsx b/frontend/src/components/FormGroupSettings.tsx
@@ -34,6 +34,7 @@ export const FormGroupSettings: React.FC<FormGroupSettingsProps> = ({
   <FormGroup fieldId={groupsField} label={title}>
     <Text>{body}</Text>
     <MultiSelection
+      ariaLabel={body}
       value={items}
       setValue={(newState) => handleMenuItemSelection(newState, groupsField)}
     />

diff --git a/frontend/src/components/MultiSelection.tsx b/frontend/src/components/MultiSelection.tsx
@@ -11,9 +11,10 @@ import { MenuItemStatus } from '~/pages/groupSettings/groupTypes';
 type MultiSelectionProps = {
   value: MenuItemStatus[];
   setValue: (itemSelection: MenuItemStatus[]) => void;
+  ariaLabel: string;
 };
 
-export const MultiSelection: React.FC<MultiSelectionProps> = ({ value, setValue }) => {
+export const MultiSelection: React.FC<MultiSelectionProps> = ({ value, setValue, ariaLabel }) => {
   const [showMenu, setShowMenu] = React.useState(false);
 
   const toggleMenu = (isOpen: React.SetStateAction<boolean>) => {
@@ -33,6 +34,7 @@ export const MultiSelection: React.FC<MultiSelectionProps> = ({ value, setValue
         removeFindDomNode
         variant={SelectVariant.typeaheadMulti}
         onToggle={toggleMenu}
+        typeAheadAriaLabel={ariaLabel}
         onSelect={(e, newValue) => {
           if (value?.filter((option) => option.name === newValue).length) {
             const newState = value.map((element) =>