fix: accessibility - prevent the first text grid cell from being selected when tabbing

Author: guifry

src/frontend/view/customURLCellRenderer.ts

@@ -18,35 +18,6 @@ export class URLCellRenderer {
     this.eGui.innerHTML = `<a class="govuk-link" key=${this.getUniqueKey()} href="${
       params.value
     }">${params.value}</a>`
-    this.registerEventsListeners()
-  }
-
-  registerEventsListeners() {
-    document.addEventListener('keydown', (event) => {
-      if (
-        !['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Tab'].includes(
-          event.key
-        )
-      ) {
-        return
-      }
-      const {
-        colDef: { field },
-        rowIndex,
-      } = this.params
-      const focusedCell = this.params.api.getFocusedCell()
-      if (
-        focusedCell?.column.getColId() === field &&
-        focusedCell?.rowIndex === rowIndex
-      ) {
-        const innerLink = document.querySelector(
-          `a[key="${this.getUniqueKey()}"]`
-        )
-        if (innerLink instanceof HTMLElement) {
-          innerLink.focus()
-        }
-      }
-    })
   }
 
   getUniqueKey = () => {

src/frontend/view/view-grid.ts

@@ -75,9 +75,28 @@ const createAgGrid = () => {
     ...(sortConfig[field] || {}),
   }))
 
+  const suppressKeyboardEvent = (
+    params: SuppressKeyboardEventParams
+  ): boolean => {
+    return params.event.key.toUpperCase() === 'TAB'
+  }
+
+  const suppressHeaderKeyboardEvent = (params): boolean => {
+    const colNames = gridOptions.columnApi
+      .getAllDisplayedColumns()
+      .map((col) => col.colId)
+    const lastCol = colNames[colNames.length - 1]
+
+    return params.event.key.toUpperCase() === 'TAB' && params.column.getId() === lastCol
+  }
+
   const gridOptions = {
     rowData,
     columnDefs,
+    defaultColDef: {
+      suppressKeyboardEvent,
+      suppressHeaderKeyboardEvent,
+    },
     onPaginationChanged: function () {
       viewPagination(gridOptions)
     },