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] 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;