fix: focus styles for env headers (#9635)

Adds focus styles to the env accordion header only when the focus is on
the header itself (not on the env toggle inside the header). The focus
style is consistent with what we do for other accordions (dashboard,
milestones).

Middle one is focused:

![image](https://github.com/user-attachments/assets/df87bd99-8fe2-4093-afd8-4cbce9f2c943)


Focus is on the toggle inside the top one (yeh, we should have better
focus styles for toggles; but that's not for now):

![image](https://github.com/user-attachments/assets/2a046d4c-8585-4021-a58e-32ef81b1f701)

Open and focused: 

![image](https://github.com/user-attachments/assets/fdbb5bda-4be5-4354-b213-5e2c7a59eb59)

Getting the consistent background for the header when it's open is a
little tricky because the accordion container and summary are split into
different files. ~~This first iteration used a class name for the
specific header (because envs can have multiple accordion headers inside
them, e.g. release plans) and setting a CSS variable in the summary, so
that the background matches.~~ I found out that I only need to set it in
the parent anyway 😄

Without it, you get this (notice that there is a little white outside
the lower corners):

![image](https://github.com/user-attachments/assets/4d71d73c-7f45-46b5-811d-c6e36f9be5ce)

Author: thomasheartman

frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx

@@ -95,6 +95,7 @@ export const ConstraintAccordionView = ({
                         cursor: expandable ? 'pointer' : 'default!important',
                     },
                 }}
+                tabIndex={expandable ? 0 : -1}
             >
                 <StyledWrapper>
                     <ConstraintAccordionViewHeader

frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx

@@ -96,6 +96,7 @@ export const StrategyItemContainer: FC<StrategyItemContainerProps> = ({
                 <StyledHeader disabled={Boolean(strategy?.disabled)}>
                     {onDragStart ? (
                         <DragIcon
+                            tabIndex={-1}
                             className='strategy-drag-handle'
                             draggable
                             disableRipple

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentHeader/EnvironmentHeader.tsx

@@ -17,9 +17,16 @@ const StyledAccordionSummary = styled(AccordionSummary, {
     padding: theme.spacing(0.5, 3, 0.5, 2),
     display: 'flex',
     alignItems: 'center',
+    borderRadius: theme.shape.borderRadiusLarge,
+    pointerEvents: 'auto',
+    opacity: 1,
     '&&&': {
         cursor: expandable ? 'pointer' : 'default',
     },
+
+    ':focus-within': {
+        background: 'none',
+    },
 }));
 
 const StyledHeader = styled('header')(({ theme }) => ({
@@ -108,6 +115,9 @@ const MetadataChip = ({
     return <StyledStrategyCount>{text}</StyledStrategyCount>;
 };
 
+export const environmentAccordionSummaryClassName =
+    'environment-accordion-summary';
+
 export const EnvironmentHeader: FC<
     PropsWithChildren<EnvironmentHeaderProps>
 > = ({
@@ -129,6 +139,8 @@ export const EnvironmentHeader: FC<
             id={id}
             aria-controls={`environment-accordion-${id}-content`}
             expandable={expandable}
+            tabIndex={expandable ? 0 : -1}
+            className={environmentAccordionSummaryClassName}
         >
             <StyledHeader data-loading>
                 <StyledHeaderTitle>

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx

@@ -8,7 +8,10 @@ import { FEATURE_ENVIRONMENT_ACCORDION } from 'utils/testIds';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import { UpgradeChangeRequests } from './UpgradeChangeRequests/UpgradeChangeRequests';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
-import { EnvironmentHeader } from './EnvironmentHeader/EnvironmentHeader';
+import {
+    environmentAccordionSummaryClassName,
+    EnvironmentHeader,
+} from './EnvironmentHeader/EnvironmentHeader';
 import FeatureOverviewEnvironmentMetrics from './EnvironmentHeader/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics';
 import { FeatureOverviewEnvironmentToggle } from './EnvironmentHeader/FeatureOverviewEnvironmentToggle/FeatureOverviewEnvironmentToggle';
 import { useState } from 'react';
@@ -26,11 +29,8 @@ const StyledFeatureOverviewEnvironment = styled('div')(({ theme }) => ({
 const StyledAccordion = styled(Accordion)(({ theme }) => ({
     boxShadow: 'none',
     background: 'none',
-    '&&& .MuiAccordionSummary-root': {
-        borderRadius: theme.shape.borderRadiusLarge,
-        pointerEvents: 'auto',
-        opacity: 1,
-        backgroundColor: theme.palette.background.paper,
+    [`&:has(.${environmentAccordionSummaryClassName}:focus-visible)`]: {
+        background: theme.palette.table.headerHover,
     },
 }));
 
@@ -85,7 +85,6 @@ export const FeatureOverviewEnvironment = ({
                 TransitionProps={{ mountOnEnter: true, unmountOnExit: true }}
                 data-testid={`${FEATURE_ENVIRONMENT_ACCORDION}_${environment.name}`}
                 expanded={isOpen && hasActivations}
-                disabled={!hasActivations}
                 onChange={() => {
                     const state = isOpen ? !isOpen : hasActivations;
                     onToggleEnvOpen(state);

frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlan.tsx

@@ -24,9 +24,7 @@ import { StartMilestoneChangeRequestDialog } from './ChangeRequest/StartMileston
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import { Truncator } from 'component/common/Truncator/Truncator';
 
-const StyledContainer = styled('div', {
-    shouldForwardProp: (prop) => prop !== 'readonly',
-})<{ readonly?: boolean }>(({ theme, readonly }) => ({
+const StyledContainer = styled('div')(({ theme }) => ({
     padding: theme.spacing(2),
     paddingTop: theme.spacing(0),
     background: 'inherit',
@@ -235,7 +233,7 @@ export const ReleasePlan = ({
     );
 
     return (
-        <StyledContainer readonly={readonly}>
+        <StyledContainer>
             <StyledHeader>
                 <StyledHeaderGroup>
                     <StyledHeaderTitleLabel>