From 4f1a93895a615683c6de77ba33d0903723f51933 Mon Sep 17 00:00:00 2001
From: Blake Vandercar <blake.vandercar@validatek.com>
Date: Thu, 9 Jan 2025 08:43:27 -0700
Subject: [PATCH 1/2] fix(Section): make collapsible keyboard accessible

---
 .../core/src/components/section/section.tsx   | 29 +++++++++++--------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/packages/core/src/components/section/section.tsx b/packages/core/src/components/section/section.tsx
index 95f30e54d8..4e80334fbb 100644
--- a/packages/core/src/components/section/section.tsx
+++ b/packages/core/src/components/section/section.tsx
@@ -17,11 +17,11 @@
 import classNames from "classnames";
 import * as React from "react";
 
-import { ChevronDown, ChevronUp, type IconName } from "@blueprintjs/icons";
+import { type IconName } from "@blueprintjs/icons";
 
 import { Classes, Elevation, Utils } from "../../common";
 import { DISPLAYNAME_PREFIX, type HTMLDivProps, type MaybeElement, type Props } from "../../common/props";
-import { uniqueId } from "../../common/utils";
+import { clickElementOnKeyPress, uniqueId } from "../../common/utils";
 import { Card } from "../card/card";
 import { Collapse, type CollapseProps } from "../collapse/collapse";
 import { H6 } from "../html/html";
@@ -177,10 +177,6 @@ export const Section: React.FC<SectionProps> = React.forwardRef((props, ref) =>
         >
             {title && (
                 <div
-                    role={collapsible ? "button" : undefined}
-                    aria-pressed={collapsible ? isCollapsed : undefined}
-                    aria-expanded={collapsible ? isCollapsed : undefined}
-                    aria-controls={collapsible ? sectionId : undefined}
                     className={classNames(Classes.SECTION_HEADER, {
                         [Classes.INTERACTIVE]: collapsible,
                     })}
@@ -204,12 +200,21 @@ export const Section: React.FC<SectionProps> = React.forwardRef((props, ref) =>
                     {isHeaderRightContainerVisible && (
                         <div className={Classes.SECTION_HEADER_RIGHT}>
                             {rightElement}
-                            {collapsible &&
-                                (isCollapsed ? (
-                                    <ChevronDown className={Classes.TEXT_MUTED} />
-                                ) : (
-                                    <ChevronUp className={Classes.TEXT_MUTED} />
-                                ))}
+                            {collapsible && (
+                                <Icon
+                                    icon={isCollapsed ? "chevron-up" : "chevron-down"}
+                                    className={classNames(Classes.TEXT_MUTED, Classes.INTERACTIVE)}
+                                    role="button"
+                                    tabIndex={0}
+                                    aria-pressed={isCollapsed}
+                                    aria-expanded={isCollapsed}
+                                    aria-controls={sectionId}
+                                    aria-hidden={false}
+                                    title={isCollapsed ? "expand section" : "collapse section"}
+                                    onClick={toggleIsCollapsed}
+                                    onKeyDown={clickElementOnKeyPress(["Enter", " "])}
+                                />
+                            )}
                         </div>
                     )}
                 </div>

From 2dd14b67cf4a20eff76754b184382f3eb06bb2bb Mon Sep 17 00:00:00 2001
From: Blake Vandercar <blake.vandercar@validatek.com>
Date: Thu, 9 Jan 2025 09:17:18 -0700
Subject: [PATCH 2/2] fix: wrap in span

---
 packages/core/src/components/section/section.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/core/src/components/section/section.tsx b/packages/core/src/components/section/section.tsx
index 4e80334fbb..1dd93a275f 100644
--- a/packages/core/src/components/section/section.tsx
+++ b/packages/core/src/components/section/section.tsx
@@ -17,7 +17,7 @@
 import classNames from "classnames";
 import * as React from "react";
 
-import { type IconName } from "@blueprintjs/icons";
+import { ChevronDown, ChevronUp, type IconName } from "@blueprintjs/icons";
 
 import { Classes, Elevation, Utils } from "../../common";
 import { DISPLAYNAME_PREFIX, type HTMLDivProps, type MaybeElement, type Props } from "../../common/props";
@@ -201,19 +201,19 @@ export const Section: React.FC<SectionProps> = React.forwardRef((props, ref) =>
                         <div className={Classes.SECTION_HEADER_RIGHT}>
                             {rightElement}
                             {collapsible && (
-                                <Icon
-                                    icon={isCollapsed ? "chevron-up" : "chevron-down"}
-                                    className={classNames(Classes.TEXT_MUTED, Classes.INTERACTIVE)}
+                                <span
                                     role="button"
                                     tabIndex={0}
                                     aria-pressed={isCollapsed}
                                     aria-expanded={isCollapsed}
                                     aria-controls={sectionId}
-                                    aria-hidden={false}
-                                    title={isCollapsed ? "expand section" : "collapse section"}
+                                    aria-label={isCollapsed ? "expand section" : "collapse section"}
                                     onClick={toggleIsCollapsed}
                                     onKeyDown={clickElementOnKeyPress(["Enter", " "])}
-                                />
+                                    className={classNames(Classes.TEXT_MUTED, Classes.INTERACTIVE)}
+                                >
+                                    {isCollapsed ? <ChevronDown /> : <ChevronUp />}
+                                </span>
                             )}
                         </div>
                     )}