From a3a228f771ea35a96a9a7b6617e1571c4e82da30 Mon Sep 17 00:00:00 2001
From: kailin-limble <kailin.tang@limblecmms.com>
Date: Thu, 5 Dec 2024 12:12:23 -0500
Subject: [PATCH 1/2] DONKEY-561 Make the sandbox tree collapse button tabbable

to conform to accessibility standards
---
 .../sandbox/src/app/collapsible/collapsible.component.html    | 4 ++--
 .../sandbox/src/app/collapsible/collapsible.component.scss    | 4 ++++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/projects/sandbox/src/app/collapsible/collapsible.component.html b/projects/sandbox/src/app/collapsible/collapsible.component.html
index a717ad5..1320f56 100644
--- a/projects/sandbox/src/app/collapsible/collapsible.component.html
+++ b/projects/sandbox/src/app/collapsible/collapsible.component.html
@@ -1,6 +1,6 @@
 <tree-node>
    <div class="container">
-      <div class="collapse-button" (click)="toggle()">
+      <button class="collapse-button" (click)="toggle()">
          @if (!collapsed) {
             <span>
                <mat-icon fontIcon="expand_less" />
@@ -11,7 +11,7 @@
                <mat-icon fontIcon="expand_more" />
             </span>
          }
-      </div>
+      </button>
       <div>
          This is a collapsible component. Click the arrow to collapse/expand
          children.
diff --git a/projects/sandbox/src/app/collapsible/collapsible.component.scss b/projects/sandbox/src/app/collapsible/collapsible.component.scss
index 742b848..b551323 100644
--- a/projects/sandbox/src/app/collapsible/collapsible.component.scss
+++ b/projects/sandbox/src/app/collapsible/collapsible.component.scss
@@ -1,9 +1,13 @@
 .collapse-button {
+   all: unset;
    cursor: pointer;
    font-size: 24px;
    display: inline-block;
    margin-right: 8px;
 }
+.collapse-button:focus {
+   outline: revert;
+}
 
 .container {
    display: flex;

From 32fbff1900935af745af9aaf599c1c62ed9ed109 Mon Sep 17 00:00:00 2001
From: Francis Breidenbach <8886566+cheefbird@users.noreply.github.com>
Date: Tue, 19 May 2026 19:46:04 -0700
Subject: [PATCH 2/2] fix: improve a11y of collapse button

- add type, aria-expanded, and aria-label attributes
- mark icons as aria-hidden
- improve focus-visible styling with solid outline and offset
---
 .../src/app/collapsible/collapsible.component.html   | 12 +++++++++---
 .../src/app/collapsible/collapsible.component.scss   |  5 +++--
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/projects/sandbox/src/app/collapsible/collapsible.component.html b/projects/sandbox/src/app/collapsible/collapsible.component.html
index 1320f56..027f683 100644
--- a/projects/sandbox/src/app/collapsible/collapsible.component.html
+++ b/projects/sandbox/src/app/collapsible/collapsible.component.html
@@ -1,14 +1,20 @@
 <tree-node>
    <div class="container">
-      <button class="collapse-button" (click)="toggle()">
+      <button
+         type="button"
+         class="collapse-button"
+         [attr.aria-expanded]="!collapsed"
+         [attr.aria-label]="collapsed ? 'Expand children' : 'Collapse children'"
+         (click)="toggle()"
+      >
          @if (!collapsed) {
             <span>
-               <mat-icon fontIcon="expand_less" />
+               <mat-icon fontIcon="expand_less" aria-hidden="true" />
             </span>
          }
          @if (collapsed) {
             <span>
-               <mat-icon fontIcon="expand_more" />
+               <mat-icon fontIcon="expand_more" aria-hidden="true" />
             </span>
          }
       </button>
diff --git a/projects/sandbox/src/app/collapsible/collapsible.component.scss b/projects/sandbox/src/app/collapsible/collapsible.component.scss
index b551323..8a84b16 100644
--- a/projects/sandbox/src/app/collapsible/collapsible.component.scss
+++ b/projects/sandbox/src/app/collapsible/collapsible.component.scss
@@ -5,8 +5,9 @@
    display: inline-block;
    margin-right: 8px;
 }
-.collapse-button:focus {
-   outline: revert;
+.collapse-button:focus-visible {
+   outline: 2px solid #0066cc;
+   outline-offset: 2px;
 }
 
 .container {