I'm using AG Grid in a Salesforce LWC project and have implemented a custom header checkbox for select-all functionality. The checkbox is rendered in the header using a custom class (not AG Grid’s built-in select-all). Here’s a simplified version of my code:
class CustomHeaderCheckbox {
init(params) {
this.eGui = document.createElement("div");
const checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.setAttribute("tabindex", "0");
checkbox.setAttribute("aria-label", "Select All");
this.eGui.appendChild(checkbox);
// ... event listeners, etc ...
}
getGui() { return this.eGui; }
destroy() { /* cleanup */ }
}
The problem: The checkbox is visible and works with the mouse. Keyboard users cannot tab to or interact with the checkbox. When tabbing through the grid headers, focus lands on the header cell container, not the checkbox. Pressing Tab again skips to the next header cell, not into the checkbox. I want keyboard users to be able to tab to the checkbox and toggle it with Space/Enter, just like AG Grid’s built-in select-all.
What I’ve tried:
- Setting tabindex="0" on the checkbox and tabindex="-1" on the container.
- Programmatically moving focus to the checkbox when the container receives focus.
- Implementing a focus() method on the custom header class (as AG Grid docs suggest). Using MutationObserver to force focus.
None of these approaches result in keyboard users being able to tab to and toggle the checkbox as they can with AG Grid’s built-in select-all. Questions: Is there a supported way to make a custom AG Grid header checkbox fully accessible to keyboard users (tab, space, enter)? Is it possible to mimic the accessibility behavior of AG Grid’s built-in select-all checkbox in a custom header? Are there any workarounds or best practices for making custom header controls accessible in AG Grid?
Any code samples or accessibility tips would be greatly appreciated!