From 4c4d6e8aeb734e1e89a094af6c72ee9a621ab06b Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Wed, 12 Jun 2024 11:04:47 +0200
Subject: [PATCH] chore: use new ScreenReaderOnly component in config buttons
 (#7352)

This PR uses the new ScreenReaderOnly component in existing code,
replacing custom code with a shared component.
---
 .../ConfigButtons/ConfigButton.styles.tsx                 | 6 ------
 .../NewCreateProjectForm/ConfigButtons/ConfigButton.tsx   | 8 ++++----
 .../NewCreateProjectForm/ConfigButtons/shared.styles.tsx  | 2 +-
 3 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ConfigButton.styles.tsx b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ConfigButton.styles.tsx
index 76d7d75f73..1233b3e617 100644
--- a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ConfigButton.styles.tsx
+++ b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ConfigButton.styles.tsx
@@ -1,5 +1,4 @@
 import { Popover, styled } from '@mui/material';
-import { visuallyHiddenStyles } from './shared.styles';
 
 export const StyledDropdown = styled('div')(({ theme }) => ({
     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', {
     shouldForwardProp: (prop) => prop !== 'labelWidth',
 })<{ labelWidth?: string }>(({ labelWidth, theme }) => ({
diff --git a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ConfigButton.tsx b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ConfigButton.tsx
index 473ac84959..bd0feafe6c 100644
--- a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ConfigButton.tsx
+++ b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ConfigButton.tsx
@@ -4,11 +4,11 @@ import { Box, Button } from '@mui/material';
 import {
     StyledDropdown,
     StyledPopover,
-    HiddenDescription,
     ButtonLabel,
     StyledTooltipContent,
 } from './ConfigButton.styles';
 import { TooltipResolver } from 'component/common/TooltipResolver/TooltipResolver';
+import { ScreenReaderOnly } from 'component/common/ScreenReaderOnly/ScreenReaderOnly';
 
 export type ConfigButtonProps = {
     button: {
@@ -95,9 +95,9 @@ export const ConfigButton: FC<PropsWithChildren<ConfigButtonProps>> = ({
                     horizontal: 'left',
                 }}
             >
-                <HiddenDescription id={descriptionId}>
-                    {description}
-                </HiddenDescription>
+                <ScreenReaderOnly>
+                    <p id={descriptionId}>{description}</p>
+                </ScreenReaderOnly>
                 <StyledDropdown aria-describedby={descriptionId}>
                     {children}
                 </StyledDropdown>
diff --git a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/shared.styles.tsx b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/shared.styles.tsx
index 735261af66..9014ff2a49 100644
--- a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/shared.styles.tsx
+++ b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/shared.styles.tsx
@@ -1,6 +1,6 @@
 import { TextField, styled } from '@mui/material';
 
-export const visuallyHiddenStyles = {
+const visuallyHiddenStyles = {
     border: 0,
     clip: 'rect(0 0 0 0)',
     height: 'auto',