frontend: Fix ARIA labels for SecretField

Author: vyncent-t

frontend/src/components/common/Resource/Resource.tsx

@@ -499,8 +499,13 @@ export function DataField(props: DataFieldProps) {
   );
 }
 
-export function SecretField(props: InputProps) {
-  const { value, ...other } = props;
+export interface SecretFieldProps extends InputProps {
+  value: string;
+  nameID?: string;
+}
+
+export function SecretField(props: SecretFieldProps) {
+  const { value, nameID, ...other } = props;
   const [showPassword, setShowPassword] = React.useState(false);
   const [copied, setCopied] = React.useState(false);
   const { t } = useTranslation();
@@ -555,6 +560,7 @@ export function SecretField(props: InputProps) {
       </Grid>
       <Grid item xs>
         <Input
+          aria-labelledby={nameID}
           readOnly={!showPassword}
           type="password"
           fullWidth

frontend/src/components/secret/Details.tsx

@@ -102,9 +102,11 @@ export default function SecretDetails(props: {
 
               const mainRows: NameValueTableRow[] = Object.entries(data).map((item: unknown[]) => ({
                 name: item[0] as string,
+                nameID: item[0] as string,
                 value: (
                   <SecretField
                     value={item[1]}
+                    nameID={item[0] as string}
                     onChange={e => handleFieldChange(item[0] as string, e.target.value)}
                   />
                 ),

frontend/src/components/secret/__snapshots__/Details.WithBase.stories.storyshot

@@ -234,6 +234,7 @@
               >
                 <dt
                   class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 css-1iczkge-MuiGrid-root"
+                  id="storageClassName"
                 >
                   storageClassName
                 </dt>
@@ -272,6 +273,7 @@
                       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-1z0dvx8-MuiGrid-root"
                     >
                       <div
+                        aria-labelledby="storageClassName"
                         class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth Mui-readOnly MuiInputBase-readOnly css-zam05p-MuiInputBase-root-MuiInput-root"
                       >
                         <input
@@ -286,6 +288,7 @@
                 </dd>
                 <dt
                   class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 css-1iczkge-MuiGrid-root"
+                  id="volumeMode"
                 >
                   volumeMode
                 </dt>
@@ -324,6 +327,7 @@
                       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-1z0dvx8-MuiGrid-root"
                     >
                       <div
+                        aria-labelledby="volumeMode"
                         class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth Mui-readOnly MuiInputBase-readOnly css-zam05p-MuiInputBase-root-MuiInput-root"
                       >
                         <input
@@ -338,6 +342,7 @@
                 </dd>
                 <dt
                   class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 css-iqixpy-MuiGrid-root"
+                  id="volumeName"
                 >
                   volumeName
                 </dt>
@@ -376,6 +381,7 @@
                       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-1z0dvx8-MuiGrid-root"
                     >
                       <div
+                        aria-labelledby="volumeName"
                         class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth Mui-readOnly MuiInputBase-readOnly css-zam05p-MuiInputBase-root-MuiInput-root"
                       >
                         <input