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

chore: use new ScreenReaderOnly component in config buttons (#7352)

Browse Source 
This PR uses the new ScreenReaderOnly component in existing code,
replacing custom code with a shared component.
This commit is contained in:
Thomas Heartman 2024-06-12 11:04:47 +02:00 committed by GitHub
parent 2191de7713
commit 4c4d6e8aeb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 5 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ConfigButton.styles.tsx
View File

@ -1,5 +1,4 @@
import { Popover, styled } from '@mui/material'; import { Popover, styled } from '@mui/material';
import { visuallyHiddenStyles } from './shared.styles';
export const StyledDropdown = styled('div')(({ theme }) => ({ export const StyledDropdown = styled('div')(({ theme }) => ({
padding: theme.spacing(2), padding: theme.spacing(2),
@ -15,11 +14,6 @@ export const StyledPopover = styled(Popover)(({ theme }) => ({
}, },
})); }));
export const HiddenDescription = styled('p')(() => ({
...visuallyHiddenStyles,
position: 'absolute',
}));
export const ButtonLabel = styled('span', { export const ButtonLabel = styled('span', {
shouldForwardProp: (prop) => prop !== 'labelWidth', shouldForwardProp: (prop) => prop !== 'labelWidth',
})<{ labelWidth?: string }>(({ labelWidth, theme }) => ({ })<{ labelWidth?: string }>(({ labelWidth, theme }) => ({

8
frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ConfigButton.tsx
View File

@ -4,11 +4,11 @@ import { Box, Button } from '@mui/material';
import { import {
StyledDropdown, StyledDropdown,
StyledPopover, StyledPopover,
HiddenDescription,
ButtonLabel, ButtonLabel,
StyledTooltipContent, StyledTooltipContent,
} from './ConfigButton.styles'; } from './ConfigButton.styles';
import { TooltipResolver } from 'component/common/TooltipResolver/TooltipResolver'; import { TooltipResolver } from 'component/common/TooltipResolver/TooltipResolver';
import { ScreenReaderOnly } from 'component/common/ScreenReaderOnly/ScreenReaderOnly';
export type ConfigButtonProps = { export type ConfigButtonProps = {
button: { button: {
@ -95,9 +95,9 @@ export const ConfigButton: FC<PropsWithChildren<ConfigButtonProps>> = ({
horizontal: 'left', horizontal: 'left',
}} }}
> >
<HiddenDescription id={descriptionId}> <ScreenReaderOnly>
{description} <p id={descriptionId}>{description}</p>
</HiddenDescription> </ScreenReaderOnly>
<StyledDropdown aria-describedby={descriptionId}> <StyledDropdown aria-describedby={descriptionId}>
{children} {children}
</StyledDropdown> </StyledDropdown>

2
frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/shared.styles.tsx
View File

@ -1,6 +1,6 @@
import { TextField, styled } from '@mui/material'; import { TextField, styled } from '@mui/material';
export const visuallyHiddenStyles = { const visuallyHiddenStyles = {
border: 0, border: 0,
clip: 'rect(0 0 0 0)', clip: 'rect(0 0 0 0)',
height: 'auto', height: 'auto',