New release soon: Transforming reports into a war-room for both community topics and bug reports

Back to reports

Title

Status

Open

RevenueCathttps://revenuecat.com

Category

New

url

https://

Description

Clicking on the text to enable the 2FA doesn't check the box.
According to MUI docs Label can be specified and would garantee accessibility
https://mui.com/material-ui/react-checkbox/#label

Suggestions

Use label prop

// The possible fix

<FormControlLabel required control={<Checkbox />} label="Require two-factor authentication for your team" />

// The mark up that's at fault:

<div class="MuiBox-root css-3oyuz1"><div class="MuiBox-root css-5yrjlf"><span class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium css-bwx5f8" style="cursor: pointer;"><input class="PrivateSwitchBase-input css-j8yymo" type="checkbox" data-indeterminate="false"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 4C0 1.79086 1.79086 0 4 0H12C14.2091 0 16 1.79086 16 4V12C16 14.2091 14.2091 16 12 16H4C1.79086 16 0 14.2091 0 12V4Z" fill="white"></path><rect x="0.5" y="0.5" width="15" height="15" rx="3.5" fill="#ffffff" stroke="rgba(118, 118, 118, 1)"></rect></svg></span></div><div class="MuiBox-root css-jk8eup"><p class="MuiTypography-root MuiTypography-body1 css-ye291o">Require two-factor authentication for your team</p><p class="MuiTypography-root MuiTypography-body1 css-asqg5f">All existing collaborators need to have two-factor authentication enabled before you can enforce this setting. Only Owners or Administrations with two-factor enabled can turn this setting on or off.</p></div></div>

Language

All comments (0)