From ae012d62e633b062764ba7ee54ac8e9920042a93 Mon Sep 17 00:00:00 2001
From: olav <mail@olav.io>
Date: Fri, 27 May 2022 13:12:03 +0200
Subject: [PATCH] refactor: fix missing IconButton labels (#1038)

* refactor: fix missing IconButton labels

* refactor: fix percentage text color contrast
---
 .../PermissionIconButton.tsx                  |  5 +++-
 ...eatureOverviewEnvironmentMetrics.styles.ts |  2 +-
 .../__snapshots__/TagTypeList.test.tsx.snap   | 30 +++++++++++++++++++
 3 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/frontend/src/component/common/PermissionIconButton/PermissionIconButton.tsx b/frontend/src/component/common/PermissionIconButton/PermissionIconButton.tsx
index 2fd5342e6b..0728efb26e 100644
--- a/frontend/src/component/common/PermissionIconButton/PermissionIconButton.tsx
+++ b/frontend/src/component/common/PermissionIconButton/PermissionIconButton.tsx
@@ -7,6 +7,7 @@ import {
     ITooltipResolverProps,
 } from 'component/common/TooltipResolver/TooltipResolver';
 import { formatAccessText } from 'utils/formatAccessText';
+import { useId } from 'hooks/useId';
 
 interface IPermissionIconButtonProps {
     permission: string;
@@ -41,6 +42,7 @@ const PermissionIconButton = ({
     ...rest
 }: IButtonProps | ILinkProps) => {
     const { hasAccess } = useContext(AccessContext);
+    const id = useId();
     let access;
 
     if (projectId && environmentId) {
@@ -57,10 +59,11 @@ const PermissionIconButton = ({
             title={formatAccessText(access, tooltipProps?.title)}
             arrow
         >
-            <div>
+            <div id={id} role="tooltip">
                 <IconButton
                     {...rest}
                     disabled={!access || disabled}
+                    aria-labelledby={id}
                     size="large"
                 >
                     {children}
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.styles.ts b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.styles.ts
index 7a1c3e54c1..2d6af9211d 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.styles.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.styles.ts
@@ -28,7 +28,7 @@ export const useStyles = makeStyles()(theme => ({
         },
     },
     percentage: {
-        color: theme.palette.primary.light,
+        color: theme.palette.primary.main,
         textAlign: 'right',
         fontSize: theme.fontSizes.subHeader,
     },
diff --git a/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap b/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap
index c7434a5a4f..dae6e8d321 100644
--- a/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap
+++ b/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap
@@ -305,14 +305,17 @@ exports[`renders an empty list correctly 1`] = `
                     aria-labelledby={null}
                     className=""
                     data-mui-internal-clone-element={true}
+                    id="useId-1"
                     onBlur={[Function]}
                     onFocus={[Function]}
                     onMouseLeave={[Function]}
                     onMouseOver={[Function]}
                     onTouchEnd={[Function]}
                     onTouchStart={[Function]}
+                    role="tooltip"
                   >
                     <button
+                      aria-labelledby="useId-1"
                       className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
                       disabled={false}
                       onBlur={[Function]}
@@ -352,14 +355,17 @@ exports[`renders an empty list correctly 1`] = `
                     aria-labelledby={null}
                     className=""
                     data-mui-internal-clone-element={true}
+                    id="useId-2"
                     onBlur={[Function]}
                     onFocus={[Function]}
                     onMouseLeave={[Function]}
                     onMouseOver={[Function]}
                     onTouchEnd={[Function]}
                     onTouchStart={[Function]}
+                    role="tooltip"
                   >
                     <button
+                      aria-labelledby="useId-2"
                       className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
                       disabled={false}
                       onBlur={[Function]}
@@ -469,14 +475,17 @@ exports[`renders an empty list correctly 1`] = `
                     aria-labelledby={null}
                     className=""
                     data-mui-internal-clone-element={true}
+                    id="useId-3"
                     onBlur={[Function]}
                     onFocus={[Function]}
                     onMouseLeave={[Function]}
                     onMouseOver={[Function]}
                     onTouchEnd={[Function]}
                     onTouchStart={[Function]}
+                    role="tooltip"
                   >
                     <button
+                      aria-labelledby="useId-3"
                       className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
                       disabled={false}
                       onBlur={[Function]}
@@ -516,14 +525,17 @@ exports[`renders an empty list correctly 1`] = `
                     aria-labelledby={null}
                     className=""
                     data-mui-internal-clone-element={true}
+                    id="useId-4"
                     onBlur={[Function]}
                     onFocus={[Function]}
                     onMouseLeave={[Function]}
                     onMouseOver={[Function]}
                     onTouchEnd={[Function]}
                     onTouchStart={[Function]}
+                    role="tooltip"
                   >
                     <button
+                      aria-labelledby="useId-4"
                       className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
                       disabled={false}
                       onBlur={[Function]}
@@ -633,14 +645,17 @@ exports[`renders an empty list correctly 1`] = `
                     aria-labelledby={null}
                     className=""
                     data-mui-internal-clone-element={true}
+                    id="useId-5"
                     onBlur={[Function]}
                     onFocus={[Function]}
                     onMouseLeave={[Function]}
                     onMouseOver={[Function]}
                     onTouchEnd={[Function]}
                     onTouchStart={[Function]}
+                    role="tooltip"
                   >
                     <button
+                      aria-labelledby="useId-5"
                       className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
                       disabled={false}
                       onBlur={[Function]}
@@ -680,14 +695,17 @@ exports[`renders an empty list correctly 1`] = `
                     aria-labelledby={null}
                     className=""
                     data-mui-internal-clone-element={true}
+                    id="useId-6"
                     onBlur={[Function]}
                     onFocus={[Function]}
                     onMouseLeave={[Function]}
                     onMouseOver={[Function]}
                     onTouchEnd={[Function]}
                     onTouchStart={[Function]}
+                    role="tooltip"
                   >
                     <button
+                      aria-labelledby="useId-6"
                       className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
                       disabled={false}
                       onBlur={[Function]}
@@ -797,14 +815,17 @@ exports[`renders an empty list correctly 1`] = `
                     aria-labelledby={null}
                     className=""
                     data-mui-internal-clone-element={true}
+                    id="useId-7"
                     onBlur={[Function]}
                     onFocus={[Function]}
                     onMouseLeave={[Function]}
                     onMouseOver={[Function]}
                     onTouchEnd={[Function]}
                     onTouchStart={[Function]}
+                    role="tooltip"
                   >
                     <button
+                      aria-labelledby="useId-7"
                       className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
                       disabled={false}
                       onBlur={[Function]}
@@ -844,14 +865,17 @@ exports[`renders an empty list correctly 1`] = `
                     aria-labelledby={null}
                     className=""
                     data-mui-internal-clone-element={true}
+                    id="useId-8"
                     onBlur={[Function]}
                     onFocus={[Function]}
                     onMouseLeave={[Function]}
                     onMouseOver={[Function]}
                     onTouchEnd={[Function]}
                     onTouchStart={[Function]}
+                    role="tooltip"
                   >
                     <button
+                      aria-labelledby="useId-8"
                       className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
                       disabled={false}
                       onBlur={[Function]}
@@ -961,14 +985,17 @@ exports[`renders an empty list correctly 1`] = `
                     aria-labelledby={null}
                     className=""
                     data-mui-internal-clone-element={true}
+                    id="useId-9"
                     onBlur={[Function]}
                     onFocus={[Function]}
                     onMouseLeave={[Function]}
                     onMouseOver={[Function]}
                     onTouchEnd={[Function]}
                     onTouchStart={[Function]}
+                    role="tooltip"
                   >
                     <button
+                      aria-labelledby="useId-9"
                       className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
                       disabled={false}
                       onBlur={[Function]}
@@ -1008,14 +1035,17 @@ exports[`renders an empty list correctly 1`] = `
                     aria-labelledby={null}
                     className=""
                     data-mui-internal-clone-element={true}
+                    id="useId-10"
                     onBlur={[Function]}
                     onFocus={[Function]}
                     onMouseLeave={[Function]}
                     onMouseOver={[Function]}
                     onTouchEnd={[Function]}
                     onTouchStart={[Function]}
+                    role="tooltip"
                   >
                     <button
+                      aria-labelledby="useId-10"
                       className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
                       disabled={false}
                       onBlur={[Function]}