Refactor IpaTextInput component

IpaTextInput used its name attr as aria-label. Use ariaLabel if available, fallback to name otherwise. Refactor usages to use ariaLabel. Fixes: freeipa#189 Signed-off-by: Michal Polovka <[email protected]>
carma12 · May 17, 2024 · 7dc3fd2 · 7dc3fd2
1 parent f38a76f
commit 7dc3fd2
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 1 deletion.
diff --git a/src/components/Form/IpaTextInput.tsx b/src/components/Form/IpaTextInput.tsx
@@ -17,7 +17,7 @@ const IpaTextInput = (props: IPAParamDefinition) => {
       value={convertToString(value)}
       onChange={(_event, value) => onChange(value)}
       type="text"
-      aria-label={props.name}
+      aria-label={props.ariaLabel !== undefined ? props.ariaLabel : props.name}
       isRequired={required}
       readOnlyVariant={readOnly ? "plain" : undefined}
     />

diff --git a/src/components/HostsSections/HostSettings.tsx b/src/components/HostsSections/HostSettings.tsx
@@ -121,6 +121,7 @@ const HostSettings = (props: PropsToHostSettings) => {
             <FormGroup label="Class" fieldId="userclass">
               <IpaTextInput
                 name={"userclass"}
+                ariaLabel={"User class"}
                 ipaObject={ipaObject}
                 onChange={recordOnChange}
                 objectName="host"
@@ -130,6 +131,7 @@ const HostSettings = (props: PropsToHostSettings) => {
             <FormGroup label="Locality" fieldId="l">
               <IpaTextInput
                 name={"l"}
+                ariaLabel={"Locality"}
                 ipaObject={ipaObject}
                 onChange={recordOnChange}
                 objectName="host"
@@ -139,6 +141,7 @@ const HostSettings = (props: PropsToHostSettings) => {
             <FormGroup label="Location" fieldId="nshostlocation">
               <IpaTextInput
                 name={"nshostlocation"}
+                ariaLabel={"Location"}
                 ipaObject={ipaObject}
                 onChange={recordOnChange}
                 objectName="host"
@@ -148,6 +151,7 @@ const HostSettings = (props: PropsToHostSettings) => {
             <FormGroup label="Platform" fieldId="nshardwareplatform">
               <IpaTextInput
                 name={"nshardwareplatform"}
+                ariaLabel={"Platform"}
                 ipaObject={ipaObject}
                 onChange={recordOnChange}
                 objectName="host"
@@ -157,6 +161,7 @@ const HostSettings = (props: PropsToHostSettings) => {
             <FormGroup label="Operating system" fieldId="nsosversion">
               <IpaTextInput
                 name={"nsosversion"}
+                ariaLabel={"Operating system"}
                 ipaObject={ipaObject}
                 onChange={recordOnChange}
                 objectName="host"

diff --git a/src/components/UsersSections/UsersAccountSettings.tsx b/src/components/UsersSections/UsersAccountSettings.tsx
@@ -131,6 +131,7 @@ const UsersAccountSettings = (props: PropsToUsersAccountSettings) => {
             <FormGroup label="User login" fieldId="uid">
               <IpaTextInput
                 name={"uid"}
+                ariaLabel={"User login"}
                 ipaObject={ipaObject}
                 onChange={recordOnChange}
                 objectName="user"
@@ -163,6 +164,7 @@ const UsersAccountSettings = (props: PropsToUsersAccountSettings) => {
             <FormGroup label="UID" fieldId="uidnumber">
               <IpaTextInput
                 name={"uidnumber"}
+                ariaLabel={"UID number"}
                 ipaObject={ipaObject}
                 onChange={recordOnChange}
                 objectName="user"
@@ -172,6 +174,7 @@ const UsersAccountSettings = (props: PropsToUsersAccountSettings) => {
             <FormGroup label="GID" fieldId="gidnumber">
               <IpaTextInput
                 name={"gidnumber"}
+                ariaLabel={"GID number"}
                 ipaObject={ipaObject}
                 onChange={recordOnChange}
                 objectName="user"
@@ -205,6 +208,7 @@ const UsersAccountSettings = (props: PropsToUsersAccountSettings) => {
             <FormGroup label="Login shell" fieldId="loginshell">
               <IpaTextInput
                 name={"loginshell"}
+                ariaLabel={"Login shell"}
                 ipaObject={ipaObject}
                 onChange={recordOnChange}
                 objectName="user"
@@ -218,6 +222,7 @@ const UsersAccountSettings = (props: PropsToUsersAccountSettings) => {
             <FormGroup label="Home directory" fieldId="homedirectory">
               <IpaTextInput
                 name={"homedirectory"}
+                ariaLabel={"Home directory"}
                 ipaObject={ipaObject}
                 onChange={recordOnChange}
                 objectName="user"
@@ -326,6 +331,7 @@ const UsersAccountSettings = (props: PropsToUsersAccountSettings) => {
             >
               <IpaTextInput
                 name={"ipatokenradiususername"}
+                ariaLabel={"Radius proxy username"}
                 ipaObject={ipaObject}
                 onChange={recordOnChange}
                 objectName="user"
@@ -349,6 +355,7 @@ const UsersAccountSettings = (props: PropsToUsersAccountSettings) => {
             <FormGroup label="External IdP user identifier" fieldId="ipaidpsub">
               <IpaTextInput
                 name={"ipaidpsub"}
+                ariaLabel={"External IdP user identifier"}
                 ipaObject={ipaObject}
                 onChange={recordOnChange}
                 objectName="user"

diff --git a/src/components/UsersSections/UsersAttributesSMB.tsx b/src/components/UsersSections/UsersAttributesSMB.tsx
@@ -82,6 +82,7 @@ const UsersAttributesSMB = (props: PropsToSmbServices) => {
           >
             <IpaTextInput
               name={"ipantlogonscript"}
+              ariaLabel={"SMB logon script path"}
               ipaObject={ipaObject}
               onChange={recordOnChange}
               objectName="user"
@@ -97,6 +98,7 @@ const UsersAttributesSMB = (props: PropsToSmbServices) => {
           >
             <IpaTextInput
               name={"ipantprofilepath"}
+              ariaLabel={"SMB profile path"}
               ipaObject={ipaObject}
               onChange={recordOnChange}
               objectName="user"
@@ -119,6 +121,7 @@ const UsersAttributesSMB = (props: PropsToSmbServices) => {
           >
             <IpaTextInput
               name={"ipanthomedirectory"}
+              ariaLabel={"SMB home directory"}
               ipaObject={ipaObject}
               onChange={recordOnChange}
               objectName="user"

diff --git a/src/components/UsersSections/UsersEmployeeInfo.tsx b/src/components/UsersSections/UsersEmployeeInfo.tsx
@@ -36,6 +36,7 @@ const UsersEmployeeInfo = (props: PropsToEmployeeInfo) => {
           <FormGroup label="Org. unit" fieldId="ou">
             <IpaTextInput
               name={"ou"}
+              ariaLabel={"Org. unit"}
               ipaObject={ipaObject}
               onChange={recordOnChange}
               objectName="user"
@@ -68,6 +69,7 @@ const UsersEmployeeInfo = (props: PropsToEmployeeInfo) => {
           <FormGroup label="Employee number" fieldId="employeenumber">
             <IpaTextInput
               name={"employeenumber"}
+              ariaLabel={"Employee number"}
               ipaObject={ipaObject}
               onChange={recordOnChange}
               objectName="user"
@@ -77,6 +79,7 @@ const UsersEmployeeInfo = (props: PropsToEmployeeInfo) => {
           <FormGroup label="Employee type" fieldId="employeetype">
             <IpaTextInput
               name={"employeetype"}
+              ariaLabel={"Employee type"}
               ipaObject={ipaObject}
               onChange={recordOnChange}
               objectName="user"
@@ -86,6 +89,7 @@ const UsersEmployeeInfo = (props: PropsToEmployeeInfo) => {
           <FormGroup label="Preferred language" fieldId="preferredlanguage">
             <IpaTextInput
               name={"preferredlanguage"}
+              ariaLabel={"Preferred language"}
               ipaObject={ipaObject}
               onChange={recordOnChange}
               objectName="user"

diff --git a/src/components/UsersSections/UsersIdentity.tsx b/src/components/UsersSections/UsersIdentity.tsx
@@ -24,6 +24,7 @@ const UsersIdentity = (props: PropsToUsersIdentity) => {
   const firstNameTextInput = (
     <IpaTextInput
       name={"givenname"}
+      ariaLabel={"Given name"}
       ipaObject={ipaObject}
       onChange={recordOnChange}
       objectName="user"
@@ -35,6 +36,7 @@ const UsersIdentity = (props: PropsToUsersIdentity) => {
   const lastNameTextInput = (
     <IpaTextInput
       name={"sn"}
+      ariaLabel={"Last name"}
       ipaObject={ipaObject}
       onChange={recordOnChange}
       objectName="user"
@@ -46,6 +48,7 @@ const UsersIdentity = (props: PropsToUsersIdentity) => {
   const fullNameTextInput = (
     <IpaTextInput
       name={"cn"}
+      ariaLabel={"Full name"}
       ipaObject={ipaObject}
       onChange={recordOnChange}
       objectName="user"
@@ -57,6 +60,7 @@ const UsersIdentity = (props: PropsToUsersIdentity) => {
   const jobTitleTextInput = (
     <IpaTextInput
       name={"title"}
+      ariaLabel={"Job title"}
       ipaObject={ipaObject}
       onChange={recordOnChange}
       objectName="user"
@@ -68,6 +72,7 @@ const UsersIdentity = (props: PropsToUsersIdentity) => {
   const gecosTextInput = (
     <IpaTextInput
       name={"gecos"}
+      ariaLabel={"GECOS"}
       ipaObject={ipaObject}
       onChange={recordOnChange}
       objectName="user"
@@ -79,6 +84,7 @@ const UsersIdentity = (props: PropsToUsersIdentity) => {
   const userClassTextInput = (
     <IpaTextInput
       name={"userclass"}
+      ariaLabel={"User Class"}
       ipaObject={ipaObject}
       onChange={recordOnChange}
       objectName="user"

diff --git a/src/components/UsersSections/UsersMailingAddress.tsx b/src/components/UsersSections/UsersMailingAddress.tsx
@@ -28,6 +28,7 @@ const UsersMailingAddress = (props: PropsToUsersMailingAddress) => {
           <FormGroup label="Street address" fieldId="street">
             <IpaTextInput
               name={"street"}
+              ariaLabel={"Street address"}
               ipaObject={ipaObject}
               onChange={recordOnChange}
               objectName="user"
@@ -37,6 +38,7 @@ const UsersMailingAddress = (props: PropsToUsersMailingAddress) => {
           <FormGroup label="City" fieldId="l">
             <IpaTextInput
               name={"l"}
+              ariaLabel={"City"}
               ipaObject={ipaObject}
               onChange={recordOnChange}
               objectName="user"
@@ -50,6 +52,7 @@ const UsersMailingAddress = (props: PropsToUsersMailingAddress) => {
           <FormGroup label="State/province" fieldId="st">
             <IpaTextInput
               name={"st"}
+              ariaLabel={"State/province"}
               ipaObject={ipaObject}
               onChange={recordOnChange}
               objectName="user"
@@ -59,6 +62,7 @@ const UsersMailingAddress = (props: PropsToUsersMailingAddress) => {
           <FormGroup label="ZIP" fieldId="postalcode">
             <IpaTextInput
               name={"postalcode"}
+              ariaLabel={"Postal code"}
               ipaObject={ipaObject}
               onChange={recordOnChange}
               objectName="user"