Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-06-14 01:16:17 +02:00
Code Issues Projects Releases Wiki Activity

refactor: improve button label markup (#1091)

Browse Source 
* refactor: improve button label markup

* refactor: remove misused tooltip roles

* refactor: simplify FeatureStrategyIcon labelling

* refactor: simplify labels for disabled buttons

* refactor: add missing switch input labels
This commit is contained in:
olav 2022-06-17 11:27:54 +02:00 committed by GitHub
parent accf9294c8
commit 69171a75a7
11 changed files with 53 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/component/common/HelpIcon/HelpIcon.tsx
View File

@ -17,7 +17,6 @@ export const HelpIcon = ({ tooltip, style }: IHelpIconProps) => {
className={styles.container} className={styles.container}
style={style} style={style}
tabIndex={0} tabIndex={0}
role="tooltip"
aria-label="Help" aria-label="Help"
> >
<Info className={styles.icon} /> <Info className={styles.icon} />

2
frontend/src/component/common/PermissionButton/PermissionButton.tsx
View File

@ -72,7 +72,7 @@ const PermissionButton: React.FC<IPermissionButtonProps> = ({
<Button <Button
onClick={onClick} onClick={onClick}
disabled={disabled || !access} disabled={disabled || !access}
aria-describedby={id} aria-labelledby={id}
variant={variant} variant={variant}
color={color} color={color}
{...rest} {...rest}

2
frontend/src/component/common/PermissionIconButton/PermissionIconButton.tsx
View File

@ -61,7 +61,7 @@ const PermissionIconButton = ({
arrow arrow
onClick={e => e.preventDefault()} onClick={e => e.preventDefault()}
> >
<div id={id} role="tooltip"> <div id={id}>
<IconButton <IconButton
{...rest} {...rest}
disabled={!access || disabled} disabled={!access || disabled}

1
frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureSeenCell.tsx
View File

@ -66,7 +66,6 @@ const Wrapper: FC<{ unit?: string; tooltip: string }> = ({
<div className={styles.container}> <div className={styles.container}>
<Tooltip title={tooltip} arrow describeChild> <Tooltip title={tooltip} arrow describeChild>
<div <div
role="tooltip"
className={styles.box} className={styles.box}
style={{ background: getColor(unit) }} style={{ background: getColor(unit) }}
data-loading data-loading

22
frontend/src/component/environments/EnvironmentTable/EnvironmentActionCell/EnvironmentActionCell.tsx
View File

@ -99,6 +99,7 @@ export const EnvironmentActionCell = ({
? `Disable environment ${environment.name}` ? `Disable environment ${environment.name}`
: `Enable environment ${environment.name}`; : `Enable environment ${environment.name}`;
const toggleId = useId();
const editId = useId(); const editId = useId();
const deleteId = useId(); const deleteId = useId();
@ -108,13 +109,16 @@ export const EnvironmentActionCell = ({
condition={updatePermission} condition={updatePermission}
show={ show={
<> <>
<Tooltip title={toggleIconTooltip} arrow describeChild> <Tooltip title={toggleIconTooltip} arrow>
<PermissionSwitch <div id={toggleId}>
permission={UPDATE_ENVIRONMENT} <PermissionSwitch
checked={environment.enabled} permission={UPDATE_ENVIRONMENT}
onClick={() => setToggleModal(true)} checked={environment.enabled}
disabled={environment.protected} onClick={() => setToggleModal(true)}
/> disabled={environment.protected}
inputProps={{ 'aria-labelledby': toggleId }}
/>
</div>
</Tooltip> </Tooltip>
<ActionCell.Divider /> <ActionCell.Divider />
</> </>
@ -133,7 +137,7 @@ export const EnvironmentActionCell = ({
> >
<span id={editId}> <span id={editId}>
<IconButton <IconButton
aria-describedby={editId} aria-labelledby={editId}
disabled={environment.protected} disabled={environment.protected}
onClick={() => { onClick={() => {
navigate( navigate(
@ -162,7 +166,7 @@ export const EnvironmentActionCell = ({
> >
<span id={deleteId}> <span id={deleteId}>
<IconButton <IconButton
aria-describedby={deleteId} aria-labelledby={deleteId}
disabled={environment.protected} disabled={environment.protected}
onClick={() => setDeleteModal(true)} onClick={() => setDeleteModal(true)}
size="large" size="large"

6
frontend/src/component/feature/FeatureStrategy/FeatureStrategyIcon/FeatureStrategyIcon.tsx
View File

@ -3,7 +3,6 @@ import {
formatStrategyName, formatStrategyName,
} from 'utils/strategyNames'; } from 'utils/strategyNames';
import { styled, Tooltip } from '@mui/material'; import { styled, Tooltip } from '@mui/material';
import { useId } from 'hooks/useId';
interface IFeatureStrategyIconProps { interface IFeatureStrategyIconProps {
strategyName: string; strategyName: string;
@ -13,14 +12,11 @@ export const FeatureStrategyIcon = ({
strategyName, strategyName,
}: IFeatureStrategyIconProps) => { }: IFeatureStrategyIconProps) => {
const Icon = getFeatureStrategyIcon(strategyName); const Icon = getFeatureStrategyIcon(strategyName);
const id = useId();
return ( return (
<StyledIcon> <StyledIcon>
<Tooltip title={formatStrategyName(strategyName)} arrow> <Tooltip title={formatStrategyName(strategyName)} arrow>
<div id={id} role="tooltip"> <Icon />
<Icon aria-labelledby={id} />
</div>
</Tooltip> </Tooltip>
</StyledIcon> </StyledIcon>
); );

2
frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx
View File

@ -40,7 +40,7 @@ export const FeatureStrategyMenu = ({
projectId={projectId} projectId={projectId}
environmentId={environmentId} environmentId={environmentId}
onClick={onClick} onClick={onClick}
aria-describedby={popoverId} aria-labelledby={popoverId}
variant={variant} variant={variant}
> >
{label} {label}

7
frontend/src/component/strategies/StrategiesList/StrategyDeleteButton/StrategyDeleteButton.tsx
View File

@ -5,6 +5,7 @@ import { Delete } from '@mui/icons-material';
import { IconButton, Tooltip } from '@mui/material'; import { IconButton, Tooltip } from '@mui/material';
import { IStrategy } from 'interfaces/strategy'; import { IStrategy } from 'interfaces/strategy';
import { DELETE_STRATEGY } from 'component/providers/AccessProvider/permissions'; import { DELETE_STRATEGY } from 'component/providers/AccessProvider/permissions';
import { useId } from 'hooks/useId';
interface IStrategyDeleteButtonProps { interface IStrategyDeleteButtonProps {
strategy: IStrategy; strategy: IStrategy;
@ -15,6 +16,8 @@ export const StrategyDeleteButton: VFC<IStrategyDeleteButtonProps> = ({
strategy, strategy,
onClick, onClick,
}) => { }) => {
const id = useId();
return ( return (
<ConditionallyRender <ConditionallyRender
condition={strategy?.editable} condition={strategy?.editable}
@ -29,9 +32,9 @@ export const StrategyDeleteButton: VFC<IStrategyDeleteButtonProps> = ({
} }
elseShow={ elseShow={
<Tooltip title="You cannot delete a built-in strategy" arrow> <Tooltip title="You cannot delete a built-in strategy" arrow>
<div> <div id={id}>
<IconButton disabled size="large"> <IconButton disabled size="large">
<Delete titleAccess="Delete strategy" /> <Delete aria-labelledby={id} />
</IconButton> </IconButton>
</div> </div>
</Tooltip> </Tooltip>

51
frontend/src/component/strategies/StrategiesList/StrategyEditButton/StrategyEditButton.tsx
View File

@ -5,6 +5,7 @@ import { Edit } from '@mui/icons-material';
import { IconButton, Tooltip } from '@mui/material'; import { IconButton, Tooltip } from '@mui/material';
import { UPDATE_STRATEGY } from 'component/providers/AccessProvider/permissions'; import { UPDATE_STRATEGY } from 'component/providers/AccessProvider/permissions';
import { IStrategy } from 'interfaces/strategy'; import { IStrategy } from 'interfaces/strategy';
import { useId } from 'hooks/useId';
interface IStrategyEditButtonProps { interface IStrategyEditButtonProps {
strategy: IStrategy; strategy: IStrategy;
@ -14,26 +15,30 @@ interface IStrategyEditButtonProps {
export const StrategyEditButton: VFC<IStrategyEditButtonProps> = ({ export const StrategyEditButton: VFC<IStrategyEditButtonProps> = ({
strategy, strategy,
onClick, onClick,
}) => ( }) => {
<ConditionallyRender const id = useId();
condition={strategy?.editable}
show={ return (
<PermissionIconButton <ConditionallyRender
onClick={onClick} condition={strategy?.editable}
permission={UPDATE_STRATEGY} show={
tooltipProps={{ title: 'Edit strategy' }} <PermissionIconButton
> onClick={onClick}
<Edit /> permission={UPDATE_STRATEGY}
</PermissionIconButton> tooltipProps={{ title: 'Edit strategy' }}
} >
elseShow={ <Edit />
<Tooltip title="You cannot edit a built-in strategy" arrow> </PermissionIconButton>
<div> }
<IconButton disabled size="large"> elseShow={
<Edit titleAccess="Edit strategy" /> <Tooltip title="You cannot edit a built-in strategy" arrow>
</IconButton> <div id={id}>
</div> <IconButton disabled size="large">
</Tooltip> <Edit aria-labelledby={id} />
} </IconButton>
/> </div>
); </Tooltip>
}
/>
);
};

3
frontend/src/component/strategies/StrategiesList/StrategySwitch/StrategySwitch.tsx
View File

@ -30,12 +30,13 @@ export const StrategySwitch: VFC<IStrategySwitchProps> = ({
describeChild describeChild
arrow arrow
> >
<div id={id} role="tooltip"> <div id={id}>
<PermissionSwitch <PermissionSwitch
checked={!deprecated} checked={!deprecated}
permission={UPDATE_STRATEGY} permission={UPDATE_STRATEGY}
onClick={onClick} onClick={onClick}
disabled={disabled} disabled={disabled}
inputProps={{ 'aria-labelledby': id }}
/> />
</div> </div>
</Tooltip> </Tooltip>

12
frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap
View File

@ -76,7 +76,7 @@ exports[`renders an empty list correctly 1`] = `
id="useId-0" id="useId-0"
> >
<button <button
aria-describedby="useId-0" aria-labelledby="useId-0"
className="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root mui-1aw3qf3-MuiButtonBase-root-MuiButton-root" className="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root mui-1aw3qf3-MuiButtonBase-root-MuiButton-root"
disabled={false} disabled={false}
onBlur={[Function]} onBlur={[Function]}
@ -313,7 +313,6 @@ exports[`renders an empty list correctly 1`] = `
onMouseOver={[Function]} onMouseOver={[Function]}
onTouchEnd={[Function]} onTouchEnd={[Function]}
onTouchStart={[Function]} onTouchStart={[Function]}
role="tooltip"
> >
<button <button
aria-labelledby="useId-1" aria-labelledby="useId-1"
@ -364,7 +363,6 @@ exports[`renders an empty list correctly 1`] = `
onMouseOver={[Function]} onMouseOver={[Function]}
onTouchEnd={[Function]} onTouchEnd={[Function]}
onTouchStart={[Function]} onTouchStart={[Function]}
role="tooltip"
> >
<button <button
aria-labelledby="useId-2" aria-labelledby="useId-2"
@ -485,7 +483,6 @@ exports[`renders an empty list correctly 1`] = `
onMouseOver={[Function]} onMouseOver={[Function]}
onTouchEnd={[Function]} onTouchEnd={[Function]}
onTouchStart={[Function]} onTouchStart={[Function]}
role="tooltip"
> >
<button <button
aria-labelledby="useId-3" aria-labelledby="useId-3"
@ -536,7 +533,6 @@ exports[`renders an empty list correctly 1`] = `
onMouseOver={[Function]} onMouseOver={[Function]}
onTouchEnd={[Function]} onTouchEnd={[Function]}
onTouchStart={[Function]} onTouchStart={[Function]}
role="tooltip"
> >
<button <button
aria-labelledby="useId-4" aria-labelledby="useId-4"
@ -657,7 +653,6 @@ exports[`renders an empty list correctly 1`] = `
onMouseOver={[Function]} onMouseOver={[Function]}
onTouchEnd={[Function]} onTouchEnd={[Function]}
onTouchStart={[Function]} onTouchStart={[Function]}
role="tooltip"
> >
<button <button
aria-labelledby="useId-5" aria-labelledby="useId-5"
@ -708,7 +703,6 @@ exports[`renders an empty list correctly 1`] = `
onMouseOver={[Function]} onMouseOver={[Function]}
onTouchEnd={[Function]} onTouchEnd={[Function]}
onTouchStart={[Function]} onTouchStart={[Function]}
role="tooltip"
> >
<button <button
aria-labelledby="useId-6" aria-labelledby="useId-6"
@ -829,7 +823,6 @@ exports[`renders an empty list correctly 1`] = `
onMouseOver={[Function]} onMouseOver={[Function]}
onTouchEnd={[Function]} onTouchEnd={[Function]}
onTouchStart={[Function]} onTouchStart={[Function]}
role="tooltip"
> >
<button <button
aria-labelledby="useId-7" aria-labelledby="useId-7"
@ -880,7 +873,6 @@ exports[`renders an empty list correctly 1`] = `
onMouseOver={[Function]} onMouseOver={[Function]}
onTouchEnd={[Function]} onTouchEnd={[Function]}
onTouchStart={[Function]} onTouchStart={[Function]}
role="tooltip"
> >
<button <button
aria-labelledby="useId-8" aria-labelledby="useId-8"
@ -1001,7 +993,6 @@ exports[`renders an empty list correctly 1`] = `
onMouseOver={[Function]} onMouseOver={[Function]}
onTouchEnd={[Function]} onTouchEnd={[Function]}
onTouchStart={[Function]} onTouchStart={[Function]}
role="tooltip"
> >
<button <button
aria-labelledby="useId-9" aria-labelledby="useId-9"
@ -1052,7 +1043,6 @@ exports[`renders an empty list correctly 1`] = `
onMouseOver={[Function]} onMouseOver={[Function]}
onTouchEnd={[Function]} onTouchEnd={[Function]}
onTouchStart={[Function]} onTouchStart={[Function]}
role="tooltip"
> >
<button <button
aria-labelledby="useId-10" aria-labelledby="useId-10"