fix: [M3-7574] - Fix missing labels for User Permission radio buttons

[carrillo-erik]

Description 📝

This PR fixes the problem in which the "None", "Read-Only", and "Read-Write" radio buttons under the "Specific Permissions" of the User Permissions page do not have any label or ARIA label, making it difficult to interact with the page using screen readers.

Changes 🔄

List any change relevant to the reviewer.

• Replaces native <label /> element with MUI equivalent components.
• Changes the content used by screen readers to express information to the user.
• Changes the label positioning of the radio buttons in accordance with Advisory Technique G162 of the WCAG 2.1 standards.

Target release date 🗓️

09/11/2024

Preview 📷

Before	After

How to test 🧪

Prerequisites

(How to setup test environment)

• Visit the User Permissions landing page and activate the VoiceOver Utility (⌘ + F5) on your MAC computer.

Verification steps

(How to verify changes)

• Use your keyboard to navigate to the Specific Permissions panel and to select different permissions for different entities.
• Pay attention to the audio output of the VoiceOver utility and/or inspect the text transcript to verify the expected output.
• Verify that all Permission-related functionality works as expected.
• Verify that there are no unexpected visual regressions.

As an Author I have considered 🤔

Check all that apply

• 👀 Doing a self review
• ❔ Our contribution guidelines
• 🤏 Splitting feature into small PRs
• ➕ Adding a changeset
• 🧪 Providing/Improving test coverage
• 🔐 Removing all sensitive information from the code and PR description
• 🚩 Using a feature flag to protect the release
• 👣 Providing comprehensive reproduction steps
• 📑 Providing or updating our documentation
• 🕛 Scheduling a pair reviewing session
• 📱 Providing mobile support
• ♿ Providing accessibility support

[github-actions]

Coverage Report: ✅
Base Coverage: 86.64%
Current Coverage: 86.64%

[bnussman-akamai]

Nice! Looks good

[bnussman-akamai]

Rather than using the span.MuiFormControlLabel-label selector on the TableRow, we could apply the bold style here.

Honestly not sure which is better. Sometimes I'm hesitant with using MUI classnames because they could change in future MUI releases and cause the UI to break

Suggested change

	label="None"
	slotProps={{
	typography: {
	sx: (theme) => ({ fontFamily: theme.font.bold }),
	},
	}}
	label="None"

[coliu-akamai]

awesome thanks Erik! 🎉

don't forget the changeset!