A11y/UserAdminPage: Improves tab navigation and focus management (#41321)

packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx

@@ -21,6 +21,8 @@ export interface Props extends Themeable {
   confirmVariant?: ButtonVariant;
   /** Hide confirm actions when after of them is clicked */
   closeOnConfirm?: boolean;
+  /** Move focus to button when mounted */
+  autoFocus?: boolean;
 
   /** Optional on click handler for the original button */
   onClick?(): void;
@@ -33,6 +35,8 @@ interface State {
 }
 
 class UnThemedConfirmButton extends PureComponent<Props, State> {
+  mainButtonRef = React.createRef<HTMLButtonElement>();
+  confirmButtonRef = React.createRef<HTMLButtonElement>();
   state: State = {
     showConfirm: false,
   };
@@ -42,9 +46,16 @@ class UnThemedConfirmButton extends PureComponent<Props, State> {
       event.preventDefault();
     }
 
-    this.setState({
+    this.setState(
+      {
         showConfirm: true,
-    });
+      },
+      () => {
+        if (this.props.autoFocus && this.confirmButtonRef.current) {
+          this.confirmButtonRef.current.focus();
+        }
+      }
+    );
 
     if (this.props.onClick) {
       this.props.onClick();
@@ -55,9 +66,14 @@ class UnThemedConfirmButton extends PureComponent<Props, State> {
     if (event) {
       event.preventDefault();
     }
-    this.setState({
+    this.setState(
+      {
         showConfirm: false,
-    });
+      },
+      () => {
+        this.mainButtonRef.current?.focus();
+      }
+    );
     if (this.props.onCancel) {
       this.props.onCancel();
     }
@@ -101,7 +117,7 @@ class UnThemedConfirmButton extends PureComponent<Props, State> {
       <span className={styles.buttonContainer}>
         {typeof children === 'string' ? (
           <span className={buttonClass}>
-            <Button size={size} fill="text" onClick={onClick}>
+            <Button size={size} fill="text" onClick={onClick} ref={this.mainButtonRef}>
               {children}
             </Button>
           </span>
@@ -111,12 +127,12 @@ class UnThemedConfirmButton extends PureComponent<Props, State> {
           </span>
         )}
         <span className={confirmButtonClass}>
+          <Button size={size} variant={confirmButtonVariant} onClick={this.onConfirm} ref={this.confirmButtonRef}>
+            {confirmText}
+          </Button>
           <Button size={size} fill="text" onClick={this.onClickCancel}>
             Cancel
           </Button>
-          <Button size={size} variant={confirmButtonVariant} onClick={this.onConfirm}>
-            {confirmText}
-          </Button>
         </span>
       </span>
     );
@@ -128,9 +144,9 @@ export const ConfirmButton = withTheme(UnThemedConfirmButton);
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
   return {
     buttonContainer: css`
-      direction: rtl;
       display: flex;
       align-items: center;
+      justify-content: flex-end;
     `,
     buttonDisabled: css`
       text-decoration: none;
@@ -146,14 +162,14 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
     `,
     buttonHide: css`
       opacity: 0;
-      transition: opacity 0.1s ease;
+      transition: opacity 0.1s ease, visibility 0 0.1s;
+      visibility: hidden;
       z-index: 0;
     `,
     confirmButton: css`
       align-items: flex-start;
       background: ${theme.colors.bg1};
       display: flex;
-      overflow: hidden;
       position: absolute;
       pointer-events: none;
     `,
@@ -166,7 +182,8 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
     `,
     confirmButtonHide: css`
       opacity: 0;
-      transition: opacity 0.12s ease-in, transform 0.14s ease-in;
+      visibility: hidden;
+      transition: opacity 0.12s ease-in, transform 0.14s ease-in, visibility 0s 0.12s;
       transform: translateX(100px);
     `,
   };

packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx

@@ -58,8 +58,10 @@ export const ConfirmModal = ({
 
   useEffect(() => {
     // for some reason autoFocus property did no work on this button, but this does
+    if (isOpen) {
       buttonRef.current?.focus();
-  }, []);
+    }
+  }, [isOpen]);
 
   return (
     <Modal className={styles.modal} title={title} icon={icon} isOpen={isOpen} onDismiss={onDismiss}>

packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx

@@ -18,9 +18,12 @@ export interface RadioButtonProps {
   onChange: () => void;
   fullWidth?: boolean;
   'aria-label'?: StringSelector;
+  children?: React.ReactNode;
 }
 
-export const RadioButton: React.FC<RadioButtonProps> = ({
+export const RadioButton = React.forwardRef<HTMLInputElement, RadioButtonProps>(
+  (
+    {
       children,
       active = false,
       disabled = false,
@@ -31,7 +34,9 @@ export const RadioButton: React.FC<RadioButtonProps> = ({
       description,
       fullWidth,
       'aria-label': ariaLabel,
-}) => {
+    },
+    ref
+  ) => {
     const theme = useTheme2();
     const styles = getRadioButtonStyles(theme, size, fullWidth);
 
@@ -46,13 +51,15 @@ export const RadioButton: React.FC<RadioButtonProps> = ({
           checked={active}
           name={name}
           aria-label={ariaLabel}
+          ref={ref}
         />
         <label className={styles.radioLabel} htmlFor={id} title={description}>
           {children}
         </label>
       </>
     );
-};
+  }
+);
 
 RadioButton.displayName = 'RadioButton';
 

packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { css, cx } from '@emotion/css';
 import { uniqueId } from 'lodash';
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
@@ -16,6 +16,7 @@ export interface RadioButtonGroupProps<T> {
   size?: RadioButtonSize;
   fullWidth?: boolean;
   className?: string;
+  autoFocus?: boolean;
 }
 
 export function RadioButtonGroup<T>({
@@ -27,6 +28,7 @@ export function RadioButtonGroup<T>({
   size = 'md',
   className,
   fullWidth = false,
+  autoFocus = false,
 }: RadioButtonGroupProps<T>) {
   const handleOnChange = useCallback(
     (option: SelectableValue) => {
@@ -42,6 +44,13 @@ export function RadioButtonGroup<T>({
   const groupName = useRef(id);
   const styles = useStyles2(getStyles);
 
+  const activeButtonRef = useRef<HTMLInputElement | null>(null);
+  useEffect(() => {
+    if (autoFocus && activeButtonRef.current) {
+      activeButtonRef.current.focus();
+    }
+  }, [autoFocus]);
+
   return (
     <div className={cx(styles.radioGroup, fullWidth && styles.fullWidth, className)}>
       {options.map((o, i) => {
@@ -58,6 +67,7 @@ export function RadioButtonGroup<T>({
             name={groupName.current}
             description={o.description}
             fullWidth={fullWidth}
+            ref={value === o.value ? activeButtonRef : undefined}
           >
             {o.icon && <Icon name={o.icon as IconName} className={styles.icon} />}
             {o.imgUrl && <img src={o.imgUrl} alt={o.label} className={styles.img} />}

public/app/core/components/Select/OrgPicker.tsx

@@ -1,8 +1,9 @@
-import React, { PureComponent } from 'react';
+import React, { useEffect } from 'react';
 import { AsyncSelect } from '@grafana/ui';
 import { getBackendSrv } from 'app/core/services/backend_srv';
 import { Organization } from 'app/types';
 import { SelectableValue } from '@grafana/data';
+import { useAsyncFn } from 'react-use';
 
 export type OrgSelectItem = SelectableValue<Organization>;
 
@@ -10,56 +11,35 @@ export interface Props {
   onSelected: (org: OrgSelectItem) => void;
   className?: string;
   inputId?: string;
+  autoFocus?: boolean;
 }
 
-export interface State {
+export function OrgPicker({ onSelected, className, inputId, autoFocus }: Props) {
-  isLoading: boolean;
+  // For whatever reason the autoFocus prop doesn't seem to work
+  // with AsyncSelect, hence this workaround. Maybe fixed in a later version?
+  useEffect(() => {
+    if (autoFocus && inputId) {
+      document.getElementById(inputId)?.focus();
     }
+  }, [autoFocus, inputId]);
 
-export class OrgPicker extends PureComponent<Props, State> {
+  const [orgOptionsState, getOrgOptions] = useAsyncFn(async () => {
-  orgs: Organization[] = [];
+    const orgs: Organization[] = await getBackendSrv().get('/api/orgs');
-
+    return orgs.map((org) => ({ value: { id: org.id, name: org.name }, label: org.name }));
-  state: State = {
+  });
-    isLoading: false,
-  };
-
-  async loadOrgs() {
-    this.setState({ isLoading: true });
-    const orgs = await getBackendSrv().get('/api/orgs');
-    this.orgs = orgs;
-    this.setState({ isLoading: false });
-    return orgs;
-  }
-
-  getOrgOptions = async (query: string): Promise<OrgSelectItem[]> => {
-    if (!this.orgs?.length) {
-      await this.loadOrgs();
-    }
-    return this.orgs.map(
-      (org: Organization): OrgSelectItem => ({
-        value: { id: org.id, name: org.name },
-        label: org.name,
-      })
-    );
-  };
-
-  render() {
-    const { className, onSelected, inputId } = this.props;
-    const { isLoading } = this.state;
 
   return (
     <AsyncSelect
       menuShouldPortal
       inputId={inputId}
       className={className}
-        isLoading={isLoading}
+      isLoading={orgOptionsState.loading}
       defaultOptions={true}
       isSearchable={false}
-        loadOptions={this.getOrgOptions}
+      loadOptions={getOrgOptions}
       onChange={onSelected}
       placeholder="Select organization"
       noOptionsMessage="No organizations found"
     />
   );
 }
-}

public/app/features/admin/OrgRolePicker.tsx

@@ -8,11 +8,20 @@ interface Props {
   'aria-label'?: string;
   inputId?: string;
   onChange: (role: OrgRole) => void;
+  autoFocus?: boolean;
 }
 
 const options = Object.keys(OrgRole).map((key) => ({ label: key, value: key }));
 
-export const OrgRolePicker: FC<Props> = ({ value, onChange, 'aria-label': ariaLabel, inputId, ...restProps }) => (
+export const OrgRolePicker: FC<Props> = ({
+  value,
+  onChange,
+  'aria-label': ariaLabel,
+  inputId,
+  autoFocus,
+  ...restProps
+}) => {
+  return (
     <Select
       menuShouldPortal
       inputId={inputId}
@@ -21,6 +30,8 @@ export const OrgRolePicker: FC<Props> = ({ value, onChange, 'aria-label': ariaLa
       onChange={(val) => onChange(val.value as OrgRole)}
       placeholder="Choose role..."
       aria-label={ariaLabel}
+      autoFocus={autoFocus}
       {...restProps}
     />
   );
+};

public/app/features/admin/UserOrgs.tsx

@@ -33,12 +33,19 @@ interface State {
 }
 
 export class UserOrgs extends PureComponent<Props, State> {
+  addToOrgButtonRef = React.createRef<HTMLButtonElement>();
   state = {
     showAddOrgModal: false,
   };
 
-  showOrgAddModal = (show: boolean) => () => {
+  showOrgAddModal = () => {
-    this.setState({ showAddOrgModal: show });
+    this.setState({ showAddOrgModal: true });
+  };
+
+  dismissOrgAddModal = () => {
+    this.setState({ showAddOrgModal: false }, () => {
+      this.addToOrgButtonRef.current?.focus();
+    });
   };
 
   render() {
@@ -69,12 +76,12 @@ export class UserOrgs extends PureComponent<Props, State> {
           </div>
           <div className={addToOrgContainerClass}>
             {canAddToOrg && (
-              <Button variant="secondary" onClick={this.showOrgAddModal(true)}>
+              <Button variant="secondary" onClick={this.showOrgAddModal} ref={this.addToOrgButtonRef}>
                 Add user to organization
               </Button>
             )}
           </div>
-          <AddToOrgModal isOpen={showAddOrgModal} onOrgAdd={onOrgAdd} onDismiss={this.showOrgAddModal(false)} />
+          <AddToOrgModal isOpen={showAddOrgModal} onOrgAdd={onOrgAdd} onDismiss={this.dismissOrgAddModal} />
         </div>
       </>
     );
@@ -159,7 +166,7 @@ class UnThemedOrgRow extends PureComponent<OrgRowProps, OrgRowState> {
         </td>
         {isChangingRole ? (
           <td>
-            <OrgRolePicker inputId={inputId} value={currentRole} onChange={this.onOrgRoleChange} />
+            <OrgRolePicker inputId={inputId} value={currentRole} onChange={this.onOrgRoleChange} autoFocus />
           </td>
         ) : (
           <td className="width-25">{org.role}</td>
@@ -184,6 +191,7 @@ class UnThemedOrgRow extends PureComponent<OrgRowProps, OrgRowState> {
                 confirmVariant="destructive"
                 onCancel={this.onCancelClick}
                 onConfirm={this.onOrgRemove}
+                autoFocus
               >
                 Remove from organization
               </ConfirmButton>
@@ -260,7 +268,7 @@ export class AddToOrgModal extends PureComponent<AddToOrgModalProps, AddToOrgMod
         onDismiss={this.onCancel}
       >
         <Field label="Organization">
-          <OrgPicker inputId="new-org-input" onSelected={this.onOrgSelect} />
+          <OrgPicker inputId="new-org-input" onSelected={this.onOrgSelect} autoFocus />
         </Field>
         <Field label="Role">
           <OrgRolePicker inputId="new-org-role-input" value={role} onChange={this.onOrgRoleChange} />

public/app/features/admin/UserPermissions.tsx

@@ -1,6 +1,5 @@
-import React, { PureComponent } from 'react';
+import React, { useState } from 'react';
 import { ConfirmButton, RadioButtonGroup, Icon } from '@grafana/ui';
-import { cx } from '@emotion/css';
 import { AccessControlAction } from 'app/types';
 import { contextSrv } from 'app/core/core';
 
@@ -10,47 +9,24 @@ interface Props {
   onGrafanaAdminChange: (isGrafanaAdmin: boolean) => void;
 }
 
-interface State {
-  isEditing: boolean;
-  currentAdminOption: string;
-}
-
 const adminOptions = [
-  { label: 'Yes', value: 'YES' },
+  { label: 'Yes', value: true },
-  { label: 'No', value: 'NO' },
+  { label: 'No', value: false },
 ];
 
-export class UserPermissions extends PureComponent<Props, State> {
+export function UserPermissions({ isGrafanaAdmin, onGrafanaAdminChange }: Props) {
-  state = {
+  const [isEditing, setIsEditing] = useState(false);
-    isEditing: false,
+  const [currentAdminOption, setCurrentAdminOption] = useState(isGrafanaAdmin);
-    currentAdminOption: this.props.isGrafanaAdmin ? 'YES' : 'NO',
+
+  const onChangeClick = () => setIsEditing(true);
+
+  const onCancelClick = () => {
+    setIsEditing(false);
+    setCurrentAdminOption(isGrafanaAdmin);
   };
 
-  onChangeClick = () => {
+  const handleGrafanaAdminChange = () => onGrafanaAdminChange(currentAdminOption);
-    this.setState({ isEditing: true });
-  };
 
-  onCancelClick = () => {
-    this.setState({
-      isEditing: false,
-      currentAdminOption: this.props.isGrafanaAdmin ? 'YES' : 'NO',
-    });
-  };
-
-  onGrafanaAdminChange = () => {
-    const { currentAdminOption } = this.state;
-    const newIsGrafanaAdmin = currentAdminOption === 'YES' ? true : false;
-    this.props.onGrafanaAdminChange(newIsGrafanaAdmin);
-  };
-
-  onAdminOptionSelect = (value: string) => {
-    this.setState({ currentAdminOption: value });
-  };
-
-  render() {
-    const { isGrafanaAdmin } = this.props;
-    const { isEditing, currentAdminOption } = this.state;
-    const changeButtonContainerClass = cx('pull-right');
   const canChangePermissions = contextSrv.hasPermission(AccessControlAction.UsersPermissionsUpdate);
 
   return (
@@ -67,7 +43,8 @@ export class UserPermissions extends PureComponent<Props, State> {
                     <RadioButtonGroup
                       options={adminOptions}
                       value={currentAdminOption}
-                        onChange={this.onAdminOptionSelect}
+                      onChange={setCurrentAdminOption}
+                      autoFocus
                     />
                   </td>
                 ) : (
@@ -82,19 +59,16 @@ export class UserPermissions extends PureComponent<Props, State> {
                   </td>
                 )}
                 <td>
-                    <div className={changeButtonContainerClass}>
                   {canChangePermissions && (
                     <ConfirmButton
-                          className="pull-right"
+                      onClick={onChangeClick}
-                          onClick={this.onChangeClick}
+                      onConfirm={handleGrafanaAdminChange}
-                          onConfirm={this.onGrafanaAdminChange}
+                      onCancel={onCancelClick}
-                          onCancel={this.onCancelClick}
                       confirmText="Change"
                     >
                       Change
                     </ConfirmButton>
                   )}
-                    </div>
                 </td>
               </tr>
             </tbody>
@@ -104,4 +78,3 @@ export class UserPermissions extends PureComponent<Props, State> {
     </>
   );
 }
-}

public/app/features/admin/UserProfile.tsx

@@ -1,4 +1,4 @@
-import React, { FC, PureComponent } from 'react';
+import React, { FC, PureComponent, useRef, useState } from 'react';
 import { AccessControlAction, UserDTO } from 'app/types';
 import { css, cx } from '@emotion/css';
 import { config } from 'app/core/config';
@@ -16,73 +16,60 @@ interface Props {
   onPasswordChange(password: string): void;
 }
 
-interface State {
+export function UserProfile({
-  isLoading: boolean;
+  user,
-  showDeleteModal: boolean;
+  onUserUpdate,
-  showDisableModal: boolean;
+  onUserDelete,
+  onUserDisable,
+  onUserEnable,
+  onPasswordChange,
+}: Props) {
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [showDisableModal, setShowDisableModal] = useState(false);
+
+  const deleteUserRef = useRef<HTMLButtonElement | null>(null);
+  const showDeleteUserModal = (show: boolean) => () => {
+    setShowDeleteModal(show);
+    if (!show && deleteUserRef.current) {
+      deleteUserRef.current.focus();
     }
-
-export class UserProfile extends PureComponent<Props, State> {
-  state = {
-    isLoading: false,
-    showDeleteModal: false,
-    showDisableModal: false,
   };
 
-  showDeleteUserModal = (show: boolean) => () => {
+  const disableUserRef = useRef<HTMLButtonElement | null>(null);
-    this.setState({ showDeleteModal: show });
+  const showDisableUserModal = (show: boolean) => () => {
+    setShowDisableModal(show);
+    if (!show && disableUserRef.current) {
+      disableUserRef.current.focus();
+    }
   };
 
-  showDisableUserModal = (show: boolean) => () => {
+  const handleUserDelete = () => onUserDelete(user.id);
-    this.setState({ showDisableModal: show });
-  };
 
-  onUserDelete = () => {
+  const handleUserDisable = () => onUserDisable(user.id);
-    const { user, onUserDelete } = this.props;
-    onUserDelete(user.id);
-  };
 
-  onUserDisable = () => {
+  const handleUserEnable = () => onUserEnable(user.id);
-    const { user, onUserDisable } = this.props;
-    onUserDisable(user.id);
-  };
 
-  onUserEnable = () => {
+  const onUserNameChange = (newValue: string) => {
-    const { user, onUserEnable } = this.props;
-    onUserEnable(user.id);
-  };
-
-  onUserNameChange = (newValue: string) => {
-    const { user, onUserUpdate } = this.props;
     onUserUpdate({
       ...user,
       name: newValue,
     });
   };
 
-  onUserEmailChange = (newValue: string) => {
+  const onUserEmailChange = (newValue: string) => {
-    const { user, onUserUpdate } = this.props;
     onUserUpdate({
       ...user,
       email: newValue,
     });
   };
 
-  onUserLoginChange = (newValue: string) => {
+  const onUserLoginChange = (newValue: string) => {
-    const { user, onUserUpdate } = this.props;
     onUserUpdate({
       ...user,
       login: newValue,
     });
   };
 
-  onPasswordChange = (newValue: string) => {
-    this.props.onPasswordChange(newValue);
-  };
-
-  render() {
-    const { user } = this.props;
-    const { showDeleteModal, showDisableModal } = this.state;
   const authSource = user.authLabels?.length && user.authLabels[0];
   const lockMessage = authSource ? `Synced via ${authSource}` : '';
   const styles = getStyles(config.theme);
@@ -105,21 +92,21 @@ export class UserProfile extends PureComponent<Props, State> {
                 value={user.name}
                 locked={editLocked}
                 lockMessage={lockMessage}
-                  onChange={this.onUserNameChange}
+                onChange={onUserNameChange}
               />
               <UserProfileRow
                 label="Email"
                 value={user.email}
                 locked={editLocked}
                 lockMessage={lockMessage}
-                  onChange={this.onUserEmailChange}
+                onChange={onUserEmailChange}
               />
               <UserProfileRow
                 label="Username"
                 value={user.login}
                 locked={editLocked}
                 lockMessage={lockMessage}
-                  onChange={this.onUserLoginChange}
+                onChange={onUserLoginChange}
               />
               <UserProfileRow
                 label="Password"
@@ -127,7 +114,7 @@ export class UserProfile extends PureComponent<Props, State> {
                 inputType="password"
                 locked={passwordChangeLocked}
                 lockMessage={lockMessage}
-                  onChange={this.onPasswordChange}
+                onChange={onPasswordChange}
               />
             </tbody>
           </table>
@@ -135,7 +122,7 @@ export class UserProfile extends PureComponent<Props, State> {
         <div className={styles.buttonRow}>
           {canDelete && (
             <>
-                <Button variant="destructive" onClick={this.showDeleteUserModal(true)}>
+              <Button variant="destructive" onClick={showDeleteUserModal(true)} ref={deleteUserRef}>
                 Delete user
               </Button>
               <ConfirmModal
@@ -143,19 +130,19 @@ export class UserProfile extends PureComponent<Props, State> {
                 title="Delete user"
                 body="Are you sure you want to delete this user?"
                 confirmText="Delete user"
-                  onConfirm={this.onUserDelete}
+                onConfirm={handleUserDelete}
-                  onDismiss={this.showDeleteUserModal(false)}
+                onDismiss={showDeleteUserModal(false)}
               />
             </>
           )}
           {user.isDisabled && canEnable && (
-              <Button variant="secondary" onClick={this.onUserEnable}>
+            <Button variant="secondary" onClick={handleUserEnable}>
               Enable user
             </Button>
           )}
           {!user.isDisabled && canDisable && (
             <>
-                <Button variant="secondary" onClick={this.showDisableUserModal(true)}>
+              <Button variant="secondary" onClick={showDisableUserModal(true)} ref={disableUserRef}>
                 Disable user
               </Button>
               <ConfirmModal
@@ -163,8 +150,8 @@ export class UserProfile extends PureComponent<Props, State> {
                 title="Disable user"
                 body="Are you sure you want to disable this user?"
                 confirmText="Disable user"
-                  onConfirm={this.onUserDisable}
+                onConfirm={handleUserDisable}
-                  onDismiss={this.showDisableUserModal(false)}
+                onDismiss={showDisableUserModal(false)}
               />
             </>
           )}
@@ -173,7 +160,6 @@ export class UserProfile extends PureComponent<Props, State> {
     </>
   );
 }
-}
 
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
   return {
@@ -269,7 +255,6 @@ export class UserProfileRow extends PureComponent<UserProfileRowProps, UserProfi
         font-weight: 500;
       `
     );
-    const editButtonContainerClass = cx('pull-right');
 
     if (locked) {
       return <LockedRow label={label} value={value} lockMessage={lockMessage} />;
@@ -297,7 +282,6 @@ export class UserProfileRow extends PureComponent<UserProfileRowProps, UserProfi
           )}
         </td>
         <td>
-          <div className={editButtonContainerClass}>
           <ConfirmButton
             confirmText="Save"
             onClick={this.onEditClick}
@@ -306,7 +290,6 @@ export class UserProfileRow extends PureComponent<UserProfileRowProps, UserProfi
           >
             Edit
           </ConfirmButton>
-          </div>
         </td>
       </tr>
     );
@@ -320,13 +303,10 @@ interface LockedRowProps {
 }
 
 export const LockedRow: FC<LockedRowProps> = ({ label, value, lockMessage }) => {
-  const lockMessageClass = cx(
+  const lockMessageClass = css`
-    'pull-right',
-    css`
     font-style: italic;
     margin-right: 0.6rem;
-    `
+  `;
-  );
   const labelClass = cx(
     'width-16',
     css`

public/app/features/admin/UserSessions.tsx

@@ -16,12 +16,19 @@ interface State {
 }
 
 export class UserSessions extends PureComponent<Props, State> {
+  forceAllLogoutButton = React.createRef<HTMLButtonElement>();
   state: State = {
     showLogoutModal: false,
   };
 
-  showLogoutConfirmationModal = (show: boolean) => () => {
+  showLogoutConfirmationModal = () => {
-    this.setState({ showLogoutModal: show });
+    this.setState({ showLogoutModal: true });
+  };
+
+  dismissLogoutConfirmationModal = () => {
+    this.setState({ showLogoutModal: false }, () => {
+      this.forceAllLogoutButton.current?.focus();
+    });
   };
 
   onSessionRevoke = (id: number) => {
@@ -74,6 +81,7 @@ export class UserSessions extends PureComponent<Props, State> {
                               confirmText="Confirm logout"
                               confirmVariant="destructive"
                               onConfirm={this.onSessionRevoke(session.id)}
+                              autoFocus
                             >
                               Force logout
                             </ConfirmButton>
@@ -87,7 +95,7 @@ export class UserSessions extends PureComponent<Props, State> {
           </div>
           <div className={logoutFromAllDevicesClass}>
             {canLogout && sessions.length > 0 && (
-              <Button variant="secondary" onClick={this.showLogoutConfirmationModal(true)}>
+              <Button variant="secondary" onClick={this.showLogoutConfirmationModal} ref={this.forceAllLogoutButton}>
                 Force logout from all devices
               </Button>
             )}
@@ -97,7 +105,7 @@ export class UserSessions extends PureComponent<Props, State> {
               body="Are you sure you want to force logout from all devices?"
               confirmText="Force logout"
               onConfirm={this.onAllSessionsRevoke}
-              onDismiss={this.showLogoutConfirmationModal(false)}
+              onDismiss={this.dismissLogoutConfirmationModal}
             />
           </div>
         </div>

public/app/features/api-keys/ApiKeysPage.test.tsx

@@ -75,9 +75,9 @@ describe('ApiKeysPage', () => {
       setup({ apiKeys, apiKeysCount: apiKeys.length, hasFetched: true });
       expect(screen.getByRole('table')).toBeInTheDocument();
       expect(screen.getAllByRole('row').length).toBe(4);
-      expect(screen.getByRole('row', { name: /first admin 2021-01-01 00:00:00 cancel delete/i })).toBeInTheDocument();
+      expect(screen.getByRole('row', { name: /first admin 2021-01-01 00:00:00/i })).toBeInTheDocument();
-      expect(screen.getByRole('row', { name: /second editor 2021-01-02 00:00:00 cancel delete/i })).toBeInTheDocument();
+      expect(screen.getByRole('row', { name: /second editor 2021-01-02 00:00:00/i })).toBeInTheDocument();
-      expect(screen.getByRole('row', { name: /third viewer no expiration date cancel delete/i })).toBeInTheDocument();
+      expect(screen.getByRole('row', { name: /third viewer no expiration date/i })).toBeInTheDocument();
     });
   });
 
@@ -118,27 +118,24 @@ describe('ApiKeysPage', () => {
         { id: 3, name: 'Third', role: OrgRole.Viewer, secondsToLive: 0, expiration: undefined },
       ];
       const { deleteApiKeyMock } = setup({ apiKeys, apiKeysCount: apiKeys.length, hasFetched: true });
-      const firstRow = screen.getByRole('row', { name: /first admin 2021-01-01 00:00:00 cancel delete/i });
+      const firstRow = screen.getByRole('row', { name: /first admin 2021-01-01 00:00:00/i });
-      const secondRow = screen.getByRole('row', { name: /second editor 2021-01-02 00:00:00 cancel delete/i });
+      const secondRow = screen.getByRole('row', { name: /second editor 2021-01-02 00:00:00/i });
 
       deleteApiKeyMock.mockClear();
-      expect(within(firstRow).getByRole('cell', { name: /cancel delete/i })).toBeInTheDocument();
+      expect(within(firstRow).getByLabelText('Delete API key')).toBeInTheDocument();
-      userEvent.click(within(firstRow).getByRole('cell', { name: /cancel delete/i }));
+      userEvent.click(within(firstRow).getByLabelText('Delete API key'));
+
       expect(within(firstRow).getByRole('button', { name: /delete$/i })).toBeInTheDocument();
-      // TODO remove skipPointerEventsCheck once https://github.com/jsdom/jsdom/issues/3232 is fixed
+      userEvent.click(within(firstRow).getByRole('button', { name: /delete$/i }));
-      userEvent.click(within(firstRow).getByRole('button', { name: /delete$/i }), undefined, {
-        skipPointerEventsCheck: true,
-      });
       expect(deleteApiKeyMock).toHaveBeenCalledTimes(1);
       expect(deleteApiKeyMock).toHaveBeenCalledWith(1, false);
 
       toggleShowExpired();
 
       deleteApiKeyMock.mockClear();
-      expect(within(secondRow).getByRole('cell', { name: /cancel delete/i })).toBeInTheDocument();
+      expect(within(secondRow).getByLabelText('Delete API key')).toBeInTheDocument();
-      userEvent.click(within(secondRow).getByRole('cell', { name: /cancel delete/i }));
+      userEvent.click(within(secondRow).getByLabelText('Delete API key'));
       expect(within(secondRow).getByRole('button', { name: /delete$/i })).toBeInTheDocument();
-      // TODO remove skipPointerEventsCheck once https://github.com/jsdom/jsdom/issues/3232 is fixed
       userEvent.click(within(secondRow).getByRole('button', { name: /delete$/i }), undefined, {
         skipPointerEventsCheck: true,
       });

public/app/features/dashboard/components/DashboardSettings/AnnotationsSettings.test.tsx

@@ -116,9 +116,7 @@ describe('AnnotationsSettings', () => {
 
     expect(screen.getByRole('heading', { name: /annotations/i })).toBeInTheDocument();
     expect(screen.queryByRole('table')).toBeInTheDocument();
-    expect(
+    expect(screen.getByRole('row', { name: /annotations & alerts \(built\-in\) grafana/i })).toBeInTheDocument();
-      screen.getByRole('row', { name: /annotations & alerts \(built\-in\) grafana cancel delete/i })
-    ).toBeInTheDocument();
     expect(
       screen.queryByLabelText(selectors.components.CallToActionCard.button('Add annotation query'))
     ).toBeInTheDocument();
@@ -142,14 +140,14 @@ describe('AnnotationsSettings', () => {
     userEvent.click(within(heading).getByText(/annotations/i));
 
     expect(screen.getByRole('table')).toBeInTheDocument();
-    expect(screen.getByRole('row', { name: /my annotation \(built\-in\) grafana cancel delete/i })).toBeInTheDocument();
+    expect(screen.getByRole('row', { name: /my annotation \(built\-in\) grafana/i })).toBeInTheDocument();
     expect(
       screen.queryByLabelText(selectors.components.CallToActionCard.button('Add annotation query'))
     ).toBeInTheDocument();
     expect(screen.queryByRole('button', { name: /new query/i })).not.toBeInTheDocument();
 
-    // TODO remove skipPointerEventsCheck once https://github.com/jsdom/jsdom/issues/3232 is fixed
+    userEvent.click(screen.getAllByLabelText(/Delete query with title/)[0]);
-    userEvent.click(screen.getByRole('button', { name: /^delete$/i }), undefined, { skipPointerEventsCheck: true });
+    userEvent.click(screen.getByRole('button', { name: 'Delete' }));
 
     expect(screen.queryAllByRole('row').length).toBe(0);
     expect(
@@ -238,9 +236,7 @@ describe('AnnotationsSettings', () => {
     userEvent.click(within(heading).getByText(/annotations/i));
 
     expect(within(screen.getAllByRole('rowgroup')[1]).getAllByRole('row').length).toBe(2);
-    expect(
+    expect(screen.queryByRole('row', { name: /my prometheus annotation prometheus/i })).toBeInTheDocument();
-      screen.queryByRole('row', { name: /my prometheus annotation prometheus cancel delete/i })
-    ).toBeInTheDocument();
     expect(screen.queryByRole('button', { name: /new query/i })).toBeInTheDocument();
     expect(
       screen.queryByLabelText(selectors.components.CallToActionCard.button('Add annotation query'))
@@ -252,8 +248,8 @@ describe('AnnotationsSettings', () => {
 
     expect(within(screen.getAllByRole('rowgroup')[1]).getAllByRole('row').length).toBe(3);
 
-    // TODO remove skipPointerEventsCheck once https://github.com/jsdom/jsdom/issues/3232 is fixed
+    userEvent.click(screen.getAllByLabelText(/Delete query with title/)[0]);
-    userEvent.click(screen.getAllByRole('button', { name: /delete/i })[1], undefined, { skipPointerEventsCheck: true });
+    userEvent.click(screen.getByRole('button', { name: 'Delete' }));
 
     expect(within(screen.getAllByRole('rowgroup')[1]).getAllByRole('row').length).toBe(2);
   });

public/app/features/dashboard/components/DashboardSettings/LinksSettings.test.tsx

@@ -131,10 +131,8 @@ describe('LinksSettings', () => {
 
     expect(getTableBodyRows().length).toBe(links.length);
 
-    // TODO remove skipPointerEventsCheck once https://github.com/jsdom/jsdom/issues/3232 is fixed
+    userEvent.click(within(getTableBody()).getAllByLabelText(/Delete link with title/)[0]);
-    userEvent.click(within(getTableBody()).getAllByRole('button', { name: 'Delete' })[0], undefined, {
+    userEvent.click(within(getTableBody()).getByRole('button', { name: 'Delete' }));
-      skipPointerEventsCheck: true,
-    });
 
     expect(getTableBodyRows().length).toBe(links.length - 1);
     expect(within(getTableBody()).queryByText(links[0].title)).not.toBeInTheDocument();