mirror of
				https://github.com/Unleash/unleash.git
				synced 2025-10-27 11:02:16 +01: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