From 9c8c8d3d7c8bb2903aa872fdab60754727c45f8f Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Wed, 8 May 2024 14:13:12 +0200
Subject: [PATCH 1/2] Chore: visually hide labels in the create project form

They're still rendered for screen readers, however.
---
 .../CreateProject/SelectionButton.styles.tsx  | 26 +++++++++++++++++--
 .../Project/CreateProject/SelectionButton.tsx |  6 +++--
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/frontend/src/component/project/Project/CreateProject/SelectionButton.styles.tsx b/frontend/src/component/project/Project/CreateProject/SelectionButton.styles.tsx
index 271ff192e05f..89b976194844 100644
--- a/frontend/src/component/project/Project/CreateProject/SelectionButton.styles.tsx
+++ b/frontend/src/component/project/Project/CreateProject/SelectionButton.styles.tsx
@@ -27,7 +27,21 @@ export const StyledPopover = styled(Popover)(({ theme }) => ({
     },
 }));
 
-export const StyledTextField = styled(TextField)(({ theme }) => ({
+const visuallyHiddenStyles = {
+    border: 0,
+    clip: 'rect(0 0 0 0)',
+    height: 'auto',
+    margin: 0,
+    overflow: 'hidden',
+    padding: 0,
+    position: 'absolute',
+    width: '1px',
+    whiteSpace: 'nowrap',
+};
+
+export const StyledDropdownSearch = styled(TextField, {
+    shouldForwardProp: (prop) => prop !== 'hideLabel',
+})<{ hideLabel?: boolean }>(({ theme, hideLabel }) => ({
     '& .MuiInputBase-root': {
         padding: theme.spacing(0, 1.5),
         borderRadius: `${theme.shape.borderRadiusMedium}px`,
@@ -36,8 +50,16 @@ export const StyledTextField = styled(TextField)(({ theme }) => ({
         padding: theme.spacing(0.75, 0),
         fontSize: theme.typography.body2.fontSize,
     },
+
+    ...(hideLabel
+        ? {
+              label: visuallyHiddenStyles,
+
+              'fieldset > legend > span': visuallyHiddenStyles,
+          }
+        : {}),
 }));
 
-export const TableSearchInput = styled(StyledTextField)(({ theme }) => ({
+export const TableSearchInput = styled(StyledDropdownSearch)(({ theme }) => ({
     maxWidth: '30ch',
 }));
diff --git a/frontend/src/component/project/Project/CreateProject/SelectionButton.tsx b/frontend/src/component/project/Project/CreateProject/SelectionButton.tsx
index 7bde34385c0b..9a3527174fc2 100644
--- a/frontend/src/component/project/Project/CreateProject/SelectionButton.tsx
+++ b/frontend/src/component/project/Project/CreateProject/SelectionButton.tsx
@@ -6,7 +6,7 @@ import {
     StyledDropdown,
     StyledListItem,
     StyledPopover,
-    StyledTextField,
+    StyledDropdownSearch,
     TableSearchInput,
 } from './SelectionButton.styles';
 import { ChangeRequestTable } from './ChangeRequestTable';
@@ -152,12 +152,13 @@ const CombinedSelect: FC<CombinedSelectProps> = ({
                 }}
             >
                 <StyledDropdown>
-                    <StyledTextField
+                    <StyledDropdownSearch
                         variant='outlined'
                         size='small'
                         value={searchText}
                         onChange={(event) => setSearchText(event.target.value)}
                         label={search.label}
+                        hideLabel
                         placeholder={search.placeholder}
                         autoFocus
                         InputProps={{
@@ -399,6 +400,7 @@ export const TableSelect: FC<TableSelectProps> = ({
                         size='small'
                         value={searchText}
                         onChange={(event) => setSearchText(event.target.value)}
+                        hideLabel
                         label={search.label}
                         placeholder={search.placeholder}
                         autoFocus

From 4b8af7e1eddf57861cdfbfae21d8d3b316183c54 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Wed, 8 May 2024 14:50:56 +0200
Subject: [PATCH 2/2] fix: visually hide labels in change request table

---
 .../component/common/GeneralSelect/GeneralSelect.tsx | 12 ++++++++++--
 .../Project/CreateProject/ChangeRequestTable.tsx     |  1 +
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/frontend/src/component/common/GeneralSelect/GeneralSelect.tsx b/frontend/src/component/common/GeneralSelect/GeneralSelect.tsx
index b76dd25ed202..856105a501f3 100644
--- a/frontend/src/component/common/GeneralSelect/GeneralSelect.tsx
+++ b/frontend/src/component/common/GeneralSelect/GeneralSelect.tsx
@@ -11,6 +11,7 @@ import { SELECT_ITEM_ID } from 'utils/testIds';
 import KeyboardArrowDownOutlined from '@mui/icons-material/KeyboardArrowDownOutlined';
 import type { SxProps } from '@mui/system';
 import type { Theme } from '@mui/material/styles';
+import { visuallyHidden } from '@mui/utils';
 
 export interface ISelectOption {
     key: string;
@@ -30,6 +31,7 @@ export interface IGeneralSelectProps extends Omit<SelectProps, 'onChange'> {
     fullWidth?: boolean;
     classes?: any;
     defaultValue?: string;
+    visuallyHideLabel?: boolean;
 }
 
 const GeneralSelect: React.FC<IGeneralSelectProps> = ({
@@ -43,6 +45,7 @@ const GeneralSelect: React.FC<IGeneralSelectProps> = ({
     className,
     classes,
     fullWidth,
+    visuallyHideLabel,
     ...rest
 }) => {
     const onSelectChange = (event: SelectChangeEvent) => {
@@ -57,13 +60,18 @@ const GeneralSelect: React.FC<IGeneralSelectProps> = ({
             classes={classes}
             fullWidth={fullWidth}
         >
-            <InputLabel htmlFor={id}>{label}</InputLabel>
+            <InputLabel
+                sx={visuallyHideLabel ? visuallyHidden : null}
+                htmlFor={id}
+            >
+                {label}
+            </InputLabel>
             <Select
                 name={name}
                 disabled={disabled}
                 onChange={onSelectChange}
                 className={className}
-                label={label}
+                label={visuallyHideLabel ? '' : label}
                 id={id}
                 value={value}
                 IconComponent={KeyboardArrowDownOutlined}
diff --git a/frontend/src/component/project/Project/CreateProject/ChangeRequestTable.tsx b/frontend/src/component/project/Project/CreateProject/ChangeRequestTable.tsx
index 417c3945f55d..7e193055d68e 100644
--- a/frontend/src/component/project/Project/CreateProject/ChangeRequestTable.tsx
+++ b/frontend/src/component/project/Project/CreateProject/ChangeRequestTable.tsx
@@ -101,6 +101,7 @@ export const ChangeRequestTable = (props: TableProps) => {
                                 <StyledBox data-loading>
                                     <GeneralSelect
                                         label={`Set required approvals for ${original.environment}`}
+                                        visuallyHideLabel
                                         id={`cr-approvals-${original.environment}`}
                                         sx={{ width: '140px' }}
                                         options={approvalOptions}