From 2010b512e0deeb6cf486706b96f0dd0f8edf5f10 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.ai>
Date: Tue, 18 Jul 2023 15:05:29 +0200
Subject: [PATCH] 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.
---
 .../AdvancedPlaygroundEnvironmentDiffCell.tsx       | 13 ++++++++-----
 .../AdvancedPlaygroundResultsTable.test.tsx         |  2 +-
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundEnvironmentCell/AdvancedPlaygroundEnvironmentDiffCell.tsx b/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundEnvironmentCell/AdvancedPlaygroundEnvironmentDiffCell.tsx
index 7e64202472..d650abfc5a 100644
--- a/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundEnvironmentCell/AdvancedPlaygroundEnvironmentDiffCell.tsx
+++ b/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/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/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundResultsTable.test.tsx b/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundResultsTable.test.tsx
index 841300a1a0..42e76372d3 100644
--- a/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundResultsTable.test.tsx
+++ b/frontend/src/component/playground/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();
 });