1
0
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:
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, 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}

View File

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

View File

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