1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-26 13:48:33 +02:00

refactor: fix missing IconButton labels (#1038)

* refactor: fix missing IconButton labels

* refactor: fix percentage text color contrast
This commit is contained in:
olav 2022-05-27 13:12:03 +02:00 committed by GitHub
parent 2cd9e992fe
commit ae012d62e6
3 changed files with 35 additions and 2 deletions

View File

@ -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}

View File

@ -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,
},

View File

@ -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]}