fix(settings) use aria-labels instead of off-screen labels

canonical · Sep 29, 2023 · 06901ad · 06901ad
1 parent 4853ef2
commit 06901ad
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 5 deletions.
diff --git a/src/pages/settings/SettingFormCheckbox.tsx b/src/pages/settings/SettingFormCheckbox.tsx
@@ -31,7 +31,7 @@ const SettingFormCheckbox: FC<Props> = ({
   return (
     <>
       <Input
-        label={<span className="u-off-screen">{configField.key}</span>}
+        aria-label={configField.key}
         id={getConfigId(configField.key)}
         wrapperClassName="input-wrapper"
         type="checkbox"

diff --git a/src/pages/settings/SettingFormInput.tsx b/src/pages/settings/SettingFormInput.tsx
@@ -36,8 +36,7 @@ const SettingFormInput: FC<Props> = ({
   return (
     <>
       <Input
-        label={configField.key}
-        labelClassName="u-off-screen"
+        aria-label={configField.key}
         id={getConfigId(configField.key)}
         wrapperClassName="input-wrapper"
         type={getInputType()}

diff --git a/src/pages/settings/SettingFormPassword.tsx b/src/pages/settings/SettingFormPassword.tsx
@@ -26,8 +26,7 @@ const SettingFormPassword: FC<Props> = ({
         <>
           <div className="input-row">
             <Input
-              label={configField.key}
-              labelClassName="u-off-screen"
+              aria-label={configField.key}
               id={getConfigId(configField.key)}
               wrapperClassName="input-wrapper"
               type={showPassword ? "text" : "password"}