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

a11y: change the playground diff link to be a button. (#4274)

Browse Source 
This is both more correct in terms of what it does and also fixes an
issue where you couldn't navigate to the diff preview with the
keyboard previously.

It looks exactly the same as before except there's an additional
paddingless button when you hover/focus it.
This commit is contained in:
Thomas Heartman 2023-07-18 15:05:29 +02:00 committed by GitHub
parent 7db74b5179
commit 2010b512e0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundEnvironmentCell/AdvancedPlaygroundEnvironmentDiffCell.tsx
View File

@ -1,4 +1,4 @@
import { Link, Popover, styled, Typography, useTheme } from '@mui/material'; import { Button, Popover, styled, Typography, useTheme } from '@mui/material';
import { flexRow } from '../../../../../themes/themeStyles'; import { flexRow } from '../../../../../themes/themeStyles';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { AdvancedPlaygroundFeatureSchemaEnvironments } from 'openapi'; import { AdvancedPlaygroundFeatureSchemaEnvironments } from 'openapi';
@ -14,11 +14,14 @@ const StyledContainer = styled(
margin: theme.spacing(0, 1.5), margin: theme.spacing(0, 1.5),
})); }));
const StyledButton = styled(Link)(({ theme }) => ({ const StyledButton = styled(Button)(({ theme }) => ({
textAlign: 'left', textAlign: 'left',
textDecorationStyle: 'dotted', textDecorationStyle: 'dotted',
textDecorationLine: 'underline',
textUnderlineOffset: theme.spacing(0.75), textUnderlineOffset: theme.spacing(0.75),
color: theme.palette.neutral.dark, color: theme.palette.neutral.dark,
padding: 0,
fontWeight: 'normal',
})); }));
export interface IAdvancedPlaygroundEnvironmentCellProps { export interface IAdvancedPlaygroundEnvironmentCellProps {
@ -31,7 +34,7 @@ export const AdvancedPlaygroundEnvironmentDiffCell = ({
const theme = useTheme(); const theme = useTheme();
const [anchor, setAnchorEl] = useState<null | Element>(null); const [anchor, setAnchorEl] = useState<null | Element>(null);
const onOpen = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => const onOpen = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) =>
setAnchorEl(event.currentTarget); setAnchorEl(event.currentTarget);
const onClose = () => setAnchorEl(null); const onClose = () => setAnchorEl(null);
@ -41,8 +44,8 @@ export const AdvancedPlaygroundEnvironmentDiffCell = ({
return ( return (
<StyledContainer> <StyledContainer>
<> <>
<StyledButton variant={'body2'} onClick={onOpen}> <StyledButton variant={'text'} onClick={onOpen}>
Preview diff View diff
</StyledButton> </StyledButton>
<Popover <Popover

2
frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundResultsTable.test.tsx
View File

@ -110,5 +110,5 @@ test('should render advanced playground table', async () => {
expect(screen.getByText('ChangeReqs')).toBeInTheDocument(); expect(screen.getByText('ChangeReqs')).toBeInTheDocument();
expect(screen.getByText('Development')).toBeInTheDocument(); expect(screen.getByText('Development')).toBeInTheDocument();
expect(screen.getByText('Production')).toBeInTheDocument(); expect(screen.getByText('Production')).toBeInTheDocument();
expect(screen.getByText('Preview diff')).toBeInTheDocument(); expect(screen.getByText('View diff')).toBeInTheDocument();
}); });