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;