From 645b005f29b4067a03a89eb4477ba144b119436c Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Wed, 2 Apr 2025 13:37:16 +0200
Subject: [PATCH] Fix(1-3553): fix focus styles and tab navigation for segments
 + constraints (#9655)

Fixes a few small focus styling and tab navigation issues for the new
segments + constraints.

Before:
The segment acc header was tabbable even though you can't do anything
with it (by mouse or by keyboard)

![image](https://github.com/user-attachments/assets/de5c07ee-e55c-45f4-bd6e-3d978a0a51ca)

The focus color would stay even when you're focusing stuff inside the
accordion

![image](https://github.com/user-attachments/assets/1a75038b-256f-43b5-95ed-0a3d455d17f8)

Constraint items have focus styles that exceed the accordion borders,
causing a weird squaring effect:

![image](https://github.com/user-attachments/assets/638c9f5d-daf0-4570-8323-49141183dad8)

After:
The segment acc header isn't reachable by tab anymore.

The segment acc header doesn't change its background color on elements
inside getting focus:

![image](https://github.com/user-attachments/assets/4756e8b0-b461-49df-bf3e-ec8d26142877)

The constraint item has rounded corners for focus styles too:

![image](https://github.com/user-attachments/assets/fccf94e4-8b7a-4823-bcf5-24a0fe046cf7)

![image](https://github.com/user-attachments/assets/90020d85-990c-41de-9acb-ab2cc81a8f66)
---
 .../ConstraintItemHeader/ConstraintItemHeader.tsx  | 14 ++++++--------
 .../ConstraintAccordionView.tsx                    |  1 +
 .../ConstraintAccordionViewHeaderInfo.tsx          |  2 +-
 .../component/common/SegmentItem/SegmentItem.tsx   | 13 +++++++++++--
 4 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/frontend/src/component/common/ConstraintsList/ConstraintItemHeader/ConstraintItemHeader.tsx b/frontend/src/component/common/ConstraintsList/ConstraintItemHeader/ConstraintItemHeader.tsx
index 2c2798da91..888cc26929 100644
--- a/frontend/src/component/common/ConstraintsList/ConstraintItemHeader/ConstraintItemHeader.tsx
+++ b/frontend/src/component/common/ConstraintsList/ConstraintItemHeader/ConstraintItemHeader.tsx
@@ -112,14 +112,12 @@ export const ConstraintItemHeader: FC<ConstraintItemHeaderProps> = ({
                     ) : null}
                 </StyledOperatorGroup>
                 <div>
-                    <div>
-                        <ValuesList
-                            values={items}
-                            onSetTruncated={onSetTruncated}
-                            tooltips={tooltips}
-                        />
-                        {viewMore}
-                    </div>
+                    <ValuesList
+                        values={items}
+                        onSetTruncated={onSetTruncated}
+                        tooltips={tooltips}
+                    />
+                    {viewMore}
                 </div>
             </StyledConstraintContainer>
         </StrategyEvaluationItem>
diff --git a/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx b/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx
index 2712952f06..e5c25bc733 100644
--- a/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx
+++ b/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx
@@ -35,6 +35,7 @@ const StyledAccordion = styled(Accordion)(({ theme }) => ({
     '&:before': {
         opacity: '0',
     },
+    overflow: 'hidden',
 }));
 
 const StyledAccordionSummary = styled(AccordionSummary)(({ theme }) => ({
diff --git a/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo.tsx b/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo.tsx
index bb66cc4854..d733fd34ff 100644
--- a/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo.tsx
+++ b/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo.tsx
@@ -20,7 +20,7 @@ const StyledHeaderMetaInfo = styled('div')(({ theme }) => ({
     },
 }));
 
-const StyledExpandItem = styled('div')(({ theme }) => ({
+const StyledExpandItem = styled('p')(({ theme }) => ({
     color: theme.palette.secondary.main,
     margin: theme.spacing(0.25, 0, 0, 0.75),
     fontSize: theme.fontSizes.smallerBody,
diff --git a/frontend/src/component/common/SegmentItem/SegmentItem.tsx b/frontend/src/component/common/SegmentItem/SegmentItem.tsx
index a1844be478..02438f6a13 100644
--- a/frontend/src/component/common/SegmentItem/SegmentItem.tsx
+++ b/frontend/src/component/common/SegmentItem/SegmentItem.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useState, type FC } from 'react';
+import { useId, useMemo, useState, type FC } from 'react';
 import { Link } from 'react-router-dom';
 import type { ISegment } from 'interfaces/segment';
 import {
@@ -41,6 +41,9 @@ const StyledAccordion = styled(Accordion)(() => ({
 const StyledAccordionSummary = styled(AccordionSummary)(({ theme }) => ({
     fontSize: theme.typography.body2.fontSize,
     minHeight: 'unset',
+    ':focus-within': {
+        backgroundColor: 'inherit',
+    },
 }));
 
 const StyledAccordionDetails = styled(AccordionDetails)(({ theme }) => ({
@@ -77,6 +80,7 @@ export const SegmentItem: FC<SegmentItemProps> = ({
     constraintList,
 }) => {
     const [isOpen, setIsOpen] = useState(isExpanded || false);
+    const segmentDetailsId = useId();
 
     const constraints = useMemo(() => {
         if (constraintList) {
@@ -110,7 +114,11 @@ export const SegmentItem: FC<SegmentItemProps> = ({
                 disableGutters
                 TransitionProps={{ mountOnEnter: true, unmountOnExit: true }}
             >
-                <StyledAccordionSummary id={`segment-accordion-${segment.id}`}>
+                <StyledAccordionSummary
+                    id={`segment-accordion-${segment.id}`}
+                    tabIndex={-1}
+                    aria-controls={segmentDetailsId}
+                >
                     <StrategyEvaluationItem type='Segment'>
                         <StyledLink to={`/segments/edit/${segment.id}`}>
                             {segment.name}
@@ -120,6 +128,7 @@ export const SegmentItem: FC<SegmentItemProps> = ({
                     {!isExpanded ? (
                         <StyledActionsContainer>
                             <StyledButton
+                                aria-controls={segmentDetailsId}
                                 size='small'
                                 variant='outlined'
                                 onClick={() => setIsOpen((value) => !value)}