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:
parent
2cd9e992fe
commit
ae012d62e6
@ -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}
|
||||
|
@ -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,
|
||||
},
|
||||
|
@ -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]}
|
||||
|
Loading…
Reference in New Issue
Block a user