Accessibility [FastPass]: Fix settings general missing aria input labels

frontend/src/components/App/Settings/NumRowsInput.tsx

@@ -31,9 +31,9 @@ import { useDispatch } from 'react-redux';
 import { getTablesRowsPerPage, setTablesRowsPerPage } from '../../../helpers/tablesRowsPerPage';
 import { defaultTableRowsPerPageOptions, setAppSettings } from '../../../redux/configSlice';
 
-export default function NumRowsInput(props: { defaultValue: number[] }) {
+export default function NumRowsInput(props: { defaultValue: number[]; nameLabelID?: string }) {
   const { t } = useTranslation(['frequent']);
-  const { defaultValue } = props;
+  const { defaultValue, nameLabelID } = props;
   const [isSelectOpen, setIsSelectOpen] = useState(false);
   const [options, setOptions] = useState(defaultValue);
   const focusedRef = useCallback((node: HTMLElement) => {
@@ -157,6 +157,7 @@ export default function NumRowsInput(props: { defaultValue: number[] }) {
           renderValue={value => `${value}`}
           size="small"
           variant="outlined"
+          labelId={nameLabelID}
         >
           {options.map(option => {
             const isCustom = !defaultTableRowsPerPageOptions.includes(option);

frontend/src/components/App/Settings/Settings.tsx

@@ -77,6 +77,11 @@ export default function Settings() {
     );
   }, [useEvict]);
 
+  const sidebarLabelID = 'sort-sidebar-label';
+  const evictLabelID = 'use-evict-label';
+  const tableRowsLabelID = 'rows-per-page-label';
+  const timezoneLabelID = 'timezone-label';
+
   return (
     <SectionBox
       title={t('translation|General Settings')}
@@ -109,8 +114,10 @@ export default function Settings() {
             value: (
               <NumRowsInput
                 defaultValue={storedRowsPerPageOptions || defaultTableRowsPerPageOptions}
+                nameLabelID={tableRowsLabelID}
               />
             ),
+            nameID: tableRowsLabelID,
           },
           {
             name: t('translation|Timezone to display for dates'),
@@ -119,9 +126,11 @@ export default function Settings() {
                 <TimezoneSelect
                   initialTimezone={selectedTimezone}
                   onChange={name => setSelectedTimezone(name)}
+                  nameLabelID={timezoneLabelID}
                 />
               </Box>
             ),
+            nameID: timezoneLabelID,
           },
           {
             name: t('translation|Sort sidebar items alphabetically'),
@@ -130,8 +139,12 @@ export default function Settings() {
                 color="primary"
                 checked={sortSidebar}
                 onChange={e => setSortSidebar(e.target.checked)}
+                inputProps={{
+                  'aria-labelledby': sidebarLabelID,
+                }}
               />
             ),
+            nameID: sidebarLabelID,
           },
           {
             name: t('translation|Use evict for pod deletion'),
@@ -140,8 +153,12 @@ export default function Settings() {
                 color="primary"
                 checked={useEvict}
                 onChange={e => setUseEvict(e.target.checked)}
+                inputProps={{
+                  'aria-labelledby': evictLabelID,
+                }}
               />
             ),
+            nameID: evictLabelID,
           },
         ]}
       />

frontend/src/components/App/Settings/__snapshots__/Settings.General.stories.storyshot

@@ -202,6 +202,7 @@
           </dd>
           <dt
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 css-1iczkge-MuiGrid-root"
+            id="rows-per-page-label"
           >
             Number of rows for tables
           </dt>
@@ -219,6 +220,7 @@
                   aria-controls=":mock-test-id:"
                   aria-expanded="false"
                   aria-haspopup="listbox"
+                  aria-labelledby="rows-per-page-label"
                   class="MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-oswssk-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input"
                   role="combobox"
                   tabindex="0"
@@ -262,6 +264,7 @@
           </dd>
           <dt
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 css-1iczkge-MuiGrid-root"
+            id="timezone-label"
           >
             Timezone to display for dates
           </dt>
@@ -285,6 +288,7 @@
                       aria-describedby="cluster-selector-autocomplete-helper-text"
                       aria-expanded="false"
                       aria-invalid="false"
+                      aria-labelledby="timezone-label"
                       autocapitalize="none"
                       autocomplete="off"
                       class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-19qh8xo-MuiInputBase-input-MuiOutlinedInput-input"
@@ -347,6 +351,7 @@
           </dd>
           <dt
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 css-1iczkge-MuiGrid-root"
+            id="sort-sidebar-label"
           >
             Sort sidebar items alphabetically
           </dt>
@@ -360,6 +365,7 @@
                 class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary css-1emuodk-MuiButtonBase-root-MuiSwitch-switchBase"
               >
                 <input
+                  aria-labelledby="sort-sidebar-label"
                   class="PrivateSwitchBase-input MuiSwitch-input css-1m9pwf3"
                   type="checkbox"
                 />
@@ -377,6 +383,7 @@
           </dd>
           <dt
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 css-iqixpy-MuiGrid-root"
+            id="use-evict-label"
           >
             Use evict for pod deletion
           </dt>
@@ -390,6 +397,7 @@
                 class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary Mui-checked PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary Mui-checked Mui-checked css-1emuodk-MuiButtonBase-root-MuiSwitch-switchBase"
               >
                 <input
+                  aria-labelledby="use-evict-label"
                   checked=""
                   class="PrivateSwitchBase-input MuiSwitch-input css-1m9pwf3"
                   type="checkbox"

frontend/src/components/common/NameValueTable/NameValueTable.tsx

@@ -32,6 +32,8 @@ export interface NameValueTableRow {
   valueCellProps?: GridProps;
   /** Whether to highlight the row (used for titles, separators, etc.). */
   withHighlightStyle?: boolean;
+  /** The ID to use for the name element, useful for accessibility */
+  nameID?: string;
 }
 
 export interface NameValueTableProps {
@@ -87,7 +89,10 @@ export default function NameValueTable(props: NameValueTableProps) {
       })}
     >
       {visibleRows.flatMap(
-        ({ name, value, hide = false, withHighlightStyle = false, valueCellProps = {} }, i) => {
+        (
+          { name, nameID, value, hide = false, withHighlightStyle = false, valueCellProps = {} },
+          i
+        ) => {
           let shouldHide = false;
           if (typeof hide === 'function') {
             shouldHide = hide(value);
@@ -112,6 +117,7 @@ export default function NameValueTable(props: NameValueTableProps) {
               sm={hideValueGridItem ? 12 : 4}
               component="dt"
               className={className}
+              id={nameID}
               sx={theme => {
                 const extra = withHighlightStyle
                   ? {

frontend/src/components/common/TimezoneSelect/TimezoneSelect.tsx

@@ -23,10 +23,12 @@ import spacetime from 'spacetime';
 export interface TimezoneSelectorProps {
   initialTimezone?: string;
   onChange: (timezone: string) => void;
+  /** The custom ID to be used when this component is inside NameValueTable for ARIA labelledby */
+  nameLabelID?: string;
 }
 
 export default function TimezoneSelect(props: TimezoneSelectorProps) {
-  const { onChange, initialTimezone } = props;
+  const { onChange, initialTimezone, nameLabelID } = props;
   const { i18n, t } = useTranslation();
   const timezoneOptions = React.useMemo(() => {
     const timezoneNames = spacetime.timezones();
@@ -51,7 +53,16 @@ export default function TimezoneSelect(props: TimezoneSelectorProps) {
       includeInputInList
       openOnFocus
       renderInput={params => (
-        <TextField {...params} helperText={t('Timezone')} size="small" variant="outlined" />
+        <TextField
+          {...params}
+          helperText={t('Timezone')}
+          size="small"
+          variant="outlined"
+          inputProps={{
+            ...params.inputProps,
+            'aria-labelledby': nameLabelID,
+          }}
+        />
       )}
       onChange={(_ev, value) => onChange(value.name)}
       value={timezoneOptions.find(option => option.name === initialTimezone)}