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.

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 }) => ({

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>

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',