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

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.
Unleash · Jul 18, 2023 · 2010b51 · 2010b51
1 parent 7db74b5
commit 2010b51
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/...dResultsTable/AdvancedPlaygroundEnvironmentCell/AdvancedPlaygroundEnvironmentDiffCell.tsx b/...dResultsTable/AdvancedPlaygroundEnvironmentCell/AdvancedPlaygroundEnvironmentDiffCell.tsx
@@ -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 React, { useState } from 'react';
 import { AdvancedPlaygroundFeatureSchemaEnvironments } from 'openapi';
@@ -14,11 +14,14 @@ const StyledContainer = styled(
     margin: theme.spacing(0, 1.5),
 }));
 
-const StyledButton = styled(Link)(({ theme }) => ({
+const StyledButton = styled(Button)(({ theme }) => ({
     textAlign: 'left',
     textDecorationStyle: 'dotted',
+    textDecorationLine: 'underline',
     textUnderlineOffset: theme.spacing(0.75),
     color: theme.palette.neutral.dark,
+    padding: 0,
+    fontWeight: 'normal',
 }));
 
 export interface IAdvancedPlaygroundEnvironmentCellProps {
@@ -31,7 +34,7 @@ export const AdvancedPlaygroundEnvironmentDiffCell = ({
     const theme = useTheme();
     const [anchor, setAnchorEl] = useState<null | Element>(null);
 
-    const onOpen = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) =>
+    const onOpen = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) =>
         setAnchorEl(event.currentTarget);
 
     const onClose = () => setAnchorEl(null);
@@ -41,8 +44,8 @@ export const AdvancedPlaygroundEnvironmentDiffCell = ({
     return (
         <StyledContainer>
             <>
-                <StyledButton variant={'body2'} onClick={onOpen}>
-                    Preview diff
+                <StyledButton variant={'text'} onClick={onOpen}>
+                    View diff
                 </StyledButton>
 
                 <Popover

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