fix: [M3-7571] - Missing label for Full Account Access Toggle (#10931)

* fix: [M3-7571] - Missing label for Full Account Access Toggle

* Add changeset

* Update e2e tests

* Update headers based on PR feedback and lighthouse results

packages/manager/.changeset/pr-10931-fixed-1726172174760.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Missing label for Full Account Toggle ([#10931](https://github.com/linode/manager/pull/10931))

packages/manager/cypress/e2e/core/account/user-permissions.spec.ts

@@ -216,7 +216,7 @@ describe('User permission management', () => {
     // Restrict account access, confirm page updates to reflect change.
     mockUpdateUser(mockUser.username, mockUserUpdated);
     mockGetUserGrants(mockUser.username, mockUserGrantsUpdated);
-    cy.findByLabelText('Toggle Full Account Access')
+    cy.get('[data-qa="toggle-full-account-access"]')
       .should('be.visible')
       .click();
 
@@ -250,7 +250,7 @@ describe('User permission management', () => {
     // Re-enable unrestricted account access, confirm page updates to reflect change.
     mockUpdateUser(mockUser.username, mockUser);
     mockGetUserGrantsUnrestrictedAccess(mockUser.username);
-    cy.findByLabelText('Toggle Full Account Access')
+    cy.get('[data-qa="toggle-full-account-access"]')
       .should('be.visible')
       .click();
 

packages/manager/src/features/Users/UserPermissions.styles.ts

@@ -1,5 +1,5 @@
-import Grid from '@mui/material/Unstable_Grid2';
 import { styled } from '@mui/material/styles';
+import Grid from '@mui/material/Unstable_Grid2';
 
 import { CircleProgress } from 'src/components/CircleProgress';
 import Select from 'src/components/EnhancedSelect/Select';
@@ -41,16 +41,17 @@ export const StyledHeaderGrid = styled(Grid, {
   [theme.breakpoints.down('sm')]: {
     marginLeft: theme.spacing(2),
     marginTop: theme.spacing(1),
-    width: '100%',
   },
+  width: '100%',
 }));
 
-export const StyledSubHeaderGrid = styled(Grid, {
-  label: 'StyledSubHeaderGrid',
+export const StyledFullAccountAccessToggleGrid = styled(Grid, {
+  label: 'StyledFullAccountAccessToggleGrid',
 })(({ theme }) => ({
+  marginTop: theme.spacing(2),
+  padding: 0,
   [theme.breakpoints.down('sm')]: {
-    margin: theme.spacing(0.5),
-    padding: 0,
+    paddingLeft: theme.spacing(2),
   },
 }));
 
@@ -68,7 +69,6 @@ export const StyledPaper = styled(Paper, {
   label: 'StyledPaper',
 })(({ theme }) => ({
   paddingBottom: 0,
-  paddingTop: 0,
   [theme.breakpoints.down('sm')]: {
     padding: 0,
   },

packages/manager/src/features/Users/UserPermissions.tsx

@@ -35,11 +35,11 @@ import { scrollErrorIntoViewV2 } from 'src/utilities/scrollErrorIntoViewV2';
 import {
   StyledCircleProgress,
   StyledDivWrapper,
+  StyledFullAccountAccessToggleGrid,
   StyledHeaderGrid,
   StyledPaper,
   StyledPermPaper,
   StyledSelect,
-  StyledSubHeaderGrid,
   StyledUnrestrictedGrid,
 } from './UserPermissions.styles';
 import { UserPermissionsEntitySection } from './UserPermissionsEntitySection';
@@ -424,27 +424,37 @@ class UserPermissions extends React.Component<CombinedProps, State> {
                 {isProxyUser ? PARENT_USER : 'General'} Permissions
               </Typography>
             </StyledHeaderGrid>
-            <StyledSubHeaderGrid>
-              <Toggle
-                tooltipText={
-                  currentUsername === accountUsername
-                    ? 'You cannot restrict the current active user.'
-                    : ''
+            <StyledFullAccountAccessToggleGrid>
+              <FormControlLabel
+                control={
+                  <Toggle
+                    inputProps={{
+                      'aria-label': 'Toggle Full Account Access',
+                    }}
+                    tooltipText={
+                      currentUsername === accountUsername
+                        ? 'You cannot restrict the current active user.'
+                        : ''
+                    }
+                    checked={!restricted}
+                    disabled={currentUsername === accountUsername}
+                    onChange={this.onChangeRestricted}
+                  />
                 }
-                aria-label="Toggle Full Account Access"
-                checked={!restricted}
-                disabled={currentUsername === accountUsername}
-                onChange={this.onChangeRestricted}
+                slotProps={{
+                  typography: {
+                    sx: (theme) => ({
+                      fontFamily: theme.font.bold,
+                      fontSize: '16px',
+                    }),
+                  },
+                }}
+                data-qa="toggle-full-account-access"
+                label="Full Account Access"
+                labelPlacement="end"
+                value={restricted}
               />
-            </StyledSubHeaderGrid>
-            <Grid sx={{ padding: 0 }}>
-              <Typography
-                sx={{ fontFamily: (theme) => theme.font.bold }}
-                variant="subtitle2"
-              >
-                Full Account Access
-              </Typography>
-            </Grid>
+            </StyledFullAccountAccessToggleGrid>
           </Grid>
         </StyledPaper>
         {restricted ? this.renderPermissions() : this.renderUnrestricted()}
@@ -505,7 +515,7 @@ class UserPermissions extends React.Component<CombinedProps, State> {
       <StyledPermPaper data-qa-global-section>
         <Typography
           data-qa-permissions-header="Global Permissions"
-          variant="subtitle2"
+          variant="body2"
         >
           Configure the specific rights and privileges this user has within the
           account.{<br />}Remember that permissions related to actions with the
@@ -585,7 +595,6 @@ class UserPermissions extends React.Component<CombinedProps, State> {
               Specific Permissions
             </Typography>
           </Grid>
-
           <Grid style={{ marginTop: 5 }}>
             <StyledSelect
               defaultValue={defaultPerm}