From 2e5e25bfe533a19780be091ae5b2b275c85fe4da Mon Sep 17 00:00:00 2001
From: olav <mail@olav.io>
Date: Thu, 21 Apr 2022 08:26:49 +0200
Subject: [PATCH] refactor: improve icon labels and tooltips (#884)

---
 .../ConfiguredAddons/ConfiguredAddons.tsx     | 15 ++--
 .../apiToken/ApiTokenList/ApiTokenList.tsx    | 35 ++++++----
 .../ConfirmToken/UserToken/UserToken.tsx      | 13 ++--
 .../EnvironmentPermissionAccordion.tsx        |  7 +-
 .../ProjectRoleListItem.tsx                   |  4 +-
 .../UserInviteLink/UserInviteLink.tsx         | 10 +--
 .../UsersList/UserListItem/UserListItem.tsx   |  3 -
 .../ApplicationEdit/ApplicationEdit.tsx       |  4 +-
 .../ApplicationList/ApplicationList.tsx       |  2 +-
 .../AutocompleteBox/AutocompleteBox.tsx       |  2 +-
 .../common/CheckmarkBadge/CheckMarkBadge.tsx  |  2 +-
 .../ConstraintAccordionEditHeader.tsx         | 19 +++---
 .../ConstraintAccordionView.tsx               |  2 +-
 .../ConstraintAccordionViewHeader.tsx         |  6 +-
 .../ConstraintAccordion/ConstraintIcon.tsx    |  2 +-
 .../common/DropdownMenu/DropdownMenu.jsx      |  2 +-
 .../EnvironmentIcon/EnvironmentIcon.tsx       |  4 +-
 .../common/FormTemplate/FormTemplate.tsx      | 29 +++++---
 .../common/PasswordField/PasswordField.tsx    |  6 +-
 .../PermissionButton/PermissionButton.tsx     | 23 ++++---
 .../PermissionIconButton.tsx                  | 21 +++---
 .../PermissionSwitch/PermissionSwitch.tsx     | 12 ++--
 .../Table/TableActions/TableActions.tsx       |  2 +-
 .../TableSearchField/TableSearchField.tsx     |  1 -
 .../common/ToastRenderer/Toast/Toast.tsx      | 19 +++---
 .../TooltipResolver/TooltipResolver.tsx       | 21 ++++++
 .../context/ContextList/ContextList.jsx       |  2 -
 .../EnvironmentListItem.tsx                   | 68 ++++++++-----------
 .../CreateFeatureButton.tsx                   |  2 +-
 .../FeatureStrategyMenuCard.tsx               |  2 +-
 .../FeatureStrategyRemove.tsx                 |  3 +-
 .../FeatureToggleListItem.jsx                 |  1 +
 .../FeatureToggleList.test.jsx.snap           | 10 ++-
 .../FeatureOverviewEnvironment.tsx            |  2 +-
 .../FeatureOverviewEnvironmentStrategy.tsx    |  3 +-
 .../FeatureOverviewMetaData.tsx               |  6 +-
 .../FeatureOverviewTags.tsx                   |  4 +-
 .../FeatureSettingsInformation.tsx            |  3 +-
 .../FeatureSettingsProjectConfirm.tsx         |  5 +-
 .../OverrideConfig/OverrideConfig.jsx         | 10 +--
 .../FeatureVariantsListItem.tsx               | 48 +++++++------
 .../feature/FeatureView/FeatureView.tsx       | 12 ++--
 .../StrategyConstraintInputField.jsx          |  2 +-
 .../StrategyConstraints.tsx                   |  5 +-
 .../feedback/FeedbackNPS/FeedbackNPS.tsx      | 16 +++--
 frontend/src/component/menu/Header/Header.tsx | 42 ++++++------
 .../src/component/project/Project/Project.tsx |  1 +
 .../Project/ProjectInfo/ProjectInfo.tsx       |  5 +-
 .../ProjectAccessListItem.tsx                 |  3 +-
 .../project/ProjectCard/ProjectCard.tsx       |  3 +-
 .../SegmentListItem/SegmentListItem.tsx       |  5 +-
 .../StrategiesList/StrategiesList.tsx         | 27 ++++----
 .../StrategiesList.test.jsx.snap              | 50 ++++++--------
 .../StrategyParameter/StrategyParameter.tsx   | 25 ++++---
 .../StrategyDetails/StrategyDetails.tsx       | 20 +++---
 .../strategies/StrategyView/StrategyView.tsx  |  3 +-
 .../TogglesLinkList/TogglesLinkList.tsx       | 51 +++++++-------
 .../tags/TagTypeList/TagTypeList.tsx          |  4 +-
 .../src/hooks/api/actions/useApi/useApi.ts    |  4 +-
 frontend/src/hooks/useId.test.ts              | 40 +++++++++++
 frontend/src/hooks/useId.ts                   | 10 +++
 frontend/src/utils/formatAccessText.test.ts   | 11 +++
 frontend/src/utils/formatAccessText.ts        | 16 +++++
 63 files changed, 479 insertions(+), 311 deletions(-)
 create mode 100644 frontend/src/component/common/TooltipResolver/TooltipResolver.tsx
 create mode 100644 frontend/src/hooks/useId.test.ts
 create mode 100644 frontend/src/hooks/useId.ts
 create mode 100644 frontend/src/utils/formatAccessText.test.ts
 create mode 100644 frontend/src/utils/formatAccessText.ts

diff --git a/frontend/src/component/addons/AddonList/ConfiguredAddons/ConfiguredAddons.tsx b/frontend/src/component/addons/AddonList/ConfiguredAddons/ConfiguredAddons.tsx
index 0fd9042907..de970024cc 100644
--- a/frontend/src/component/addons/AddonList/ConfiguredAddons/ConfiguredAddons.tsx
+++ b/frontend/src/component/addons/AddonList/ConfiguredAddons/ConfiguredAddons.tsx
@@ -113,29 +113,30 @@ export const ConfiguredAddons = ({ getAddonIcon }: IConfigureAddonsProps) => {
                 <PermissionIconButton
                     permission={UPDATE_ADDON}
                     onClick={() => toggleAddon(addon)}
+                    tooltip="Toggle addon"
                 >
                     <ConditionallyRender
                         condition={addon.enabled}
-                        show={<Visibility titleAccess="Disable addon" />}
-                        elseShow={<VisibilityOff titleAccess="Enable addon" />}
+                        show={<Visibility />}
+                        elseShow={<VisibilityOff />}
                     />
                 </PermissionIconButton>
                 <PermissionIconButton
                     permission={UPDATE_ADDON}
-                    onClick={() => {
-                        history.push(`/addons/edit/${addon.id}`);
-                    }}
+                    tooltip="Edit Addon"
+                    onClick={() => history.push(`/addons/edit/${addon.id}`)}
                 >
-                    <Edit titleAccess="Edit Addon" />
+                    <Edit />
                 </PermissionIconButton>
                 <PermissionIconButton
                     permission={DELETE_ADDON}
+                    tooltip="Remove Addon"
                     onClick={() => {
                         setDeletedAddon(addon);
                         setShowDelete(true);
                     }}
                 >
-                    <Delete titleAccess="Remove Addon" />
+                    <Delete />
                 </PermissionIconButton>
             </ListItemSecondaryAction>
         </ListItem>
diff --git a/frontend/src/component/admin/apiToken/ApiTokenList/ApiTokenList.tsx b/frontend/src/component/admin/apiToken/ApiTokenList/ApiTokenList.tsx
index a334d9835a..fe236a90a5 100644
--- a/frontend/src/component/admin/apiToken/ApiTokenList/ApiTokenList.tsx
+++ b/frontend/src/component/admin/apiToken/ApiTokenList/ApiTokenList.tsx
@@ -8,6 +8,7 @@ import {
     TableCell,
     TableHead,
     TableRow,
+    Tooltip,
 } from '@material-ui/core';
 import AccessContext from 'contexts/AccessContext';
 import useToast from 'hooks/useToast';
@@ -200,24 +201,28 @@ export const ApiTokenList = () => {
                                     <Secret value={item.secret} />
                                 </TableCell>
                                 <TableCell className={styles.actionsContainer}>
-                                    <IconButton
-                                        onClick={() => {
-                                            copyToken(item.secret);
-                                        }}
-                                    >
-                                        <FileCopy />
-                                    </IconButton>
+                                    <Tooltip title="Copy token">
+                                        <IconButton
+                                            onClick={() => {
+                                                copyToken(item.secret);
+                                            }}
+                                        >
+                                            <FileCopy />
+                                        </IconButton>
+                                    </Tooltip>
                                     <ConditionallyRender
                                         condition={hasAccess(DELETE_API_TOKEN)}
                                         show={
-                                            <IconButton
-                                                onClick={() => {
-                                                    setDeleteToken(item);
-                                                    setShowDelete(true);
-                                                }}
-                                            >
-                                                <Delete />
-                                            </IconButton>
+                                            <Tooltip title="Delete token">
+                                                <IconButton
+                                                    onClick={() => {
+                                                        setDeleteToken(item);
+                                                        setShowDelete(true);
+                                                    }}
+                                                >
+                                                    <Delete />
+                                                </IconButton>
+                                            </Tooltip>
                                         }
                                     />
                                 </TableCell>
diff --git a/frontend/src/component/admin/apiToken/ConfirmToken/UserToken/UserToken.tsx b/frontend/src/component/admin/apiToken/ConfirmToken/UserToken/UserToken.tsx
index b0bc6144b2..f434c27b97 100644
--- a/frontend/src/component/admin/apiToken/ConfirmToken/UserToken/UserToken.tsx
+++ b/frontend/src/component/admin/apiToken/ConfirmToken/UserToken/UserToken.tsx
@@ -1,4 +1,4 @@
-import { IconButton } from '@material-ui/core';
+import { IconButton, Tooltip } from '@material-ui/core';
 import CopyIcon from '@material-ui/icons/FileCopy';
 import copy from 'copy-to-clipboard';
 import useToast from 'hooks/useToast';
@@ -14,8 +14,7 @@ export const UserToken = ({ token }: IUserTokenProps) => {
         if (copy(token)) {
             setToastData({
                 type: 'success',
-                title: 'Token copied',
-                text: `Token is copied to clipboard`,
+                title: 'Token copied to clipboard',
             });
         } else
             setToastData({
@@ -38,9 +37,11 @@ export const UserToken = ({ token }: IUserTokenProps) => {
             }}
         >
             {token}
-            <IconButton onClick={copyToken}>
-                <CopyIcon />
-            </IconButton>
+            <Tooltip title="Copy token">
+                <IconButton onClick={copyToken}>
+                    <CopyIcon />
+                </IconButton>
+            </Tooltip>
         </div>
     );
 };
diff --git a/frontend/src/component/admin/projectRoles/ProjectRoleForm/EnvironmentPermissionAccordion/EnvironmentPermissionAccordion.tsx b/frontend/src/component/admin/projectRoles/ProjectRoleForm/EnvironmentPermissionAccordion/EnvironmentPermissionAccordion.tsx
index 23bb956453..9a497a3d78 100644
--- a/frontend/src/component/admin/projectRoles/ProjectRoleForm/EnvironmentPermissionAccordion/EnvironmentPermissionAccordion.tsx
+++ b/frontend/src/component/admin/projectRoles/ProjectRoleForm/EnvironmentPermissionAccordion/EnvironmentPermissionAccordion.tsx
@@ -121,7 +121,12 @@ const EnvironmentPermissionAccordion = ({
             <Accordion style={{ boxShadow: 'none' }}>
                 <AccordionSummary
                     className={styles.accordionSummary}
-                    expandIcon={<ExpandMore className={styles.icon} />}
+                    expandIcon={
+                        <ExpandMore
+                            className={styles.icon}
+                            titleAccess="Toggle"
+                        />
+                    }
                 >
                     <div className={styles.accordionHeader}>
                         <StringTruncator
diff --git a/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleListItem/ProjectRoleListItem.tsx b/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleListItem/ProjectRoleListItem.tsx
index 8738b6eb12..4f1f973b82 100644
--- a/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleListItem/ProjectRoleListItem.tsx
+++ b/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleListItem/ProjectRoleListItem.tsx
@@ -50,18 +50,17 @@ const RoleListItem = ({
                 <TableCell align="right">
                     <PermissionIconButton
                         data-loading
-                        aria-label="Edit"
                         disabled={type === BUILTIN_ROLE_TYPE}
                         onClick={() => {
                             history.push(`/admin/roles/${id}/edit`);
                         }}
                         permission={ADMIN}
+                        tooltip="Edit role"
                     >
                         <Edit />
                     </PermissionIconButton>
                     <PermissionIconButton
                         data-loading
-                        aria-label="Remove role"
                         disabled={type === BUILTIN_ROLE_TYPE}
                         onClick={() => {
                             // @ts-expect-error
@@ -69,6 +68,7 @@ const RoleListItem = ({
                             setDelDialog(true);
                         }}
                         permission={ADMIN}
+                        tooltip="Remove role"
                     >
                         <Delete />
                     </PermissionIconButton>
diff --git a/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserLink/UserInviteLink/UserInviteLink.tsx b/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserLink/UserInviteLink/UserInviteLink.tsx
index 5548f4c007..81cd25f6fe 100644
--- a/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserLink/UserInviteLink/UserInviteLink.tsx
+++ b/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserLink/UserInviteLink/UserInviteLink.tsx
@@ -1,4 +1,4 @@
-import { IconButton } from '@material-ui/core';
+import { IconButton, Tooltip } from '@material-ui/core';
 import CopyIcon from '@material-ui/icons/FileCopy';
 import useToast from 'hooks/useToast';
 
@@ -47,9 +47,11 @@ const UserInviteLink = ({ inviteLink }: IInviteLinkProps) => {
             }}
         >
             {inviteLink}
-            <IconButton onClick={handleCopy}>
-                <CopyIcon />
-            </IconButton>
+            <Tooltip title="Copy link">
+                <IconButton onClick={handleCopy}>
+                    <CopyIcon />
+                </IconButton>
+            </Tooltip>
         </div>
     );
 };
diff --git a/frontend/src/component/admin/users/UsersList/UserListItem/UserListItem.tsx b/frontend/src/component/admin/users/UsersList/UserListItem/UserListItem.tsx
index b0c8c8f65d..be706c5de1 100644
--- a/frontend/src/component/admin/users/UsersList/UserListItem/UserListItem.tsx
+++ b/frontend/src/component/admin/users/UsersList/UserListItem/UserListItem.tsx
@@ -87,7 +87,6 @@ const UserListItem = ({
                         <Tooltip title="Edit user" arrow>
                             <IconButton
                                 data-loading
-                                aria-label="Edit user"
                                 onClick={() =>
                                     history.push(`/admin/users/${user.id}/edit`)
                                 }
@@ -98,7 +97,6 @@ const UserListItem = ({
                         <Tooltip title="Change password" arrow>
                             <IconButton
                                 data-loading
-                                aria-label="Change password"
                                 onClick={openPwDialog(user)}
                             >
                                 <Lock />
@@ -107,7 +105,6 @@ const UserListItem = ({
                         <Tooltip title="Remove user" arrow>
                             <IconButton
                                 data-loading
-                                aria-label="Remove user"
                                 onClick={openDelDialog(user)}
                             >
                                 <Delete />
diff --git a/frontend/src/component/application/ApplicationEdit/ApplicationEdit.tsx b/frontend/src/component/application/ApplicationEdit/ApplicationEdit.tsx
index e017ef2e7f..68c08af65d 100644
--- a/frontend/src/component/application/ApplicationEdit/ApplicationEdit.tsx
+++ b/frontend/src/component/application/ApplicationEdit/ApplicationEdit.tsx
@@ -112,13 +112,13 @@ export const ApplicationEdit = () => {
                                 condition={Boolean(url)}
                                 show={
                                     <IconButton component={Link} href={url}>
-                                        <LinkIcon />
+                                        <LinkIcon titleAccess={url} />
                                     </IconButton>
                                 }
                             />
 
                             <PermissionButton
-                                title="Delete application"
+                                tooltip="Delete application"
                                 onClick={toggleModal}
                                 permission={UPDATE_APPLICATION}
                             >
diff --git a/frontend/src/component/application/ApplicationList/ApplicationList.tsx b/frontend/src/component/application/ApplicationList/ApplicationList.tsx
index 017e8781cb..a99e6becd3 100644
--- a/frontend/src/component/application/ApplicationList/ApplicationList.tsx
+++ b/frontend/src/component/application/ApplicationList/ApplicationList.tsx
@@ -22,7 +22,7 @@ export const ApplicationList = () => {
     const renderNoApplications = () => (
         <>
             <section style={{ textAlign: 'center' }}>
-                <Warning /> <br />
+                <Warning titleAccess="Warning" /> <br />
                 <br />
                 Oh snap, it does not seem like you have connected any
                 applications. To connect your application to Unleash you will
diff --git a/frontend/src/component/common/AutocompleteBox/AutocompleteBox.tsx b/frontend/src/component/common/AutocompleteBox/AutocompleteBox.tsx
index 9fb5d8be03..2e629c5d5a 100644
--- a/frontend/src/component/common/AutocompleteBox/AutocompleteBox.tsx
+++ b/frontend/src/component/common/AutocompleteBox/AutocompleteBox.tsx
@@ -46,7 +46,7 @@ export const AutocompleteBox = ({
                 classes={{ inputRoot: styles.inputRoot }}
                 options={options}
                 value={value}
-                popupIcon={<ArrowDropDown />}
+                popupIcon={<ArrowDropDown titleAccess="Toggle" />}
                 onChange={(event, value) => onChange(value || [])}
                 renderInput={renderInput}
                 getOptionLabel={value => value.label}
diff --git a/frontend/src/component/common/CheckmarkBadge/CheckMarkBadge.tsx b/frontend/src/component/common/CheckmarkBadge/CheckMarkBadge.tsx
index c2a7cae1a6..7b8673d84d 100644
--- a/frontend/src/component/common/CheckmarkBadge/CheckMarkBadge.tsx
+++ b/frontend/src/component/common/CheckmarkBadge/CheckMarkBadge.tsx
@@ -12,7 +12,7 @@ const CheckMarkBadge = ({ type, className }: ICheckMarkBadgeProps) => {
     return (
         <div className={classnames(styles.badge, className)}>
             {type === 'error' ? (
-                <Close className={styles.check} />
+                <Close className={styles.check} titleAccess="Error" />
             ) : (
                 <Check className={styles.check} />
             )}
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx
index bdced50d41..c233f7829d 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx
@@ -17,6 +17,7 @@ import {
     operatorsForContext,
     CURRENT_TIME_CONTEXT_FIELD,
 } from 'utils/operatorsForContext';
+import { Tooltip } from '@material-ui/core';
 
 interface IConstraintAccordionViewHeader {
     localConstraint: IConstraint;
@@ -121,14 +122,16 @@ export const ConstraintAccordionEditHeader = ({
                 show={<p className={styles.editingBadge}>Updating...</p>}
                 elseShow={<p className={styles.editingBadge}>Editing</p>}
             />
-            <a
-                href="https://docs.getunleash.io/advanced/strategy_constraints"
-                style={{ marginLeft: 'auto' }}
-                target="_blank"
-                rel="noopener noreferrer"
-            >
-                <Help className={styles.help} />
-            </a>
+            <Tooltip title="Help">
+                <a
+                    href="https://docs.getunleash.io/advanced/strategy_constraints"
+                    style={{ marginLeft: 'auto' }}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    <Help className={styles.help} />
+                </a>
+            </Tooltip>
         </div>
     );
 };
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx
index da4a50b9f3..0e60e957ae 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx
@@ -45,7 +45,7 @@ export const ConstraintAccordionView = ({
         >
             <AccordionSummary
                 className={styles.summary}
-                expandIcon={<ExpandMore />}
+                expandIcon={<ExpandMore titleAccess="Toggle" />}
             >
                 <ConstraintAccordionViewHeader
                     compact={compact}
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx
index ea3959120f..ebc898136f 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx
@@ -104,8 +104,9 @@ export const ConstraintAccordionViewHeader = ({
                             projectId={projectId}
                             environmentId={environmentId}
                             hidden={!onEdit}
+                            tooltip="Edit constraint"
                         >
-                            <Edit titleAccess="edit constraint" />
+                            <Edit />
                         </PermissionIconButton>
                     }
                 />
@@ -116,9 +117,10 @@ export const ConstraintAccordionViewHeader = ({
                             onClick={onDeleteClick!}
                             permission={UPDATE_FEATURE_STRATEGY}
                             projectId={projectId}
+                            tooltip="Delete constraint"
                             environmentId={environmentId}
                         >
-                            <Delete titleAccess="delete constraint" />
+                            <Delete />
                         </PermissionIconButton>
                     }
                 />
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintIcon.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintIcon.tsx
index 734e9d14a3..a558a047eb 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintIcon.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintIcon.tsx
@@ -6,7 +6,7 @@ export const ConstraintIcon = () => {
 
     return (
         <div className={styles.constraintIconContainer}>
-            <TrackChanges className={styles.constraintIcon} aria-hidden />
+            <TrackChanges className={styles.constraintIcon} />
         </div>
     );
 };
diff --git a/frontend/src/component/common/DropdownMenu/DropdownMenu.jsx b/frontend/src/component/common/DropdownMenu/DropdownMenu.jsx
index 9e51e217c4..50761535d6 100644
--- a/frontend/src/component/common/DropdownMenu/DropdownMenu.jsx
+++ b/frontend/src/component/common/DropdownMenu/DropdownMenu.jsx
@@ -12,7 +12,7 @@ const DropdownMenu = ({
     id,
     title,
     callback,
-    icon = <ArrowDropDown />,
+    icon = <ArrowDropDown titleAccess="Toggle" />,
     label,
     style,
     startIcon,
diff --git a/frontend/src/component/common/EnvironmentIcon/EnvironmentIcon.tsx b/frontend/src/component/common/EnvironmentIcon/EnvironmentIcon.tsx
index 8361c6dbcf..a22a9c2cac 100644
--- a/frontend/src/component/common/EnvironmentIcon/EnvironmentIcon.tsx
+++ b/frontend/src/component/common/EnvironmentIcon/EnvironmentIcon.tsx
@@ -9,6 +9,8 @@ interface IEnvironmentIcon {
 const EnvironmentIcon = ({ enabled, className }: IEnvironmentIcon) => {
     const theme = useTheme();
 
+    const title = enabled ? 'Environment enabled' : 'Environment disabled';
+
     const container = {
         backgroundColor: enabled
             ? theme.palette.primary.light
@@ -31,7 +33,7 @@ const EnvironmentIcon = ({ enabled, className }: IEnvironmentIcon) => {
 
     return (
         <div style={container} className={className}>
-            <Cloud style={icon} />
+            <Cloud style={icon} titleAccess={title} />
         </div>
     );
 };
diff --git a/frontend/src/component/common/FormTemplate/FormTemplate.tsx b/frontend/src/component/common/FormTemplate/FormTemplate.tsx
index 55c0708dd9..1a62abe201 100644
--- a/frontend/src/component/common/FormTemplate/FormTemplate.tsx
+++ b/frontend/src/component/common/FormTemplate/FormTemplate.tsx
@@ -1,7 +1,12 @@
 import { useStyles } from './FormTemplate.styles';
 import MenuBookIcon from '@material-ui/icons/MenuBook';
 import Codebox from '../Codebox/Codebox';
-import { Collapse, IconButton, useMediaQuery } from '@material-ui/core';
+import {
+    Collapse,
+    IconButton,
+    useMediaQuery,
+    Tooltip,
+} from '@material-ui/core';
 import { FileCopy, Info } from '@material-ui/icons';
 import ConditionallyRender from '../ConditionallyRender';
 import Loader from '../Loader/Loader';
@@ -95,9 +100,11 @@ const FormTemplate: React.FC<ICreateProps> = ({
                     >
                         <h3 className={styles.subtitle}>
                             API Command{' '}
-                            <IconButton onClick={copyCommand}>
-                                <FileCopy className={styles.icon} />
-                            </IconButton>
+                            <Tooltip title="Copy command">
+                                <IconButton onClick={copyCommand}>
+                                    <FileCopy className={styles.icon} />
+                                </IconButton>
+                            </Tooltip>
                         </h3>
                         <Codebox text={formatApiCode()} />
                     </Guidance>
@@ -126,12 +133,14 @@ const MobileGuidance = ({
             <div className={styles.mobileGuidanceBgContainer}>
                 <MobileGuidanceBG className={styles.mobileGuidanceBackground} />
             </div>
-            <IconButton
-                className={styles.mobileGuidanceButton}
-                onClick={() => setOpen(prev => !prev)}
-            >
-                <Info className={styles.infoIcon} />
-            </IconButton>
+            <Tooltip title="Toggle help">
+                <IconButton
+                    className={styles.mobileGuidanceButton}
+                    onClick={() => setOpen(prev => !prev)}
+                >
+                    <Info className={styles.infoIcon} />
+                </IconButton>
+            </Tooltip>
             <Collapse in={open} timeout={500}>
                 <Guidance
                     description={description}
diff --git a/frontend/src/component/common/PasswordField/PasswordField.tsx b/frontend/src/component/common/PasswordField/PasswordField.tsx
index ec7a636a40..14d2fd66b0 100644
--- a/frontend/src/component/common/PasswordField/PasswordField.tsx
+++ b/frontend/src/component/common/PasswordField/PasswordField.tsx
@@ -15,6 +15,9 @@ const PasswordField = ({ ...rest }) => {
         e.preventDefault();
     };
 
+    const IconComponent = showPassword ? Visibility : VisibilityOff;
+    const iconTitle = 'Toggle password visibility';
+
     return (
         <TextField
             variant="outlined"
@@ -27,11 +30,10 @@ const PasswordField = ({ ...rest }) => {
                 endAdornment: (
                     <InputAdornment position="end">
                         <IconButton
-                            aria-label="toggle password visibility"
                             onClick={handleClickShowPassword}
                             onMouseDown={handleMouseDownPassword}
                         >
-                            {showPassword ? <Visibility /> : <VisibilityOff />}
+                            <IconComponent titleAccess={iconTitle} />
                         </IconButton>
                     </InputAdornment>
                 ),
diff --git a/frontend/src/component/common/PermissionButton/PermissionButton.tsx b/frontend/src/component/common/PermissionButton/PermissionButton.tsx
index b69babcf2b..505fe2307a 100644
--- a/frontend/src/component/common/PermissionButton/PermissionButton.tsx
+++ b/frontend/src/component/common/PermissionButton/PermissionButton.tsx
@@ -1,15 +1,19 @@
-import { Button, ButtonProps, Tooltip } from '@material-ui/core';
+import { Button, ButtonProps } from '@material-ui/core';
 import { Lock } from '@material-ui/icons';
 import AccessContext from 'contexts/AccessContext';
 import React, { useContext } from 'react';
 import ConditionallyRender from '../ConditionallyRender';
+import { TooltipResolver } from 'component/common/TooltipResolver/TooltipResolver';
+import { formatAccessText } from 'utils/formatAccessText';
+import { useId } from 'hooks/useId';
 
-export interface IPermissionButtonProps extends ButtonProps {
+export interface IPermissionButtonProps extends Omit<ButtonProps, 'title'> {
     permission: string | string[];
     onClick?: (e: any) => void;
     disabled?: boolean;
     projectId?: string;
     environmentId?: string;
+    tooltip?: string;
 }
 
 const PermissionButton: React.FC<IPermissionButtonProps> = ({
@@ -21,9 +25,11 @@ const PermissionButton: React.FC<IPermissionButtonProps> = ({
     disabled,
     projectId,
     environmentId,
+    tooltip,
     ...rest
 }) => {
     const { hasAccess } = useContext(AccessContext);
+    const id = useId();
     let access;
 
     const handleAccess = () => {
@@ -53,30 +59,27 @@ const PermissionButton: React.FC<IPermissionButtonProps> = ({
 
     access = handleAccess();
 
-    const tooltipText = !access
-        ? "You don't have access to perform this operation"
-        : '';
-
     return (
-        <Tooltip title={tooltipText} arrow>
-            <span>
+        <TooltipResolver title={formatAccessText(access, tooltip)} arrow>
+            <span id={id}>
                 <Button
                     onClick={onClick}
                     disabled={disabled || !access}
+                    aria-describedby={id}
                     variant={variant}
                     color={color}
                     {...rest}
                     endIcon={
                         <ConditionallyRender
                             condition={!access}
-                            show={<Lock />}
+                            show={<Lock titleAccess="Locked" />}
                         />
                     }
                 >
                     {children}
                 </Button>
             </span>
-        </Tooltip>
+        </TooltipResolver>
     );
 };
 
diff --git a/frontend/src/component/common/PermissionIconButton/PermissionIconButton.tsx b/frontend/src/component/common/PermissionIconButton/PermissionIconButton.tsx
index 263207c711..2a8a97246c 100644
--- a/frontend/src/component/common/PermissionIconButton/PermissionIconButton.tsx
+++ b/frontend/src/component/common/PermissionIconButton/PermissionIconButton.tsx
@@ -1,14 +1,17 @@
-import { IconButton, Tooltip, IconButtonProps } from '@material-ui/core';
+import { IconButton, IconButtonProps } from '@material-ui/core';
 import React, { useContext, ReactNode } from 'react';
 import AccessContext from 'contexts/AccessContext';
 import { Link } from 'react-router-dom';
+import { TooltipResolver } from 'component/common/TooltipResolver/TooltipResolver';
+import { formatAccessText } from 'utils/formatAccessText';
+import { useId } from 'hooks/useId';
 
 interface IPermissionIconButtonProps {
     permission: string;
     projectId?: string;
     environmentId?: string;
     className?: string;
-    title?: string;
+    tooltip?: string;
     children?: ReactNode;
     disabled?: boolean;
     hidden?: boolean;
@@ -30,9 +33,11 @@ const PermissionIconButton = ({
     projectId,
     children,
     environmentId,
+    tooltip,
     ...rest
 }: IButtonProps | ILinkProps) => {
     const { hasAccess } = useContext(AccessContext);
+    const id = useId();
     let access;
 
     if (projectId && environmentId) {
@@ -43,18 +48,14 @@ const PermissionIconButton = ({
         access = hasAccess(permission);
     }
 
-    const tooltipText = !access
-        ? "You don't have access to perform this operation"
-        : '';
-
     return (
-        <Tooltip title={tooltipText} arrow>
-            <span>
-                <IconButton disabled={!access} {...rest}>
+        <TooltipResolver title={formatAccessText(access, tooltip)}>
+            <span id={id}>
+                <IconButton {...rest} disabled={!access} aria-labelledby={id}>
                     {children}
                 </IconButton>
             </span>
-        </Tooltip>
+        </TooltipResolver>
     );
 };
 
diff --git a/frontend/src/component/common/PermissionSwitch/PermissionSwitch.tsx b/frontend/src/component/common/PermissionSwitch/PermissionSwitch.tsx
index f3b8be06ed..d66ba04e18 100644
--- a/frontend/src/component/common/PermissionSwitch/PermissionSwitch.tsx
+++ b/frontend/src/component/common/PermissionSwitch/PermissionSwitch.tsx
@@ -1,6 +1,8 @@
-import { Switch, Tooltip, SwitchProps } from '@material-ui/core';
+import { Switch, SwitchProps } from '@material-ui/core';
 import AccessContext from 'contexts/AccessContext';
 import React, { useContext } from 'react';
+import { formatAccessText } from 'utils/formatAccessText';
+import { TooltipResolver } from 'component/common/TooltipResolver/TooltipResolver';
 
 interface IPermissionSwitchProps extends SwitchProps {
     permission: string;
@@ -38,12 +40,8 @@ const PermissionSwitch = React.forwardRef<
         access = hasAccess(permission);
     }
 
-    const tooltipText = !access
-        ? "You don't have access to perform this operation"
-        : '';
-
     return (
-        <Tooltip title={tooltipText} arrow>
+        <TooltipResolver title={formatAccessText(access, tooltip)} arrow>
             <span data-loading>
                 <Switch
                     onChange={onChange}
@@ -53,7 +51,7 @@ const PermissionSwitch = React.forwardRef<
                     {...rest}
                 />
             </span>
-        </Tooltip>
+        </TooltipResolver>
     );
 });
 
diff --git a/frontend/src/component/common/Table/TableActions/TableActions.tsx b/frontend/src/component/common/Table/TableActions/TableActions.tsx
index dcf1ee2283..42dd1c43ba 100644
--- a/frontend/src/component/common/Table/TableActions/TableActions.tsx
+++ b/frontend/src/component/common/Table/TableActions/TableActions.tsx
@@ -53,7 +53,7 @@ export const TableActions = ({ search, onSearch }: ITableActionsProps) => {
                     </Tooltip>
                 }
             />
-            <div className={styles.verticalSeparator}></div>
+            <div className={styles.verticalSeparator} />
         </>
     );
 };
diff --git a/frontend/src/component/common/Table/TableActions/TableSearchField/TableSearchField.tsx b/frontend/src/component/common/Table/TableActions/TableSearchField/TableSearchField.tsx
index 774fe8a324..dd10c3c322 100644
--- a/frontend/src/component/common/Table/TableActions/TableSearchField/TableSearchField.tsx
+++ b/frontend/src/component/common/Table/TableActions/TableSearchField/TableSearchField.tsx
@@ -57,7 +57,6 @@ export const TableSearchField = ({
                             <Tooltip title="Clear search query" arrow>
                                 <IconButton
                                     size="small"
-                                    aria-label="Clear search query"
                                     onClick={() => {
                                         onChange('');
                                         onBlur?.(true);
diff --git a/frontend/src/component/common/ToastRenderer/Toast/Toast.tsx b/frontend/src/component/common/ToastRenderer/Toast/Toast.tsx
index b67f7df784..2bb132ef8d 100644
--- a/frontend/src/component/common/ToastRenderer/Toast/Toast.tsx
+++ b/frontend/src/component/common/ToastRenderer/Toast/Toast.tsx
@@ -1,7 +1,7 @@
 import { useStyles } from './Toast.styles';
 import classnames from 'classnames';
 import { useContext } from 'react';
-import { IconButton } from '@material-ui/core';
+import { IconButton, Tooltip } from '@material-ui/core';
 import CheckMarkBadge from 'component/common/CheckmarkBadge/CheckMarkBadge';
 import UIContext from 'contexts/UIContext';
 import ConditionallyRender from 'component/common/ConditionallyRender';
@@ -76,14 +76,15 @@ const Toast = ({ title, text, type, confetti }: IToast) => {
                                 />
                             </div>
                         </div>
-
-                        <IconButton
-                            color="primary"
-                            onClick={hide}
-                            className={styles.buttonStyle}
-                        >
-                            <Close />
-                        </IconButton>
+                        <Tooltip title="Close">
+                            <IconButton
+                                color="primary"
+                                onClick={hide}
+                                className={styles.buttonStyle}
+                            >
+                                <Close />
+                            </IconButton>
+                        </Tooltip>
                     </div>
                 </div>
             </div>
diff --git a/frontend/src/component/common/TooltipResolver/TooltipResolver.tsx b/frontend/src/component/common/TooltipResolver/TooltipResolver.tsx
new file mode 100644
index 0000000000..60cebf2725
--- /dev/null
+++ b/frontend/src/component/common/TooltipResolver/TooltipResolver.tsx
@@ -0,0 +1,21 @@
+import { Tooltip, TooltipProps } from '@material-ui/core';
+
+interface ITooltipResolverProps extends Omit<TooltipProps, 'title'> {
+    title: string | undefined;
+}
+
+export const TooltipResolver = ({
+    title,
+    children,
+    ...rest
+}: ITooltipResolverProps) => {
+    if (!title) {
+        return children;
+    }
+
+    return (
+        <Tooltip {...rest} title={title}>
+            {children}
+        </Tooltip>
+    );
+};
diff --git a/frontend/src/component/context/ContextList/ContextList.jsx b/frontend/src/component/context/ContextList/ContextList.jsx
index 10c56b5bde..5f5a5f713d 100644
--- a/frontend/src/component/context/ContextList/ContextList.jsx
+++ b/frontend/src/component/context/ContextList/ContextList.jsx
@@ -79,7 +79,6 @@ const ContextList = () => {
                     show={
                         <Tooltip title="Edit context field">
                             <IconButton
-                                aria-label="edit"
                                 onClick={() =>
                                     history.push(`/context/edit/${field.name}`)
                                 }
@@ -94,7 +93,6 @@ const ContextList = () => {
                     show={
                         <Tooltip title="Delete context field">
                             <IconButton
-                                aria-label="delete"
                                 onClick={() => {
                                     setName(field.name);
                                     setShowDelDialogue(true);
diff --git a/frontend/src/component/environments/EnvironmentList/EnvironmentListItem/EnvironmentListItem.tsx b/frontend/src/component/environments/EnvironmentList/EnvironmentListItem/EnvironmentListItem.tsx
index acbdeac005..f5628f0a35 100644
--- a/frontend/src/component/environments/EnvironmentList/EnvironmentListItem/EnvironmentListItem.tsx
+++ b/frontend/src/component/environments/EnvironmentList/EnvironmentListItem/EnvironmentListItem.tsx
@@ -155,46 +155,38 @@ const EnvironmentListItem = ({
             <ConditionallyRender
                 condition={updatePermission}
                 show={
-                    <Tooltip title="Drag to reorder">
-                        <div>
-                            <IconButton>
-                                <DragIndicator titleAccess="Drag" />
-                            </IconButton>
-                        </div>
-                    </Tooltip>
+                    <IconButton>
+                        <DragIndicator titleAccess="Drag" cursor="grab" />
+                    </IconButton>
                 }
             />
             <ConditionallyRender
                 condition={updatePermission}
                 show={
                     <Tooltip title={`${tooltipText} environment`}>
-                        <div>
-                            <IconButton
-                                onClick={() => {
-                                    setSelectedEnv(env);
-                                    setToggleDialog(prev => !prev);
-                                }}
-                            >
-                                <OfflineBolt titleAccess="Toggle" />
-                            </IconButton>
-                        </div>
+                        <IconButton
+                            onClick={() => {
+                                setSelectedEnv(env);
+                                setToggleDialog(prev => !prev);
+                            }}
+                        >
+                            <OfflineBolt />
+                        </IconButton>
                     </Tooltip>
                 }
             />
             <ConditionallyRender
                 condition={updatePermission}
                 show={
-                    <Tooltip title="Update environment">
-                        <div>
-                            <IconButton
-                                disabled={env.protected}
-                                onClick={() => {
-                                    history.push(`/environments/${env.name}`);
-                                }}
-                            >
-                                <Edit titleAccess="Edit" />
-                            </IconButton>
-                        </div>
+                    <Tooltip title="Edit environment">
+                        <IconButton
+                            disabled={env.protected}
+                            onClick={() => {
+                                history.push(`/environments/${env.name}`);
+                            }}
+                        >
+                            <Edit />
+                        </IconButton>
                     </Tooltip>
                 }
             />
@@ -202,17 +194,15 @@ const EnvironmentListItem = ({
                 condition={hasAccess(DELETE_ENVIRONMENT)}
                 show={
                     <Tooltip title="Delete environment">
-                        <div>
-                            <IconButton
-                                disabled={env.protected}
-                                onClick={() => {
-                                    setDeldialogue(true);
-                                    setSelectedEnv(env);
-                                }}
-                            >
-                                <Delete titleAccess="Delete" />
-                            </IconButton>
-                        </div>
+                        <IconButton
+                            disabled={env.protected}
+                            onClick={() => {
+                                setDeldialogue(true);
+                                setSelectedEnv(env);
+                            }}
+                        >
+                            <Delete />
+                        </IconButton>
                     </Tooltip>
                 }
             />
diff --git a/frontend/src/component/feature/CreateFeatureButton/CreateFeatureButton.tsx b/frontend/src/component/feature/CreateFeatureButton/CreateFeatureButton.tsx
index 64c55f82e4..56c3537652 100644
--- a/frontend/src/component/feature/CreateFeatureButton/CreateFeatureButton.tsx
+++ b/frontend/src/component/feature/CreateFeatureButton/CreateFeatureButton.tsx
@@ -35,7 +35,7 @@ export const CreateFeatureButton = ({
                         data-testid={NAVIGATE_TO_CREATE_FEATURE}
                         disabled={!createFeature.access}
                     >
-                        <Add titleAccess="New" />
+                        <Add />
                     </IconButton>
                 </Tooltip>
             }
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx
index ea5f5751b0..276c360079 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx
@@ -35,7 +35,7 @@ export const FeatureStrategyMenuCard = ({
     return (
         <Link to={createStrategyPath} className={styles.card}>
             <div className={styles.icon}>
-                <StrategyIcon aria-hidden />
+                <StrategyIcon />
             </div>
             <div>
                 <StringTruncator
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyRemove/FeatureStrategyRemove.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyRemove/FeatureStrategyRemove.tsx
index 9aa6a778a6..5954c35c10 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyRemove/FeatureStrategyRemove.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyRemove/FeatureStrategyRemove.tsx
@@ -69,9 +69,10 @@ export const FeatureStrategyRemove = ({
                         disabled={disabled}
                         permission={DELETE_FEATURE_STRATEGY}
                         data-testid={STRATEGY_FORM_REMOVE_ID}
+                        tooltip="Delete strategy"
                         type="button"
                     >
-                        <Delete titleAccess="Delete strategy" />
+                        <Delete />
                     </PermissionIconButton>
                 }
                 elseShow={
diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.jsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.jsx
index 71f446e754..1093d1c78d 100644
--- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.jsx
+++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.jsx
@@ -145,6 +145,7 @@ const FeatureToggleListItem = ({
                             !projectExists()
                         }
                         onClick={reviveFeature}
+                        tooltip="Revive feature"
                     >
                         <Undo />
                     </PermissionIconButton>
diff --git a/frontend/src/component/feature/FeatureToggleList/__snapshots__/FeatureToggleList.test.jsx.snap b/frontend/src/component/feature/FeatureToggleList/__snapshots__/FeatureToggleList.test.jsx.snap
index 693175c21b..2bd38f1383 100644
--- a/frontend/src/component/feature/FeatureToggleList/__snapshots__/FeatureToggleList.test.jsx.snap
+++ b/frontend/src/component/feature/FeatureToggleList/__snapshots__/FeatureToggleList.test.jsx.snap
@@ -128,14 +128,17 @@ exports[`renders correctly with one feature 1`] = `
                       className="material-icons MuiIcon-root"
                     >
                       <svg
-                        aria-hidden={true}
                         className="MuiSvgIcon-root"
                         focusable="false"
+                        role="img"
                         viewBox="0 0 24 24"
                       >
                         <path
                           d="M7 10l5 5 5-5z"
                         />
+                        <title>
+                          Toggle
+                        </title>
                       </svg>
                     </span>
                   </span>
@@ -296,14 +299,17 @@ exports[`renders correctly with one feature without permissions 1`] = `
                       className="material-icons MuiIcon-root"
                     >
                       <svg
-                        aria-hidden={true}
                         className="MuiSvgIcon-root"
                         focusable="false"
+                        role="img"
                         viewBox="0 0 24 24"
                       >
                         <path
                           d="M7 10l5 5 5-5z"
                         />
+                        <title>
+                          Toggle
+                        </title>
                       </svg>
                     </span>
                   </span>
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx
index 1454e82076..31ea680e09 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx
@@ -93,7 +93,7 @@ const FeatureOverviewEnvironment = ({
             >
                 <AccordionSummary
                     className={styles.accordionHeader}
-                    expandIcon={<ExpandMore />}
+                    expandIcon={<ExpandMore titleAccess="Toggle" />}
                 >
                     <div className={styles.header} data-loading>
                         <div className={styles.headerTitle}>
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentStrategies/FeatureOverviewEnvironmentStrategy/FeatureOverviewEnvironmentStrategy.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentStrategies/FeatureOverviewEnvironmentStrategy/FeatureOverviewEnvironmentStrategy.tsx
index 66fcdda13f..e6d2004ae5 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentStrategies/FeatureOverviewEnvironmentStrategy/FeatureOverviewEnvironmentStrategy.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentStrategies/FeatureOverviewEnvironmentStrategy/FeatureOverviewEnvironmentStrategy.tsx
@@ -53,8 +53,9 @@ const FeatureOverviewEnvironmentStrategy = ({
                         projectId={projectId}
                         component={Link}
                         to={editStrategyPath}
+                        tooltip="Edit"
                     >
-                        <Edit titleAccess="Edit" />
+                        <Edit />
                     </PermissionIconButton>
                     <FeatureStrategyRemove
                         projectId={projectId}
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx
index 18a1988b09..c6b3340f66 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx
@@ -52,7 +52,10 @@ const FeatureOverviewMetaData = () => {
                                         component={Link}
                                         to={`/projects/${projectId}/features/${featureId}/settings`}
                                     >
-                                        <Edit className={styles.editIcon} />
+                                        <Edit
+                                            className={styles.editIcon}
+                                            titleAccess="Settings"
+                                        />
                                     </PermissionIconButton>
                                 </div>
                             </span>
@@ -66,6 +69,7 @@ const FeatureOverviewMetaData = () => {
                                         permission={UPDATE_FEATURE}
                                         component={Link}
                                         to={`/projects/${projectId}/features/${featureId}/settings`}
+                                        tooltip="Edit description"
                                     >
                                         <Edit className={styles.editIcon} />
                                     </PermissionIconButton>
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewTags/FeatureOverviewTags.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewTags/FeatureOverviewTags.tsx
index 0b3c984152..a730490b93 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewTags/FeatureOverviewTags.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewTags/FeatureOverviewTags.tsx
@@ -106,7 +106,9 @@ const FeatureOverviewTags: React.FC<IFeatureOverviewTagsProps> = ({
             data-loading
             label={t.value}
             key={`${t.type}:${t.value}`}
-            deleteIcon={<Close className={styles.closeIcon} />}
+            deleteIcon={
+                <Close className={styles.closeIcon} titleAccess="Remove" />
+            }
             onDelete={
                 canDeleteTag
                     ? () => {
diff --git a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsInformation/FeatureSettingsInformation.tsx b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsInformation/FeatureSettingsInformation.tsx
index 2a9b9d2420..4103e857d1 100644
--- a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsInformation/FeatureSettingsInformation.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsInformation/FeatureSettingsInformation.tsx
@@ -34,8 +34,9 @@ export const FeatureSettingsInformation = ({
                     projectId={projectId}
                     data-loading
                     onClick={onEdit}
+                    tooltip="Edit"
                 >
-                    <Edit titleAccess="Edit" />
+                    <Edit />
                 </PermissionIconButton>
             </div>
             <Typography>
diff --git a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureSettingsProjectConfirm/FeatureSettingsProjectConfirm.tsx b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureSettingsProjectConfirm/FeatureSettingsProjectConfirm.tsx
index cb7e2bbe82..4ace931301 100644
--- a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureSettingsProjectConfirm/FeatureSettingsProjectConfirm.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureSettingsProjectConfirm/FeatureSettingsProjectConfirm.tsx
@@ -90,7 +90,10 @@ const FeatureSettingsProjectConfirm = ({
                         </p>
                         <div className={styles.iconContainer}>
                             <div className={styles.errorIconContainer}>
-                                <Error className={styles.check} />
+                                <Error
+                                    className={styles.check}
+                                    titleAccess="Error"
+                                />
                             </div>
                         </div>
                     </div>
diff --git a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.jsx b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.jsx
index f6f7da8a77..5432949435 100644
--- a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.jsx
+++ b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.jsx
@@ -1,6 +1,6 @@
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import { Grid, IconButton, TextField } from '@material-ui/core';
+import { Grid, IconButton, TextField, Tooltip } from '@material-ui/core';
 import { Delete } from '@material-ui/icons';
 import { useStyles } from './OverrideConfig.styles';
 import { Autocomplete } from '@material-ui/lab';
@@ -98,9 +98,11 @@ export const OverrideConfig = ({
                     />
                 </Grid>
                 <Grid item md={1}>
-                    <IconButton onClick={removeOverride(i)}>
-                        <Delete />
-                    </IconButton>
+                    <Tooltip title="Remove">
+                        <IconButton onClick={removeOverride(i)}>
+                            <Delete />
+                        </IconButton>
+                    </Tooltip>
                 </Grid>
             </Grid>
         );
diff --git a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsListItem/FeatureVariantsListItem.tsx b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsListItem/FeatureVariantsListItem.tsx
index 73c426dbcd..60edc35f1a 100644
--- a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsListItem/FeatureVariantsListItem.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsListItem/FeatureVariantsListItem.tsx
@@ -1,4 +1,10 @@
-import { Chip, IconButton, TableCell, TableRow } from '@material-ui/core';
+import {
+    Chip,
+    IconButton,
+    TableCell,
+    TableRow,
+    Tooltip,
+} from '@material-ui/core';
 import { Delete, Edit } from '@material-ui/icons';
 
 import styles from '../variants.module.scss';
@@ -54,24 +60,28 @@ const FeatureVariantListItem = ({
                 show={
                     <TableCell className={styles.actions}>
                         <div className={styles.actionsContainer}>
-                            <IconButton
-                                data-testid={'VARIANT_EDIT_BUTTON'}
-                                onClick={() => editVariant(variant.name)}
-                            >
-                                <Edit />
-                            </IconButton>
-                            <IconButton
-                                data-testid={`VARIANT_DELETE_BUTTON_${variant.name}`}
-                                onClick={e => {
-                                    e.stopPropagation();
-                                    setDelDialog({
-                                        show: true,
-                                        name: variant.name,
-                                    });
-                                }}
-                            >
-                                <Delete />
-                            </IconButton>
+                            <Tooltip title="Edit variant">
+                                <IconButton
+                                    data-testid={'VARIANT_EDIT_BUTTON'}
+                                    onClick={() => editVariant(variant.name)}
+                                >
+                                    <Edit />
+                                </IconButton>
+                            </Tooltip>
+                            <Tooltip title="Delete variant">
+                                <IconButton
+                                    data-testid={`VARIANT_DELETE_BUTTON_${variant.name}`}
+                                    onClick={e => {
+                                        e.stopPropagation();
+                                        setDelDialog({
+                                            show: true,
+                                            name: variant.name,
+                                        });
+                                    }}
+                                >
+                                    <Delete />
+                                </IconButton>
+                            </Tooltip>
                         </div>
                     </TableCell>
                 }
diff --git a/frontend/src/component/feature/FeatureView/FeatureView.tsx b/frontend/src/component/feature/FeatureView/FeatureView.tsx
index a6e9e87931..64cbd2f734 100644
--- a/frontend/src/component/feature/FeatureView/FeatureView.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureView.tsx
@@ -143,32 +143,36 @@ export const FeatureView = () => {
                                     data-loading
                                     component={Link}
                                     to={`/projects/${projectId}/features/${featureId}/strategies/copy`}
+                                    tooltip="Copy feature"
                                 >
-                                    <FileCopy titleAccess="Copy" />
+                                    <FileCopy />
                                 </PermissionIconButton>
                                 <PermissionIconButton
                                     permission={DELETE_FEATURE}
                                     projectId={projectId}
+                                    tooltip="Archive feature toggle"
                                     data-loading
                                     onClick={() => setShowDelDialog(true)}
                                 >
-                                    <Archive titleAccess="Archive feature toggle" />
+                                    <Archive />
                                 </PermissionIconButton>
                                 <PermissionIconButton
                                     onClick={() => setOpenStaleDialog(true)}
                                     permission={UPDATE_FEATURE}
                                     projectId={projectId}
+                                    tooltip="Toggle stale status"
                                     data-loading
                                 >
-                                    <WatchLater titleAccess="Toggle stale status" />
+                                    <WatchLater />
                                 </PermissionIconButton>
                                 <PermissionIconButton
                                     onClick={() => setOpenTagDialog(true)}
                                     permission={UPDATE_FEATURE}
                                     projectId={projectId}
+                                    tooltip="Add tag"
                                     data-loading
                                 >
-                                    <Label titleAccess="Add tag" />
+                                    <Label />
                                 </PermissionIconButton>
                             </div>
                         </div>
diff --git a/frontend/src/component/feature/StrategyConstraints/StrategyConstraintInputField/StrategyConstraintInputField.jsx b/frontend/src/component/feature/StrategyConstraints/StrategyConstraintInputField/StrategyConstraintInputField.jsx
index 68f9e31f81..9abe51765f 100644
--- a/frontend/src/component/feature/StrategyConstraints/StrategyConstraintInputField/StrategyConstraintInputField.jsx
+++ b/frontend/src/component/feature/StrategyConstraints/StrategyConstraintInputField/StrategyConstraintInputField.jsx
@@ -175,7 +175,7 @@ const StrategyConstraintInputField = ({
             </td>
             <td className={styles.tableCell}>
                 <IconButton onClick={removeConstraint}>
-                    <Delete />
+                    <Delete titleAccess="Remove constraint" />
                 </IconButton>
             </td>
         </tr>
diff --git a/frontend/src/component/feature/StrategyConstraints/StrategyConstraints.tsx b/frontend/src/component/feature/StrategyConstraints/StrategyConstraints.tsx
index 90eb49f12a..ec9f8a47a8 100644
--- a/frontend/src/component/feature/StrategyConstraints/StrategyConstraints.tsx
+++ b/frontend/src/component/feature/StrategyConstraints/StrategyConstraints.tsx
@@ -92,7 +92,10 @@ const StrategyConstraints: React.FC<IStrategyConstraintProps> = ({
                 <Typography variant="subtitle2">
                     {'Constraints '}
 
-                    <Info style={{ fontSize: '0.9rem', color: 'gray' }} />
+                    <Info
+                        style={{ fontSize: '0.9rem', color: 'gray' }}
+                        titleAccess="Help"
+                    />
                 </Typography>
             </Tooltip>
             <table style={{ margin: 0 }}>
diff --git a/frontend/src/component/feedback/FeedbackNPS/FeedbackNPS.tsx b/frontend/src/component/feedback/FeedbackNPS/FeedbackNPS.tsx
index 49402cf602..27e3ea6d20 100644
--- a/frontend/src/component/feedback/FeedbackNPS/FeedbackNPS.tsx
+++ b/frontend/src/component/feedback/FeedbackNPS/FeedbackNPS.tsx
@@ -1,5 +1,5 @@
 import { useContext, useState } from 'react';
-import { Button, IconButton } from '@material-ui/core';
+import { Button, IconButton, Tooltip } from '@material-ui/core';
 import classnames from 'classnames';
 import CloseIcon from '@material-ui/icons/Close';
 import { ReactComponent as Logo } from 'assets/icons/logoPlain.svg';
@@ -73,12 +73,14 @@ export const FeedbackNPS = ({ openUrl }: IFeedbackNPSProps) => {
                         commonStyles.contentSpacingY
                     )}
                 >
-                    <IconButton
-                        className={styles.close}
-                        onClick={() => setShowFeedback(false)}
-                    >
-                        <CloseIcon />
-                    </IconButton>
+                    <Tooltip title="Close">
+                        <IconButton
+                            className={styles.close}
+                            onClick={() => setShowFeedback(false)}
+                        >
+                            <CloseIcon />
+                        </IconButton>
+                    </Tooltip>
                     <Logo className={styles.logo} />
                     <ConditionallyRender
                         condition={answeredNotNow}
diff --git a/frontend/src/component/menu/Header/Header.tsx b/frontend/src/component/menu/Header/Header.tsx
index e594abe01e..9a86913e47 100644
--- a/frontend/src/component/menu/Header/Header.tsx
+++ b/frontend/src/component/menu/Header/Header.tsx
@@ -66,12 +66,14 @@ const Header = () => {
                     <ConditionallyRender
                         condition={smallScreen}
                         show={
-                            <IconButton
-                                className={styles.drawerButton}
-                                onClick={toggleDrawer}
-                            >
-                                <MenuIcon titleAccess="Menu" />
-                            </IconButton>
+                            <Tooltip title="Menu">
+                                <IconButton
+                                    className={styles.drawerButton}
+                                    onClick={toggleDrawer}
+                                >
+                                    <MenuIcon />
+                                </IconButton>
+                            </Tooltip>
                         }
                         elseShow={
                             <Link
@@ -136,26 +138,29 @@ const Header = () => {
                                         >
                                             <MenuBookIcon
                                                 className={styles.docsIcon}
-                                                titleAccess="Documentation"
                                             />
                                         </a>
                                     </Tooltip>
                                     <ConditionallyRender
                                         condition={admin}
                                         show={
-                                            <IconButton
-                                                onClick={e =>
-                                                    setAnchorEl(e.currentTarget)
-                                                }
-                                            >
-                                                <SettingsIcon
-                                                    className={styles.docsIcon}
-                                                    titleAccess="Settings"
-                                                />
-                                            </IconButton>
+                                            <Tooltip title="Settings">
+                                                <IconButton
+                                                    onClick={e =>
+                                                        setAnchorEl(
+                                                            e.currentTarget
+                                                        )
+                                                    }
+                                                >
+                                                    <SettingsIcon
+                                                        className={
+                                                            styles.docsIcon
+                                                        }
+                                                    />
+                                                </IconButton>
+                                            </Tooltip>
                                         }
                                     />
-
                                     <NavigationMenu
                                         id="admin-navigation"
                                         options={filteredMainRoutes.adminRoutes}
@@ -166,7 +171,6 @@ const Header = () => {
                                 </>
                             }
                         />
-
                         <UserProfile />
                     </div>
                 </Container>
diff --git a/frontend/src/component/project/Project/Project.tsx b/frontend/src/component/project/Project/Project.tsx
index 7d6e7fca7c..486845284a 100644
--- a/frontend/src/component/project/Project/Project.tsx
+++ b/frontend/src/component/project/Project/Project.tsx
@@ -128,6 +128,7 @@ const Project = () => {
                             permission={UPDATE_PROJECT}
                             projectId={project?.id}
                             onClick={() => history.push(`/projects/${id}/edit`)}
+                            tooltip="Edit project"
                             data-loading
                         >
                             <Edit />
diff --git a/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.tsx b/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.tsx
index 515ff4471b..8fc563217d 100644
--- a/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.tsx
+++ b/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.tsx
@@ -56,6 +56,7 @@ const ProjectInfo = ({
             className={permissionButtonClass}
             data-loading
             to={`/projects/${id}/edit`}
+            tooltip="Edit description"
         >
             <Edit />
         </PermissionIconButton>
@@ -82,7 +83,9 @@ const ProjectInfo = ({
                                     elseShow={
                                         <Accordion className={styles.accordion}>
                                             <AccordionSummary
-                                                expandIcon={<ExpandMore />}
+                                                expandIcon={
+                                                    <ExpandMore titleAccess="Toggle" />
+                                                }
                                                 className={styles.accordionBody}
                                             >
                                                 Description
diff --git a/frontend/src/component/project/ProjectAccess/ProjectAccessList/ProjectAccessListItem/ProjectAccessListItem.tsx b/frontend/src/component/project/ProjectAccess/ProjectAccessList/ProjectAccessListItem/ProjectAccessListItem.tsx
index 94381f8e62..571a67c3db 100644
--- a/frontend/src/component/project/ProjectAccess/ProjectAccessList/ProjectAccessListItem/ProjectAccessListItem.tsx
+++ b/frontend/src/component/project/ProjectAccess/ProjectAccessList/ProjectAccessListItem/ProjectAccessListItem.tsx
@@ -71,10 +71,9 @@ export const ProjectAccessListItem = ({
                     projectId={projectId}
                     className={styles.iconButton}
                     edge="end"
-                    aria-label="delete"
-                    title="Remove access"
                     onClick={() => handleRemoveAccess(user)}
                     disabled={access.users.length === 1}
+                    tooltip="Remove access"
                 >
                     <Delete />
                 </PermissionIconButton>
diff --git a/frontend/src/component/project/ProjectCard/ProjectCard.tsx b/frontend/src/component/project/ProjectCard/ProjectCard.tsx
index f5aa8c949e..e0e2e01baa 100644
--- a/frontend/src/component/project/ProjectCard/ProjectCard.tsx
+++ b/frontend/src/component/project/ProjectCard/ProjectCard.tsx
@@ -65,7 +65,7 @@ export const ProjectCard = ({
     return (
         <Card className={styles.projectCard} onMouseEnter={onHover}>
             <div className={styles.header} data-loading>
-                <div className={styles.title}>{name}</div>
+                <h2 className={styles.title}>{name}</h2>
 
                 <PermissionIconButton
                     permission={UPDATE_PROJECT}
@@ -73,6 +73,7 @@ export const ProjectCard = ({
                     className={styles.actionsBtn}
                     data-loading
                     onClick={handleClick}
+                    tooltip="Menu"
                 >
                     <MoreVertIcon />
                 </PermissionIconButton>
diff --git a/frontend/src/component/segments/SegmentList/SegmentListItem/SegmentListItem.tsx b/frontend/src/component/segments/SegmentList/SegmentListItem/SegmentListItem.tsx
index 587cbe7fe7..0cd9db65f6 100644
--- a/frontend/src/component/segments/SegmentList/SegmentListItem/SegmentListItem.tsx
+++ b/frontend/src/component/segments/SegmentList/SegmentListItem/SegmentListItem.tsx
@@ -65,12 +65,12 @@ export const SegmentListItem = ({
                         push(`/segments/edit/${id}`);
                     }}
                     permission={UPDATE_SEGMENT}
+                    tooltip="Edit segment"
                 >
-                    <Edit titleAccess="Edit segment" />
+                    <Edit />
                 </PermissionIconButton>
                 <PermissionIconButton
                     data-loading
-                    aria-label="Remove segment"
                     onClick={() => {
                         setCurrentSegment({
                             id,
@@ -83,6 +83,7 @@ export const SegmentListItem = ({
                         setDelDialog(true);
                     }}
                     permission={ADMIN}
+                    tooltip="Remove segment"
                     data-testid={`${SEGMENT_DELETE_BTN_ID}_${name}`}
                 >
                     <Delete />
diff --git a/frontend/src/component/strategies/StrategiesList/StrategiesList.tsx b/frontend/src/component/strategies/StrategiesList/StrategiesList.tsx
index ba2e725650..7eec56a2ee 100644
--- a/frontend/src/component/strategies/StrategiesList/StrategiesList.tsx
+++ b/frontend/src/component/strategies/StrategiesList/StrategiesList.tsx
@@ -72,6 +72,7 @@ export const StrategiesList = () => {
                             data-testid={ADD_NEW_STRATEGY_ID}
                             onClick={() => history.push('/strategies/create')}
                             permission={CREATE_STRATEGY}
+                            tooltip="New strategy"
                         >
                             <Add />
                         </PermissionIconButton>
@@ -162,16 +163,13 @@ export const StrategiesList = () => {
     };
 
     const reactivateButton = (strategy: ICustomStrategy) => (
-        <Tooltip title="Reactivate activation strategy">
-            <div>
-                <PermissionIconButton
-                    onClick={() => onReactivateStrategy(strategy)}
-                    permission={UPDATE_STRATEGY}
-                >
-                    <VisibilityOff titleAccess="Reactivate" />
-                </PermissionIconButton>
-            </div>
-        </Tooltip>
+        <PermissionIconButton
+            onClick={() => onReactivateStrategy(strategy)}
+            permission={UPDATE_STRATEGY}
+            tooltip="Reactivate activation strategy"
+        >
+            <VisibilityOff />
+        </PermissionIconButton>
     );
 
     const deprecateButton = (strategy: ICustomStrategy) => (
@@ -191,8 +189,9 @@ export const StrategiesList = () => {
                     <PermissionIconButton
                         onClick={() => onDeprecateStrategy(strategy)}
                         permission={UPDATE_STRATEGY}
+                        tooltip="Deprecate strategy"
                     >
-                        <Visibility titleAccess="Deprecate strategy" />
+                        <Visibility />
                     </PermissionIconButton>
                 </div>
             }
@@ -208,8 +207,9 @@ export const StrategiesList = () => {
                         history.push(`/strategies/${strategy?.name}/edit`)
                     }
                     permission={UPDATE_STRATEGY}
+                    tooltip="Edit strategy"
                 >
-                    <Edit titleAccess="Edit strategy" />
+                    <Edit />
                 </PermissionIconButton>
             }
             elseShow={
@@ -231,6 +231,7 @@ export const StrategiesList = () => {
                 <PermissionIconButton
                     onClick={() => onDeleteStrategy(strategy)}
                     permission={DELETE_STRATEGY}
+                    tooltip="Delete strategy"
                 >
                     <Delete />
                 </PermissionIconButton>
@@ -239,7 +240,7 @@ export const StrategiesList = () => {
                 <Tooltip title="You cannot delete a built-in strategy">
                     <div>
                         <IconButton disabled>
-                            <Delete />
+                            <Delete titleAccess="Delete strategy" />
                         </IconButton>
                     </div>
                 </Tooltip>
diff --git a/frontend/src/component/strategies/StrategiesList/__snapshots__/StrategiesList.test.jsx.snap b/frontend/src/component/strategies/StrategiesList/__snapshots__/StrategiesList.test.jsx.snap
index 8cce4d7ae1..feaeb1ce04 100644
--- a/frontend/src/component/strategies/StrategiesList/__snapshots__/StrategiesList.test.jsx.snap
+++ b/frontend/src/component/strategies/StrategiesList/__snapshots__/StrategiesList.test.jsx.snap
@@ -30,17 +30,10 @@ exports[`renders correctly with one strategy 1`] = `
         className="makeStyles-headerActions-8"
       >
         <span
-          aria-describedby={null}
-          className=""
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseLeave={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-          onTouchStart={[Function]}
-          title=""
+          id="useId-0"
         >
           <button
+            aria-describedby="useId-0"
             className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary"
             data-testid="ADD_NEW_STRATEGY_ID"
             disabled={false}
@@ -129,15 +122,17 @@ exports[`renders correctly with one strategy 1`] = `
           <span
             aria-describedby={null}
             className=""
+            id="useId-1"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseLeave={[Function]}
             onMouseOver={[Function]}
             onTouchEnd={[Function]}
             onTouchStart={[Function]}
-            title=""
+            title="Deprecate strategy"
           >
             <button
+              aria-labelledby="useId-1"
               className="MuiButtonBase-root MuiIconButton-root"
               disabled={false}
               onBlur={[Function]}
@@ -159,17 +154,14 @@ exports[`renders correctly with one strategy 1`] = `
                 className="MuiIconButton-label"
               >
                 <svg
+                  aria-hidden={true}
                   className="MuiSvgIcon-root"
                   focusable="false"
-                  role="img"
                   viewBox="0 0 24 24"
                 >
                   <path
                     d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
                   />
-                  <title>
-                    Deprecate strategy
-                  </title>
                 </svg>
               </span>
               <span
@@ -257,14 +249,17 @@ exports[`renders correctly with one strategy 1`] = `
               className="MuiIconButton-label"
             >
               <svg
-                aria-hidden={true}
                 className="MuiSvgIcon-root"
                 focusable="false"
+                role="img"
                 viewBox="0 0 24 24"
               >
                 <path
                   d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                 />
+                <title>
+                  Delete strategy
+                </title>
               </svg>
             </span>
           </button>
@@ -305,17 +300,10 @@ exports[`renders correctly with one strategy without permissions 1`] = `
         className="makeStyles-headerActions-8"
       >
         <span
-          aria-describedby={null}
-          className=""
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseLeave={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-          onTouchStart={[Function]}
-          title=""
+          id="useId-2"
         >
           <button
+            aria-describedby="useId-2"
             className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary"
             data-testid="ADD_NEW_STRATEGY_ID"
             disabled={false}
@@ -404,15 +392,17 @@ exports[`renders correctly with one strategy without permissions 1`] = `
           <span
             aria-describedby={null}
             className=""
+            id="useId-3"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseLeave={[Function]}
             onMouseOver={[Function]}
             onTouchEnd={[Function]}
             onTouchStart={[Function]}
-            title=""
+            title="Deprecate strategy"
           >
             <button
+              aria-labelledby="useId-3"
               className="MuiButtonBase-root MuiIconButton-root"
               disabled={false}
               onBlur={[Function]}
@@ -434,17 +424,14 @@ exports[`renders correctly with one strategy without permissions 1`] = `
                 className="MuiIconButton-label"
               >
                 <svg
+                  aria-hidden={true}
                   className="MuiSvgIcon-root"
                   focusable="false"
-                  role="img"
                   viewBox="0 0 24 24"
                 >
                   <path
                     d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
                   />
-                  <title>
-                    Deprecate strategy
-                  </title>
                 </svg>
               </span>
               <span
@@ -532,14 +519,17 @@ exports[`renders correctly with one strategy without permissions 1`] = `
               className="MuiIconButton-label"
             >
               <svg
-                aria-hidden={true}
                 className="MuiSvgIcon-root"
                 focusable="false"
+                role="img"
                 viewBox="0 0 24 24"
               >
                 <path
                   d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                 />
+                <title>
+                  Delete strategy
+                </title>
               </svg>
             </span>
           </button>
diff --git a/frontend/src/component/strategies/StrategyForm/StrategyParameters/StrategyParameter/StrategyParameter.tsx b/frontend/src/component/strategies/StrategyForm/StrategyParameters/StrategyParameter/StrategyParameter.tsx
index 0711ea8260..1e250cfc88 100644
--- a/frontend/src/component/strategies/StrategyForm/StrategyParameters/StrategyParameter/StrategyParameter.tsx
+++ b/frontend/src/component/strategies/StrategyForm/StrategyParameters/StrategyParameter/StrategyParameter.tsx
@@ -1,4 +1,9 @@
-import { Checkbox, FormControlLabel, IconButton } from '@material-ui/core';
+import {
+    Checkbox,
+    FormControlLabel,
+    IconButton,
+    Tooltip,
+} from '@material-ui/core';
 import { Delete } from '@material-ui/icons';
 import { useStyles } from './StrategyParameter.styles';
 import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
@@ -74,7 +79,7 @@ export const StrategyParameter = ({
                 condition={index === 0}
                 show={
                     <p className={styles.input}>
-                        The parameters define how the strategy will look like.
+                        The parameters define what the strategy will look like.
                     </p>
                 }
             />
@@ -88,13 +93,15 @@ export const StrategyParameter = ({
                     error={Boolean(errors?.[`paramName${index}`])}
                     errorText={errors?.[`paramName${index}`]}
                 />
-                <IconButton
-                    onClick={() => {
-                        setParams(params.filter((e, i) => i !== index));
-                    }}
-                >
-                    <Delete titleAccess="Delete" />
-                </IconButton>
+                <Tooltip title="Remove parameter">
+                    <IconButton
+                        onClick={() => {
+                            setParams(params.filter((e, i) => i !== index));
+                        }}
+                    >
+                        <Delete />
+                    </IconButton>
+                </Tooltip>
             </div>
             <GeneralSelect
                 label="Type*"
diff --git a/frontend/src/component/strategies/StrategyView/StrategyDetails/StrategyDetails.tsx b/frontend/src/component/strategies/StrategyView/StrategyDetails/StrategyDetails.tsx
index 944f772919..1f6e84b84c 100644
--- a/frontend/src/component/strategies/StrategyView/StrategyDetails/StrategyDetails.tsx
+++ b/frontend/src/component/strategies/StrategyView/StrategyDetails/StrategyDetails.tsx
@@ -34,18 +34,18 @@ export const StrategyDetails = ({
                     <ConditionallyRender
                         condition={required}
                         show={
-                            <Tooltip title="Required">
-                                <ListItemAvatar>
-                                    <Add />
-                                </ListItemAvatar>
-                            </Tooltip>
+                            <ListItemAvatar>
+                                <Tooltip title="Required parameter">
+                                    <Add aria-hidden={false} />
+                                </Tooltip>
+                            </ListItemAvatar>
                         }
                         elseShow={
-                            <Tooltip title="Optional">
-                                <ListItemAvatar>
-                                    <RadioButtonChecked />
-                                </ListItemAvatar>
-                            </Tooltip>
+                            <ListItemAvatar>
+                                <Tooltip title="Optional parameter">
+                                    <RadioButtonChecked aria-hidden={false} />
+                                </Tooltip>
+                            </ListItemAvatar>
                         }
                     />
                     <ListItemText
diff --git a/frontend/src/component/strategies/StrategyView/StrategyView.tsx b/frontend/src/component/strategies/StrategyView/StrategyView.tsx
index 438c13b465..2996a8b656 100644
--- a/frontend/src/component/strategies/StrategyView/StrategyView.tsx
+++ b/frontend/src/component/strategies/StrategyView/StrategyView.tsx
@@ -43,8 +43,9 @@ export const StrategyView = () => {
                                     permission={UPDATE_STRATEGY}
                                     data-loading
                                     onClick={handleEdit}
+                                    tooltip="Edit strategy"
                                 >
-                                    <Edit titleAccess="Edit strategy" />
+                                    <Edit />
                                 </PermissionIconButton>
                             }
                         />
diff --git a/frontend/src/component/strategies/TogglesLinkList/TogglesLinkList.tsx b/frontend/src/component/strategies/TogglesLinkList/TogglesLinkList.tsx
index 3e0c3a4b87..c7a7eb5d13 100644
--- a/frontend/src/component/strategies/TogglesLinkList/TogglesLinkList.tsx
+++ b/frontend/src/component/strategies/TogglesLinkList/TogglesLinkList.tsx
@@ -19,30 +19,33 @@ export const TogglesLinkList = ({ toggles }: ITogglesLinkListProps) => (
     <List style={{ textAlign: 'left' }} className={styles.truncate}>
         <ConditionallyRender
             condition={toggles.length > 0}
-            show={
-                <>
-                    {toggles.map(({ name, description = '-', enabled }) => (
-                        <ListItem key={name}>
-                            <Tooltip title={enabled ? 'Enabled' : 'Disabled'}>
-                                <ListItemAvatar>
-                                    {enabled ? <PlayArrow /> : <Pause />}
-                                </ListItemAvatar>
-                            </Tooltip>
-                            <ListItemText
-                                primary={
-                                    <Link
-                                        key={name}
-                                        to={`/features/view/${name}`}
-                                    >
-                                        {name}
-                                    </Link>
-                                }
-                                secondary={description}
-                            />
-                        </ListItem>
-                    ))}
-                </>
-            }
+            show={toggles.map(({ name, description = '-', enabled }) => (
+                <ListItem key={name}>
+                    <ListItemAvatar>
+                        <ConditionallyRender
+                            condition={Boolean(enabled)}
+                            show={
+                                <Tooltip title="Enabled">
+                                    <PlayArrow aria-hidden={false} />
+                                </Tooltip>
+                            }
+                            elseShow={
+                                <Tooltip title="Disabled">
+                                    <Pause aria-hidden={false} />
+                                </Tooltip>
+                            }
+                        />
+                    </ListItemAvatar>
+                    <ListItemText
+                        primary={
+                            <Link key={name} to={`/features/view/${name}`}>
+                                {name}
+                            </Link>
+                        }
+                        secondary={description}
+                    />
+                </ListItem>
+            ))}
         />
     </List>
 );
diff --git a/frontend/src/component/tags/TagTypeList/TagTypeList.tsx b/frontend/src/component/tags/TagTypeList/TagTypeList.tsx
index b0c3ecc511..9c6ea8199a 100644
--- a/frontend/src/component/tags/TagTypeList/TagTypeList.tsx
+++ b/frontend/src/component/tags/TagTypeList/TagTypeList.tsx
@@ -69,7 +69,6 @@ export const TagTypeList = () => {
                             show={
                                 <Tooltip title="Add tag type">
                                     <IconButton
-                                        aria-label="add tag type"
                                         onClick={() =>
                                             history.push('/tag-types/create')
                                         }
@@ -129,9 +128,10 @@ export const TagTypeList = () => {
                 <PermissionIconButton
                     permission={UPDATE_TAG_TYPE}
                     component={Link}
+                    tooltip="Edit tag type"
                     to={`/tag-types/edit/${tagType.name}`}
                 >
-                    <Edit className={styles.icon} titleAccess="Edit tag type" />
+                    <Edit className={styles.icon} />
                 </PermissionIconButton>
                 <ConditionallyRender
                     condition={hasAccess(DELETE_TAG_TYPE)}
diff --git a/frontend/src/hooks/api/actions/useApi/useApi.ts b/frontend/src/hooks/api/actions/useApi/useApi.ts
index 3aa20a2011..48e0274a50 100644
--- a/frontend/src/hooks/api/actions/useApi/useApi.ts
+++ b/frontend/src/hooks/api/actions/useApi/useApi.ts
@@ -14,6 +14,7 @@ import {
     NotFoundError,
 } from 'utils/apiUtils';
 import { formatApiPath } from 'utils/formatPath';
+import { ACCESS_DENIED_TEXT } from 'utils/formatAccessText';
 
 type ApiErrorHandler = (
     setErrors: Dispatch<SetStateAction<{}>>,
@@ -125,8 +126,7 @@ const useAPI = ({
             } else {
                 setErrors(prev => ({
                     ...prev,
-                    unauthorized:
-                        'You are not authorized to perform this operation',
+                    unauthorized: ACCESS_DENIED_TEXT,
                 }));
             }
 
diff --git a/frontend/src/hooks/useId.test.ts b/frontend/src/hooks/useId.test.ts
new file mode 100644
index 0000000000..05b2d5bf50
--- /dev/null
+++ b/frontend/src/hooks/useId.test.ts
@@ -0,0 +1,40 @@
+import { useId } from 'hooks/useId';
+import { renderHook } from '@testing-library/react-hooks';
+
+test('useId', () => {
+    const { result, rerender } = renderHook(() => useId());
+
+    rerender();
+    rerender();
+
+    expect(result).toMatchInlineSnapshot(`
+        Object {
+          "all": Array [
+            "useId-0",
+            "useId-0",
+            "useId-0",
+          ],
+          "current": "useId-0",
+          "error": undefined,
+        }
+    `);
+});
+
+test('useId prefix', () => {
+    const { result, rerender } = renderHook(() => useId('prefix'));
+
+    rerender();
+    rerender();
+
+    expect(result).toMatchInlineSnapshot(`
+        Object {
+          "all": Array [
+            "prefix-1",
+            "prefix-1",
+            "prefix-1",
+          ],
+          "current": "prefix-1",
+          "error": undefined,
+        }
+    `);
+});
diff --git a/frontend/src/hooks/useId.ts b/frontend/src/hooks/useId.ts
new file mode 100644
index 0000000000..eb8a1ab523
--- /dev/null
+++ b/frontend/src/hooks/useId.ts
@@ -0,0 +1,10 @@
+import { useMemo } from 'react';
+
+// Generate a globally unique ID that is stable across renders.
+export const useId = (prefix = 'useId'): string => {
+    return useMemo(() => {
+        return `${prefix}-${counter++}`;
+    }, [prefix]);
+};
+
+let counter = 0;
diff --git a/frontend/src/utils/formatAccessText.test.ts b/frontend/src/utils/formatAccessText.test.ts
new file mode 100644
index 0000000000..f269d82584
--- /dev/null
+++ b/frontend/src/utils/formatAccessText.test.ts
@@ -0,0 +1,11 @@
+import { formatAccessText } from 'utils/formatAccessText';
+
+test('formatAccessText with access', () => {
+    expect(formatAccessText(true)).toEqual(undefined);
+    expect(formatAccessText(true, 'Foo')).toEqual('Foo');
+});
+
+test('formatAccessText without access', () => {
+    expect(formatAccessText(false)).toEqual('Access denied');
+    expect(formatAccessText(false, 'Foo')).toEqual(`Foo (Access denied)`);
+});
diff --git a/frontend/src/utils/formatAccessText.ts b/frontend/src/utils/formatAccessText.ts
new file mode 100644
index 0000000000..d93c5743b5
--- /dev/null
+++ b/frontend/src/utils/formatAccessText.ts
@@ -0,0 +1,16 @@
+export const ACCESS_DENIED_TEXT = 'Access denied';
+
+export const formatAccessText = (
+    hasAccess: boolean,
+    hasAccessText?: string
+): string | undefined => {
+    if (hasAccess) {
+        return hasAccessText;
+    }
+
+    if (hasAccessText) {
+        return `${hasAccessText} (${ACCESS_DENIED_TEXT})`;
+    }
+
+    return ACCESS_DENIED_TEXT;
+};