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