Improve chevron toggle accessibility using button element and aria-expanded

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: 2 people

app/assets/stylesheets/pages/case_contacts.scss

@@ -148,6 +148,10 @@
 
 .expand-toggle {
   display: inline-block;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  padding: 0;
   transition: transform 0.3s;
 
   &.expanded {

app/javascript/__tests__/dashboard.test.js

@@ -151,10 +151,10 @@ describe('defineCaseContactsTable', () => {
         expect(columns[1].searchable).toBe(false)
       })
 
-      it('renders chevron-down icon', () => {
+      it('renders chevron-down icon as an accessible button', () => {
         const rendered = columns[1].render(null, 'display', {})
 
-        expect(rendered).toBe('<i class="fa-solid fa-chevron-down expand-toggle" style="cursor: pointer;"></i>')
+        expect(rendered).toBe('<button type="button" class="expand-toggle" aria-expanded="false" aria-label="Expand row details"><i class="fa-solid fa-chevron-down" aria-hidden="true"></i></button>')
       })
     })
 

app/javascript/src/dashboard.js

@@ -65,7 +65,7 @@ const defineCaseContactsTable = function () {
         data: null,
         orderable: false,
         searchable: false,
-        render: () => '<i class="fa-solid fa-chevron-down expand-toggle" style="cursor: pointer;"></i>'
+        render: () => '<button type="button" class="expand-toggle" aria-expanded="false" aria-label="Expand row details"><i class="fa-solid fa-chevron-down" aria-hidden="true"></i></button>'
       },
       { // Date column (index 2)
         data: 'occurred_at',
@@ -161,10 +161,10 @@ const defineCaseContactsTable = function () {
 
     if (row.child.isShown()) {
       row.child.hide()
-      $(this).removeClass('expanded')
+      $(this).removeClass('expanded').attr('aria-expanded', 'false')
     } else {
       row.child(buildExpandedContent(row.data())).show()
-      $(this).addClass('expanded')
+      $(this).addClass('expanded').attr('aria-expanded', 'true')
     }
   })
 }