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

[vyncent-t]

Summary

This PR fixes accessibility related issues for the settings page, mainly just the issues found by FastPass on the General tab.

These changes are part of a larger accessibility compliance goal from ADO (not sure if linking is allowed).

Issues are found using FastPass automated checks, feel free to download the tool and doublecheck if interested.

Changes

These aria labels are now added to the settings view

• Add aria labelled by for Sort sidebar items alphabetically menu switch
• Add aria labelled by for Use evict for pod deletion menu switch
• Add aria label for Number of rows for tables source component
• Add aria label for Timezone to display for dates source component
• Add aria label for drawer mode switch
• Updates Language to use typography (was plain text before)

Note

I have ran into issues with applying some aria attributes to the MUI components directly. I found that just attaching aira-label / aira-labelledby etc would only attach to the wrapper for the MUI component and not the input element itself. By adding the inputProps field we can attach aria labels to the actual input element.

FastPass checks this solves

Issue for Number of rows for tables

Issue for Timezone to display for dates

issue for Sort sidebar items alphabetically

issue for Use evict for pod deletion

[joaquimrocha]

I am surprised this is not set by default. Can you elaborate what is the test failing here?
In any case, a solution would need the aria-label value to be translatable. Not sure if "option" is a good idea here either. AFAIU, screen readers already should understand this is part of a select.

[vyncent-t]

The FastPass error check for the NumRowsInput:

This error says it is missing an aria-label or aria-labelledby.

Also tried adding an aria-label prop here, still returns that same error above and additionally introduces need for "role" semantics

since adding them as props normally seems to just add to a MUI wrapper and not the input element itself I use inputProps

[vyncent-t]

Not sure if "option" is a good idea here either.

I agree, could use some ideas for a more fitting word than 'option'.

Option just seemed to be the a fitting enough catch all word for this select of preset numbers or a custom input (was between using "option" or "choice")

maybe something like

          inputProps={{
            'aria-label': t('translation|{{ value }} number of rows', { value: selectedValue }),
          }}

AFAIU, screen readers already should understand this is part of a select.

An alternative method would be to try to wrap <MenuItem> inside some label and link it via an id= and aria-labelledby.

let me know if that is a good fit

[vyncent-t]

^^^

update: I was able to use the same method of adding an id to the name label that I am using elsewhere for the settings table. This now links and references the name label directly without need for "options" keyword or the like. These changes also pass the check

[joaquimrocha]

Same comment as to why this is needed. Can you double check if MUI is not setting this and we're just missing some param?

[vyncent-t]

For the timezone select component the FastPass error prints as follows:

It does not look like MUI has any aria labels or labelled by here.

I have tried adding just the aira-label prop to <Autocomplete> and <TextField> individually, which still returns the same check error

I have also tried using aria-labelledby="cluster-selector-autocomplete" within <TextField>, since <Autocomplete> wraps it via renderInput prop, this also returns the same check error.

I opted for adding the aria label to the spread within renderInput method as per the docs https://mui.com/material-ui/api/autocomplete/#props

[vyncent-t]

@joaquimrocha

if the changes for NameValueTable are good here I can remove the duplicate work in #3598 and it should be ready for final review

[Copilot]

Pull Request Overview

This PR addresses accessibility issues by adding proper ARIA labels and using MUI Typography components for better screen reader support. The changes are focused on improving the accessibility compliance of various UI components, particularly for form controls and data display elements.

• Update MUI component patterns to use Typography wrapper for better semantic structure
• Add proper ARIA labels to form controls and input elements for screen reader accessibility
• Standardize label presentation across the application with consistent Typography components

[sniok]

/lgtm

[k8s-ci-robot]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: sniok, vyncent-t

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details

Needs approval from an approver in each of these files:

• OWNERS [sniok]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment