fix: ToggleSwitch component has required label via aria-label or aria…

…-labelledby (#2035)
open-sauced · Nov 2, 2023 · 0684081 · 0684081
1 parent 010a9ba
commit 0684081
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 16 deletions.
diff --git a/components/atoms/ToggleOption/toggle-option.tsx b/components/atoms/ToggleOption/toggle-option.tsx
@@ -12,7 +12,7 @@ const ToggleOption = ({ optionText, withIcon, checked, handleToggle }: ToogleOpt
       onClick={handleToggle}
       className="inline-flex cursor-pointer items-center gap-2 rounded-md px-2 py-0.5 border border-light-slate-6 bg-light-slate-1"
     >
-      <ToggleSwitch size="sm" handleToggle={handleToggle} name={optionText} checked={checked} />
+      <ToggleSwitch ariaLabel={optionText} size="sm" handleToggle={handleToggle} name={optionText} checked={checked} />
       <span className="text-sm text-light-slate-11">{optionText}</span>
       {withIcon && (
         <HiInformationCircle

diff --git a/components/atoms/ToggleSwitch/toggle-switch.tsx b/components/atoms/ToggleSwitch/toggle-switch.tsx
@@ -1,27 +1,33 @@
 import * as Switch from "@radix-ui/react-switch";
 import clsx from "clsx";
 
-interface ToggleSwitchProps {
+type ToggleSwitchProps = {
   name: string;
   checked: boolean;
   handleToggle: () => void;
   size?: "sm" | "lg" | "base";
   classNames?: string;
-}
+} & ({ ariaLabel: string; ariaLabelledBy?: never } | { ariaLabelledBy: string; ariaLabel?: never });
+
+const ToggleSwitch = (props: ToggleSwitchProps): JSX.Element => {
+  const { name, checked = false, handleToggle, size = "base", classNames } = props;
+  let ariaProps: { "aria-label": string } | { "aria-labelledby": string } | undefined;
+
+  if (props.ariaLabelledBy) {
+    ariaProps = { "aria-labelledby": props.ariaLabelledBy };
+  }
+
+  if (props.ariaLabel) {
+    ariaProps = { "aria-label": props.ariaLabel };
+  }
 
-const ToggleSwitch = ({
-  name,
-  checked = false,
-  handleToggle,
-  size = "base",
-  classNames,
-}: ToggleSwitchProps): JSX.Element => {
   return (
     <Switch.Root
       defaultChecked
       checked={checked}
       onClick={() => handleToggle()}
       id={name}
+      {...ariaProps}
       className={clsx(
         classNames ?? classNames,
         checked && "!bg-light-orange-10 justify-end",

diff --git a/components/molecules/HubContributorsHeader/hub-contributors-header.tsx b/components/molecules/HubContributorsHeader/hub-contributors-header.tsx
@@ -70,10 +70,16 @@ const HubContributorsHeader = ({
         <div className="flex flex-col items-center justify-center gap-6 md:flex-row header-info max-sm:mt-4">
           <div className="flex items-center order-2 gap-2 md:flex-row md:order-1">
             <div className="flex items-center gap-10 py-1.5 px-4 rounded-md bg-white mr-3">
-              <span className="flex items-center gap-2 text-sm shrink-0">
+              <span className="flex items-center gap-2 text-sm shrink-0" id="hub-make-public">
                 <FiGlobe /> Make Public
               </span>
-              <ToggleSwitch size="base" checked={isPublic} name="isPublic" handleToggle={handleToggleIsPublic} />
+              <ToggleSwitch
+                ariaLabelledBy="hub-make-public"
+                size="base"
+                checked={isPublic}
+                name="isPublic"
+                handleToggle={handleToggleIsPublic}
+              />
             </div>
             <span
               className={clsx(

diff --git a/components/organisms/GitHubImportDialog/github-import-dialog.tsx b/components/organisms/GitHubImportDialog/github-import-dialog.tsx
@@ -31,10 +31,13 @@ const GitHubImportDialog = ({ open, handleClose, handleImport, loading }: GitHub
               Import your GitHub &quot;following&quot; list
             </Title>
             <Text className="leading-tight text-light-slate-9">
-              We will import usernames of developers you are following on GitHub to create your new list.
+              <span id="import-users-explainer">
+                We will import usernames of developers you are following on GitHub to create your new list.
+              </span>
             </Text>
             <div className="flex pt-2">
               <ToggleSwitch
+                ariaLabelledBy="import-users-explainer"
                 name="followImported"
                 classNames="mr-2"
                 checked={follow}

diff --git a/components/organisms/GitHubTeamSyncDialog/github-team-sync-dialog.tsx b/components/organisms/GitHubTeamSyncDialog/github-team-sync-dialog.tsx
@@ -101,12 +101,15 @@ const GitHubTeamSyncDialog = ({
             </label>
             <label className="flex">
               <ToggleSwitch
+                ariaLabelledBy="import-users-explainer"
                 name="followImported"
                 classNames="mr-2"
                 checked={follow}
                 handleToggle={() => setFollow((toFollow) => !toFollow)}
               />
-              <Text className="leading-tight text-light-slate-9">Follow everyone imported.</Text>
+              <Text className="leading-tight text-light-slate-9">
+                <span id="import-users-explainer">Follow everyone imported.</span>
+              </Text>
             </label>
           </div>
           <div className="flex gap-3">

diff --git a/components/organisms/InsightPage/InsightPage.tsx b/components/organisms/InsightPage/InsightPage.tsx
@@ -688,12 +688,15 @@ const InsightPage = ({ edit, insight, pageRepos }: InsightPageProps) => {
           <div className="flex justify-between">
             <div className="flex items-center">
               <UserGroupIcon className="w-6 h-6 text-light-slate-9" />
-              <Text className="pl-2">Make this page publicly visible</Text>
+              <Text className="pl-2">
+                <span id="make-public-explainer">Make this page publicly visible</span>
+              </Text>
             </div>
 
             <div className="flex ml-2 !border-red-900 items-center">
               <Text className="!text-orange-600 pr-2 hidden md:block">Make Public</Text>
               <ToggleSwitch
+                ariaLabelledBy="make-public-explainer"
                 name="isPublic"
                 checked={isPublic}
                 handleToggle={() => setIsPublic((isPublic) => !isPublic)}

diff --git a/pages/hub/lists/new.tsx b/pages/hub/lists/new.tsx
@@ -226,12 +226,15 @@ const CreateListPage = () => {
           <div className="flex justify-between">
             <div className="flex items-center">
               <UserGroupIcon className="w-6 h-6 text-light-slate-9" />
-              <Text className="pl-2">Make this list publicly visible</Text>
+              <Text className="pl-2">
+                <span id="make-public-explainer">Make this list publicly visible</span>
+              </Text>
             </div>
 
             <div className="flex ml-2 !border-red-900 items-center">
               <Text className="text-orange-600 pr-2 hidden md:block">Make Public</Text>
               <ToggleSwitch
+                ariaLabelledBy="make-public-explainer"
                 name="isPublic"
                 checked={isPublic}
                 handleToggle={() => setIsPublic((isPublic) => !isPublic)}

diff --git a/stories/atoms/toggle-switch.stories.tsx b/stories/atoms/toggle-switch.stories.tsx
@@ -16,19 +16,23 @@ Default.args = {
   name: "test",
   checked: false,
   size: "base",
+  ariaLabel: "This is a toggle switch",
 };
 Small.args = {
   name: "test",
   checked: false,
   size: "sm",
+  ariaLabel: "This is a toggle switch",
 };
 Large.args = {
   name: "test",
   checked: false,
   size: "lg",
+  ariaLabel: "This is a toggle switch",
 };
 Custom.args = {
   name: "test",
   checked: false,
   classNames: "w-8 h-4",
+  ariaLabel: "This is a toggle switch",
 };