From 2a07418bf5c7bc230a60660bb221a9fd4c42555d Mon Sep 17 00:00:00 2001
From: Harsh <hanandji@amazon.com>
Date: Thu, 6 Aug 2026 15:55:13 +0200
Subject: [PATCH 1/3] fix: Increase pointer target of expandable section
 navigation trigger

---
 src/expandable-section/styles.scss | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/expandable-section/styles.scss b/src/expandable-section/styles.scss
index f0923f16b3..a55814559f 100644
--- a/src/expandable-section/styles.scss
+++ b/src/expandable-section/styles.scss
@@ -227,6 +227,7 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
 
   &-navigation {
     > .icon-container {
+      position: relative;
       display: inline-flex;
       cursor: pointer;
       color: awsui.$color-text-expandable-section-navigation-icon-default;
@@ -239,6 +240,14 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
       text-decoration: none;
       flex-direction: column;
 
+      // Extends the clickable area to ensure a minimum 24x24px pointer target (WCAG 2.5.8)
+      &::after {
+        content: '';
+        position: absolute;
+        inset-block: min(0px, calc((100% - 24px) / 2));
+        inset-inline: min(0px, calc((100% - 24px) / 2));
+      }
+
       &:hover {
         color: awsui.$color-text-expandable-section-hover;
       }

From 4c4820aab5bb9a494ce4eb6dc4c8acfd1f0a3a30 Mon Sep 17 00:00:00 2001
From: Harsh <hanandji@amazon.com>
Date: Fri, 7 Aug 2026 14:58:21 +0200
Subject: [PATCH 2/3] fix: Make navigation header wrapper handle pointer clicks

---
 .../expandable-section-header.tsx                  | 14 +++++++++++++-
 src/expandable-section/styles.scss                 |  9 ---------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/expandable-section/expandable-section-header.tsx b/src/expandable-section/expandable-section-header.tsx
index 2d8192d0a2..742266b7d2 100644
--- a/src/expandable-section/expandable-section-header.tsx
+++ b/src/expandable-section/expandable-section-header.tsx
@@ -126,8 +126,20 @@ const ExpandableNavigationHeader = ({
   children,
   icon,
 }: ExpandableNavigationHeaderProps) => {
+  // Let clicks on the inert space around the expand button also toggle the section to provide
+  // a sufficiently large pointer target, deferring to interactive descendants like the expand button and links.
+  const onWrapperClick: MouseEventHandler = event => {
+    const interactiveElement = (event.target as HTMLElement).closest('a, button');
+    if (!interactiveElement || !event.currentTarget.contains(interactiveElement)) {
+      onClick(event);
+    }
+  };
   return (
-    <div id={id} className={clsx(className, styles['click-target'], analyticsSelectors['header-label'])}>
+    <div
+      id={id}
+      className={clsx(className, styles['click-target'], analyticsSelectors['header-label'])}
+      onClick={onWrapperClick}
+    >
       <button
         className={clsx(styles['icon-container'], styles['expand-button'])}
         aria-labelledby={ariaLabelledBy}
diff --git a/src/expandable-section/styles.scss b/src/expandable-section/styles.scss
index a55814559f..f0923f16b3 100644
--- a/src/expandable-section/styles.scss
+++ b/src/expandable-section/styles.scss
@@ -227,7 +227,6 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
 
   &-navigation {
     > .icon-container {
-      position: relative;
       display: inline-flex;
       cursor: pointer;
       color: awsui.$color-text-expandable-section-navigation-icon-default;
@@ -240,14 +239,6 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
       text-decoration: none;
       flex-direction: column;
 
-      // Extends the clickable area to ensure a minimum 24x24px pointer target (WCAG 2.5.8)
-      &::after {
-        content: '';
-        position: absolute;
-        inset-block: min(0px, calc((100% - 24px) / 2));
-        inset-inline: min(0px, calc((100% - 24px) / 2));
-      }
-
       &:hover {
         color: awsui.$color-text-expandable-section-hover;
       }

From f96a8840670584d7fc710f7b20bfcf5f0fca4c76 Mon Sep 17 00:00:00 2001
From: Harsh <hanandji@amazon.com>
Date: Fri, 7 Aug 2026 15:46:41 +0200
Subject: [PATCH 3/3] test: Cover navigation header wrapper click behavior

---
 .../__tests__/interactions.test.tsx           | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/src/expandable-section/__tests__/interactions.test.tsx b/src/expandable-section/__tests__/interactions.test.tsx
index eeec3a7eba..62cfc4ad4e 100644
--- a/src/expandable-section/__tests__/interactions.test.tsx
+++ b/src/expandable-section/__tests__/interactions.test.tsx
@@ -188,4 +188,42 @@ describe('Expandable Section - Interactions', () => {
       expect(onButtonClickSpy).toHaveBeenCalledTimes(1);
     });
   });
+
+  describe('Navigation variant header wrapper', () => {
+    let onChangeSpy: jest.Mock;
+    let onLinkClickSpy: jest.Mock;
+
+    beforeEach(() => {
+      onChangeSpy = jest.fn();
+      onLinkClickSpy = jest.fn();
+    });
+
+    function renderNavigationSection(): ExpandableSectionWrapper {
+      return renderExpandableSection({
+        onChange: onChangeSpy,
+        headerText: <Link onFollow={onLinkClickSpy}>Header link</Link>,
+        variant: 'navigation',
+      });
+    }
+
+    test('toggles when the inert space around the expand button is clicked', () => {
+      const wrapper = renderNavigationSection();
+      wrapper.findHeader().click();
+      expect(onChangeSpy).toHaveBeenCalledTimes(1);
+      expect(onChangeSpy).toHaveBeenCalledWith(expect.objectContaining({ detail: { expanded: true } }));
+    });
+
+    test('toggles exactly once when the expand button is clicked', () => {
+      const wrapper = renderNavigationSection();
+      wrapper.findExpandButton().click();
+      expect(onChangeSpy).toHaveBeenCalledTimes(1);
+    });
+
+    test('does not toggle when a link in the header text is clicked', () => {
+      const wrapper = renderNavigationSection();
+      wrapper.findHeader().findLink()!.click();
+      expect(onChangeSpy).not.toHaveBeenCalled();
+      expect(onLinkClickSpy).toHaveBeenCalledTimes(1);
+    });
+  });
 });