diff --git a/projects/sandbox/src/app/collapsible/collapsible.component.html b/projects/sandbox/src/app/collapsible/collapsible.component.html
index a717ad5..027f683 100644
--- a/projects/sandbox/src/app/collapsible/collapsible.component.html
+++ b/projects/sandbox/src/app/collapsible/collapsible.component.html
@@ -1,17 +1,23 @@
 <tree-node>
    <div class="container">
-      <div 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>
          }
-      </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..8a84b16 100644
--- a/projects/sandbox/src/app/collapsible/collapsible.component.scss
+++ b/projects/sandbox/src/app/collapsible/collapsible.component.scss
@@ -1,9 +1,14 @@
 .collapse-button {
+   all: unset;
    cursor: pointer;
    font-size: 24px;
    display: inline-block;
    margin-right: 8px;
 }
+.collapse-button:focus-visible {
+   outline: 2px solid #0066cc;
+   outline-offset: 2px;
+}
 
 .container {
    display: flex;