mirror of
https://github.com/Unleash/unleash.git
synced 2025-08-04 13:48:56 +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,
|
ITooltipResolverProps,
|
||||||
} from 'component/common/TooltipResolver/TooltipResolver';
|
} from 'component/common/TooltipResolver/TooltipResolver';
|
||||||
import { formatAccessText } from 'utils/formatAccessText';
|
import { formatAccessText } from 'utils/formatAccessText';
|
||||||
|
import { useId } from 'hooks/useId';
|
||||||
|
|
||||||
interface IPermissionIconButtonProps {
|
interface IPermissionIconButtonProps {
|
||||||
permission: string;
|
permission: string;
|
||||||
@ -41,6 +42,7 @@ const PermissionIconButton = ({
|
|||||||
...rest
|
...rest
|
||||||
}: IButtonProps | ILinkProps) => {
|
}: IButtonProps | ILinkProps) => {
|
||||||
const { hasAccess } = useContext(AccessContext);
|
const { hasAccess } = useContext(AccessContext);
|
||||||
|
const id = useId();
|
||||||
let access;
|
let access;
|
||||||
|
|
||||||
if (projectId && environmentId) {
|
if (projectId && environmentId) {
|
||||||
@ -57,10 +59,11 @@ const PermissionIconButton = ({
|
|||||||
title={formatAccessText(access, tooltipProps?.title)}
|
title={formatAccessText(access, tooltipProps?.title)}
|
||||||
arrow
|
arrow
|
||||||
>
|
>
|
||||||
<div>
|
<div id={id} role="tooltip">
|
||||||
<IconButton
|
<IconButton
|
||||||
{...rest}
|
{...rest}
|
||||||
disabled={!access || disabled}
|
disabled={!access || disabled}
|
||||||
|
aria-labelledby={id}
|
||||||
size="large"
|
size="large"
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
|
@ -28,7 +28,7 @@ export const useStyles = makeStyles()(theme => ({
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
percentage: {
|
percentage: {
|
||||||
color: theme.palette.primary.light,
|
color: theme.palette.primary.main,
|
||||||
textAlign: 'right',
|
textAlign: 'right',
|
||||||
fontSize: theme.fontSizes.subHeader,
|
fontSize: theme.fontSizes.subHeader,
|
||||||
},
|
},
|
||||||
|
@ -305,14 +305,17 @@ exports[`renders an empty list correctly 1`] = `
|
|||||||
aria-labelledby={null}
|
aria-labelledby={null}
|
||||||
className=""
|
className=""
|
||||||
data-mui-internal-clone-element={true}
|
data-mui-internal-clone-element={true}
|
||||||
|
id="useId-1"
|
||||||
onBlur={[Function]}
|
onBlur={[Function]}
|
||||||
onFocus={[Function]}
|
onFocus={[Function]}
|
||||||
onMouseLeave={[Function]}
|
onMouseLeave={[Function]}
|
||||||
onMouseOver={[Function]}
|
onMouseOver={[Function]}
|
||||||
onTouchEnd={[Function]}
|
onTouchEnd={[Function]}
|
||||||
onTouchStart={[Function]}
|
onTouchStart={[Function]}
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
|
aria-labelledby="useId-1"
|
||||||
className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
|
className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
|
||||||
disabled={false}
|
disabled={false}
|
||||||
onBlur={[Function]}
|
onBlur={[Function]}
|
||||||
@ -352,14 +355,17 @@ exports[`renders an empty list correctly 1`] = `
|
|||||||
aria-labelledby={null}
|
aria-labelledby={null}
|
||||||
className=""
|
className=""
|
||||||
data-mui-internal-clone-element={true}
|
data-mui-internal-clone-element={true}
|
||||||
|
id="useId-2"
|
||||||
onBlur={[Function]}
|
onBlur={[Function]}
|
||||||
onFocus={[Function]}
|
onFocus={[Function]}
|
||||||
onMouseLeave={[Function]}
|
onMouseLeave={[Function]}
|
||||||
onMouseOver={[Function]}
|
onMouseOver={[Function]}
|
||||||
onTouchEnd={[Function]}
|
onTouchEnd={[Function]}
|
||||||
onTouchStart={[Function]}
|
onTouchStart={[Function]}
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
|
aria-labelledby="useId-2"
|
||||||
className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
|
className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
|
||||||
disabled={false}
|
disabled={false}
|
||||||
onBlur={[Function]}
|
onBlur={[Function]}
|
||||||
@ -469,14 +475,17 @@ exports[`renders an empty list correctly 1`] = `
|
|||||||
aria-labelledby={null}
|
aria-labelledby={null}
|
||||||
className=""
|
className=""
|
||||||
data-mui-internal-clone-element={true}
|
data-mui-internal-clone-element={true}
|
||||||
|
id="useId-3"
|
||||||
onBlur={[Function]}
|
onBlur={[Function]}
|
||||||
onFocus={[Function]}
|
onFocus={[Function]}
|
||||||
onMouseLeave={[Function]}
|
onMouseLeave={[Function]}
|
||||||
onMouseOver={[Function]}
|
onMouseOver={[Function]}
|
||||||
onTouchEnd={[Function]}
|
onTouchEnd={[Function]}
|
||||||
onTouchStart={[Function]}
|
onTouchStart={[Function]}
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
|
aria-labelledby="useId-3"
|
||||||
className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
|
className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
|
||||||
disabled={false}
|
disabled={false}
|
||||||
onBlur={[Function]}
|
onBlur={[Function]}
|
||||||
@ -516,14 +525,17 @@ exports[`renders an empty list correctly 1`] = `
|
|||||||
aria-labelledby={null}
|
aria-labelledby={null}
|
||||||
className=""
|
className=""
|
||||||
data-mui-internal-clone-element={true}
|
data-mui-internal-clone-element={true}
|
||||||
|
id="useId-4"
|
||||||
onBlur={[Function]}
|
onBlur={[Function]}
|
||||||
onFocus={[Function]}
|
onFocus={[Function]}
|
||||||
onMouseLeave={[Function]}
|
onMouseLeave={[Function]}
|
||||||
onMouseOver={[Function]}
|
onMouseOver={[Function]}
|
||||||
onTouchEnd={[Function]}
|
onTouchEnd={[Function]}
|
||||||
onTouchStart={[Function]}
|
onTouchStart={[Function]}
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
|
aria-labelledby="useId-4"
|
||||||
className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
|
className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
|
||||||
disabled={false}
|
disabled={false}
|
||||||
onBlur={[Function]}
|
onBlur={[Function]}
|
||||||
@ -633,14 +645,17 @@ exports[`renders an empty list correctly 1`] = `
|
|||||||
aria-labelledby={null}
|
aria-labelledby={null}
|
||||||
className=""
|
className=""
|
||||||
data-mui-internal-clone-element={true}
|
data-mui-internal-clone-element={true}
|
||||||
|
id="useId-5"
|
||||||
onBlur={[Function]}
|
onBlur={[Function]}
|
||||||
onFocus={[Function]}
|
onFocus={[Function]}
|
||||||
onMouseLeave={[Function]}
|
onMouseLeave={[Function]}
|
||||||
onMouseOver={[Function]}
|
onMouseOver={[Function]}
|
||||||
onTouchEnd={[Function]}
|
onTouchEnd={[Function]}
|
||||||
onTouchStart={[Function]}
|
onTouchStart={[Function]}
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
|
aria-labelledby="useId-5"
|
||||||
className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
|
className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
|
||||||
disabled={false}
|
disabled={false}
|
||||||
onBlur={[Function]}
|
onBlur={[Function]}
|
||||||
@ -680,14 +695,17 @@ exports[`renders an empty list correctly 1`] = `
|
|||||||
aria-labelledby={null}
|
aria-labelledby={null}
|
||||||
className=""
|
className=""
|
||||||
data-mui-internal-clone-element={true}
|
data-mui-internal-clone-element={true}
|
||||||
|
id="useId-6"
|
||||||
onBlur={[Function]}
|
onBlur={[Function]}
|
||||||
onFocus={[Function]}
|
onFocus={[Function]}
|
||||||
onMouseLeave={[Function]}
|
onMouseLeave={[Function]}
|
||||||
onMouseOver={[Function]}
|
onMouseOver={[Function]}
|
||||||
onTouchEnd={[Function]}
|
onTouchEnd={[Function]}
|
||||||
onTouchStart={[Function]}
|
onTouchStart={[Function]}
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
|
aria-labelledby="useId-6"
|
||||||
className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
|
className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
|
||||||
disabled={false}
|
disabled={false}
|
||||||
onBlur={[Function]}
|
onBlur={[Function]}
|
||||||
@ -797,14 +815,17 @@ exports[`renders an empty list correctly 1`] = `
|
|||||||
aria-labelledby={null}
|
aria-labelledby={null}
|
||||||
className=""
|
className=""
|
||||||
data-mui-internal-clone-element={true}
|
data-mui-internal-clone-element={true}
|
||||||
|
id="useId-7"
|
||||||
onBlur={[Function]}
|
onBlur={[Function]}
|
||||||
onFocus={[Function]}
|
onFocus={[Function]}
|
||||||
onMouseLeave={[Function]}
|
onMouseLeave={[Function]}
|
||||||
onMouseOver={[Function]}
|
onMouseOver={[Function]}
|
||||||
onTouchEnd={[Function]}
|
onTouchEnd={[Function]}
|
||||||
onTouchStart={[Function]}
|
onTouchStart={[Function]}
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
|
aria-labelledby="useId-7"
|
||||||
className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
|
className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
|
||||||
disabled={false}
|
disabled={false}
|
||||||
onBlur={[Function]}
|
onBlur={[Function]}
|
||||||
@ -844,14 +865,17 @@ exports[`renders an empty list correctly 1`] = `
|
|||||||
aria-labelledby={null}
|
aria-labelledby={null}
|
||||||
className=""
|
className=""
|
||||||
data-mui-internal-clone-element={true}
|
data-mui-internal-clone-element={true}
|
||||||
|
id="useId-8"
|
||||||
onBlur={[Function]}
|
onBlur={[Function]}
|
||||||
onFocus={[Function]}
|
onFocus={[Function]}
|
||||||
onMouseLeave={[Function]}
|
onMouseLeave={[Function]}
|
||||||
onMouseOver={[Function]}
|
onMouseOver={[Function]}
|
||||||
onTouchEnd={[Function]}
|
onTouchEnd={[Function]}
|
||||||
onTouchStart={[Function]}
|
onTouchStart={[Function]}
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
|
aria-labelledby="useId-8"
|
||||||
className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
|
className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
|
||||||
disabled={false}
|
disabled={false}
|
||||||
onBlur={[Function]}
|
onBlur={[Function]}
|
||||||
@ -961,14 +985,17 @@ exports[`renders an empty list correctly 1`] = `
|
|||||||
aria-labelledby={null}
|
aria-labelledby={null}
|
||||||
className=""
|
className=""
|
||||||
data-mui-internal-clone-element={true}
|
data-mui-internal-clone-element={true}
|
||||||
|
id="useId-9"
|
||||||
onBlur={[Function]}
|
onBlur={[Function]}
|
||||||
onFocus={[Function]}
|
onFocus={[Function]}
|
||||||
onMouseLeave={[Function]}
|
onMouseLeave={[Function]}
|
||||||
onMouseOver={[Function]}
|
onMouseOver={[Function]}
|
||||||
onTouchEnd={[Function]}
|
onTouchEnd={[Function]}
|
||||||
onTouchStart={[Function]}
|
onTouchStart={[Function]}
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
|
aria-labelledby="useId-9"
|
||||||
className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
|
className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
|
||||||
disabled={false}
|
disabled={false}
|
||||||
onBlur={[Function]}
|
onBlur={[Function]}
|
||||||
@ -1008,14 +1035,17 @@ exports[`renders an empty list correctly 1`] = `
|
|||||||
aria-labelledby={null}
|
aria-labelledby={null}
|
||||||
className=""
|
className=""
|
||||||
data-mui-internal-clone-element={true}
|
data-mui-internal-clone-element={true}
|
||||||
|
id="useId-10"
|
||||||
onBlur={[Function]}
|
onBlur={[Function]}
|
||||||
onFocus={[Function]}
|
onFocus={[Function]}
|
||||||
onMouseLeave={[Function]}
|
onMouseLeave={[Function]}
|
||||||
onMouseOver={[Function]}
|
onMouseOver={[Function]}
|
||||||
onTouchEnd={[Function]}
|
onTouchEnd={[Function]}
|
||||||
onTouchStart={[Function]}
|
onTouchStart={[Function]}
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
|
aria-labelledby="useId-10"
|
||||||
className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
|
className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
|
||||||
disabled={false}
|
disabled={false}
|
||||||
onBlur={[Function]}
|
onBlur={[Function]}
|
||||||
|
Loading…
Reference in New Issue
Block a user