Merge pull request #124 from ConductionNL/revert-115-feature/XW-87/se…

…lect-WCAG Revert "feature/XW-87/select-WCAG"
ConductionNL · Oct 16, 2023 · adf42a3 · adf42a3
2 parents 7e7e899 + 614a469
commit adf42a3
Show file tree

Hide file tree

Showing 3 changed files with 1 addition and 60 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,6 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
-  - 2.2.12: Updated Select components to WCAG with aria-label and role.
   - 2.2.11: Updated Primary and Secondary topnav to NLDS.
   - 2.2.10: Added z-index to tooltip.
   - 2.2.9: Added CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate to index.

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.2.12",
+  "version": "2.2.11",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {

diff --git a/src/components/formFields/select/select.tsx b/src/components/formFields/select/select.tsx
@@ -11,7 +11,6 @@ interface ISelectProps {
   control: Control<FieldValues, any>;
   options: { label: string; value: string }[];
   name: string;
-  ariaLabel?: string;
   id?: string;
   defaultValue?: any;
   disabled?: boolean;
@@ -73,25 +72,7 @@ export const SelectMultiple = ({
   hideErrorMessage,
   menuPlacement,
   placeholder,
-  ariaLabel,
 }: ISelectProps & IReactHookFormProps): JSX.Element => {
-  React.useEffect(() => {
-    document.querySelectorAll('[id*="live-region"]').forEach((element: any) => {
-      if (element?.role !== "presentation") {
-        element.setAttribute("role", "presentation");
-      }
-    });
-    document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element: any) => {
-      if (element.role !== "presentation") {
-        element.setAttribute("role", "presentation");
-      }
-    });
-    document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element: any) => {
-      if (element.role !== "presentation") {
-        element.setAttribute("role", "presentation");
-      }
-    });
-  }, []);
   return (
     <Controller
       {...{ control, name, defaultValue }}
@@ -100,7 +81,6 @@ export const SelectMultiple = ({
         return (
           <>
             <ReactSelect
-              aria-label={ariaLabel}
               inputId={id}
               value={value ?? ""}
               className={clsx(styles.select, errors[name] && styles.error)}
@@ -132,25 +112,7 @@ export const SelectCreate = ({
   hideErrorMessage,
   menuPlacement,
   placeholder,
-  ariaLabel,
 }: ISelectProps & IReactHookFormProps): JSX.Element => {
-  React.useEffect(() => {
-    document.querySelectorAll('[id*="live-region"]').forEach((element: any) => {
-      if (element.role !== "presentation") {
-        element.setAttribute("role", "presentation");
-      }
-    });
-    document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element: any) => {
-      if (element.role !== "presentation") {
-        element.setAttribute("role", "presentation");
-      }
-    });
-    document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element: any) => {
-      if (element.role !== "presentation") {
-        element.setAttribute("role", "presentation");
-      }
-    });
-  }, []);
   return (
     <Controller
       {...{ control, name, defaultValue }}
@@ -159,7 +121,6 @@ export const SelectCreate = ({
         return (
           <>
             <CreatableSelect
-              aria-label={ariaLabel}
               inputId={id}
               value={value ?? ""}
               placeholder={disabled ? "Disabled..." : placeholder ?? "Select one or more options..."}
@@ -192,25 +153,7 @@ export const SelectSingle = ({
   hideErrorMessage,
   menuPlacement,
   placeholder,
-  ariaLabel,
 }: ISelectProps & IReactHookFormProps): JSX.Element => {
-  React.useEffect(() => {
-    document.querySelectorAll('[id*="live-region"]').forEach((element: any) => {
-      if (element.role !== "presentation") {
-        element.setAttribute("role", "presentation");
-      }
-    });
-    document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element: any) => {
-      if (element.role !== "presentation") {
-        element.setAttribute("role", "presentation");
-      }
-    });
-    document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element: any) => {
-      if (element.role !== "presentation") {
-        element.setAttribute("role", "presentation");
-      }
-    });
-  }, []);
   return (
     <Controller
       {...{ control, name, defaultValue }}
@@ -219,7 +162,6 @@ export const SelectSingle = ({
         return (
           <>
             <ReactSelect
-              aria-label={ariaLabel}
               inputId={id}
               value={value ?? ""}
               className={clsx(styles.select, errors[name] && styles.error)}