refactor: make help tooltip icons focusable (#905)

* refactor: restore rollout slider focus state

* refactor: fix disconnected form field labels

* refactor: make help tooltip icons focusable

frontend/src/component/common/HelpIcon/HelpIcon.styles.ts

@@ -0,0 +1,22 @@
+import { makeStyles } from '@material-ui/core/styles';
+
+export const useStyles = makeStyles(theme => ({
+    container: {
+        display: 'inline-grid',
+        alignItems: 'center',
+        outline: 0,
+
+        '&:is(:focus-visible, :active) > *, &:hover > *': {
+            outlineStyle: 'solid',
+            outlineWidth: 2,
+            outlineOffset: 0,
+            outlineColor: theme.palette.primary.main,
+            borderRadius: '100%',
+            color: theme.palette.primary.main,
+        },
+    },
+    icon: {
+        fontSize: '1rem',
+        color: theme.palette.grey[600],
+    },
+}));

frontend/src/component/common/HelpIcon/HelpIcon.tsx

@@ -0,0 +1,27 @@
+import { Tooltip } from '@material-ui/core';
+import { Info } from '@material-ui/icons';
+import { useStyles } from 'component/common/HelpIcon/HelpIcon.styles';
+import React from 'react';
+
+interface IHelpIconProps {
+    tooltip: string;
+    style?: React.CSSProperties;
+}
+
+export const HelpIcon = ({ tooltip, style }: IHelpIconProps) => {
+    const styles = useStyles();
+
+    return (
+        <Tooltip title={tooltip} arrow>
+            <span
+                className={styles.container}
+                style={style}
+                tabIndex={0}
+                role="tooltip"
+                aria-label="Help"
+            >
+                <Info className={styles.icon} />
+            </span>
+        </Tooltip>
+    );
+};

frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.styles.ts

@@ -16,7 +16,12 @@ export const useStyles = makeStyles(theme => ({
     weightInput: {
         marginRight: '0.8rem',
     },
-    label: { marginBottom: '1rem' },
+    label: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '1ch',
+        marginBottom: '1rem',
+    },
     info: {
         width: '18.5px',
         height: '18.5px',

frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.tsx

@@ -5,9 +5,7 @@ import {
     FormControlLabel,
     Grid,
     InputAdornment,
-    Tooltip,
 } from '@material-ui/core';
-import { Info } from '@material-ui/icons';
 import { weightTypes } from './enums';
 import { OverrideConfig } from './OverrideConfig/OverrideConfig';
 import ConditionallyRender from 'component/common/ConditionallyRender';
@@ -26,6 +24,7 @@ import { useStyles } from './AddFeatureVariant.styles';
 import Input from 'component/common/Input/Input';
 import { formatUnknownError } from 'utils/formatUnknownError';
 import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext';
+import { HelpIcon } from 'component/common/HelpIcon/HelpIcon';
 
 const payloadOptions = [
     { key: 'string', label: 'string' },
@@ -268,6 +267,7 @@ export const AddVariant = ({
                     label="Variant name"
                     autoFocus
                     name="name"
+                    id="variant-name"
                     className={styles.input}
                     errorText={error.name}
                     value={data.name || ''}
@@ -317,7 +317,7 @@ export const AddVariant = ({
                             <Grid item md={4}>
                                 <Input
                                     id="weight"
-                                    label="Weight"
+                                    label="Variant weight"
                                     name="weight"
                                     data-testid={'VARIANT_WEIGHT_INPUT'}
                                     InputProps={{
@@ -345,12 +345,7 @@ export const AddVariant = ({
                 </Grid>
                 <p className={styles.label}>
                     <strong>Payload </strong>
-                    <Tooltip
+                    <HelpIcon tooltip="Passed along with the the variant object." />
-                        title="Passed to the variant object. Can be anything
-                        (json, value, csv)"
-                    >
-                        <Info className={styles.info} />
-                    </Tooltip>
                 </p>
                 <Grid container>
                     <Grid item md={2} sm={2} xs={4}>
@@ -368,7 +363,9 @@ export const AddVariant = ({
                         <Input
                             error={Boolean(error.payload)}
                             errorText={error.payload}
-                            name="value"
+                            name="variant-payload-value"
+                            id="variant-payload-value"
+                            label="Value"
                             className={commonStyles.fullWidth}
                             value={payload.value}
                             onChange={e => onPayload('value')(e.target.value)}
@@ -376,9 +373,8 @@ export const AddVariant = ({
                             placeholder={
                                 payload.type === 'json'
                                     ? '{ "hello": "world" }'
-                                    : 'value'
+                                    : ''
                             }
-                            label="value"
                         />
                     </Grid>
                 </Grid>
@@ -387,9 +383,7 @@ export const AddVariant = ({
                     show={
                         <p className={styles.label}>
                             <strong>Overrides </strong>
-                            <Tooltip title="Here you can specify which users should get this variant.">
+                            <HelpIcon tooltip="Here you can specify which users should get this variant." />
-                                <Info className={styles.info} />
-                            </Tooltip>
                         </p>
                     }
                 />

frontend/src/component/feature/StrategyTypes/FlexibleStrategy/FlexibleStrategy.tsx

@@ -1,6 +1,4 @@
-import { Tooltip, Typography } from '@material-ui/core';
+import { Typography } from '@material-ui/core';
-import { Info } from '@material-ui/icons';
-
 import { IParameter } from 'interfaces/strategy';
 import RolloutSlider from '../RolloutSlider/RolloutSlider';
 import Select from 'component/common/select';
@@ -10,6 +8,7 @@ import {
     FLEXIBLE_STRATEGY_GROUP_ID,
     FLEXIBLE_STRATEGY_STICKINESS_ID,
 } from 'utils/testIds';
+import { HelpIcon } from 'component/common/HelpIcon/HelpIcon';
 
 const builtInStickinessOptions = [
     { key: 'default', label: 'default' },
@@ -81,22 +80,14 @@ const FlexibleStrategy = ({
                 <Typography
                     variant="subtitle2"
                     style={{
-                        marginBottom: '0.5rem',
+                        marginBottom: '1rem',
                         display: 'flex',
-                        alignItems: 'center',
+                        gap: '1ch',
                     }}
                     component="h2"
                 >
                     Stickiness
-                    <Tooltip title="Stickiness defines what parameter should be used to ensure that your users get consistency in features. By default unleash will use the first value present in the context in the order of userId, sessionId and random.">
+                    <HelpIcon tooltip="Stickiness defines what parameter should be used to ensure that your users get consistency in features. By default unleash will use the first value present in the context in the order of userId, sessionId and random." />
-                        <Info
-                            style={{
-                                fontSize: '1rem',
-                                color: 'gray',
-                                marginLeft: '0.2rem',
-                            }}
-                        />
-                    </Tooltip>
                 </Typography>
                 <Select
                     id="stickiness-select"
@@ -116,22 +107,14 @@ const FlexibleStrategy = ({
                 <Typography
                     variant="subtitle2"
                     style={{
-                        marginBottom: '0.5rem',
+                        marginBottom: '1rem',
                         display: 'flex',
-                        alignItems: 'center',
+                        gap: '1ch',
                     }}
                     component="h2"
                 >
                     GroupId
-                    <Tooltip title="GroupId is used to ensure that different toggles will hash differently for the same user. The groupId defaults to feature toggle name, but you can override it to correlate rollout of multiple feature toggles.">
+                    <HelpIcon tooltip="GroupId is used to ensure that different toggles will hash differently for the same user. The groupId defaults to feature toggle name, but you can override it to correlate rollout of multiple feature toggles." />
-                        <Info
-                            style={{
-                                fontSize: '1rem',
-                                color: 'gray',
-                                marginLeft: '0.2rem',
-                            }}
-                        />
-                    </Tooltip>
                 </Typography>
                 <Input
                     label="groupId"

frontend/src/component/feature/StrategyTypes/RolloutSlider/RolloutSlider.tsx

@@ -14,9 +14,6 @@ const StyledSlider = withStyles({
         border: '2px solid currentColor',
         marginTop: -8,
         marginLeft: -12,
-        '&:focus, &:hover, &$active': {
-            boxShadow: 'inherit',
-        },
     },
     active: {},
     valueLabel: {

frontend/src/component/user/common/ResetPasswordForm/PasswordChecker/PasswordChecker.styles.ts

@@ -35,13 +35,11 @@ export const useStyles = makeStyles(theme => ({
         marginBottom: '0',
         display: 'flex',
         alignItems: 'center',
+        gap: '1ch',
     },
     statusBarSuccess: {
         backgroundColor: theme.palette.primary.main,
     },
-    helpIcon: {
-        height: '17.5px',
-    },
     repeatingError: {
         marginTop: '0.5rem',
         bottom: '0',

frontend/src/component/user/common/ResetPasswordForm/PasswordChecker/PasswordChecker.tsx

@@ -1,13 +1,13 @@
-import { Tooltip, Typography } from '@material-ui/core';
+import { Typography } from '@material-ui/core';
 import classnames from 'classnames';
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import { BAD_REQUEST, OK } from 'constants/statusCodes';
 import { useStyles } from './PasswordChecker.styles';
-import HelpIcon from '@material-ui/icons/Help';
 import { useCallback } from 'react';
 import { formatApiPath } from 'utils/formatPath';
 import { Alert } from '@material-ui/lab';
 import ConditionallyRender from 'component/common/ConditionallyRender';
+import { HelpIcon } from 'component/common/HelpIcon/HelpIcon';
 
 interface IPasswordCheckerProps {
     password: string;
@@ -157,19 +157,10 @@ const PasswordChecker = ({
 
     return (
         <>
-            <Tooltip
+            <Typography variant="body2" className={styles.title} data-loading>
-                arrow
+                Please set a strong password
-                title="Your password needs to be at least ten characters long, and include an uppercase letter, a lowercase letter, a number and a symbol to be a valid OWASP password"
+                <HelpIcon tooltip="Your password needs to be at least ten characters long, and include an uppercase letter, a lowercase letter, a number and a symbol to be a valid OWASP password" />
-            >
+            </Typography>
-                <Typography
-                    variant="body2"
-                    className={styles.title}
-                    data-loading
-                >
-                    Please set a strong password
-                    <HelpIcon className={styles.helpIcon} />
-                </Typography>
-            </Tooltip>
             <div
                 className={styles.container}
                 style={{