LCFS - Improve Accessibility for AG Grid Filtering Components

[StuartGALL]

Description

Enhance the accessibility of multiple AG Grid filtering components to ensure keyboard navigation and screen reader compatibility.

The following components need reformatting:

1. Compliance Reports:

   • Current Status: Arrow keys cannot navigate between elements when trying to use dropdowns. (Arrow keys don't work once in dropdown menus).
   • Date Picker: Cannot use arrow keys with the date picker. (Please limit date to 4 characters).

2. Fuel Codes:

   • Date Picker: Keyboard keys become non-functional once on the date picker. (Please limit date to 4 characters).

3. Organizations:

   • Dropdowns: Keyboard key navigation through dropdowns is not working as intended. (Arrow keys don't work once in dropdown menus).

4. User Roles:

   • Dropdowns: Tabbing and keyboard key usage to interact with dropdowns are not functioning properly when trying to use the dropdowns. (Arrow keys don't work once in dropdown menus).
   • Selection: Keyboard keys cannot move or select items in dropdowns. (The arrow keys once in dropdown menus, as well as the enter key, won't work when trying to select any field user names, roles, email etc.).

5. Transactions:

   • Dropdowns: Transactions dropdown not working with enter key once tabbing into it. (The enter key once pressed doesn't work to activate the "dropdown" or "id", "type", "from", "to", "units" fields)

Each component must support full keyboard navigation and be compatible with screen readers.

Wireframe Link

N/A

Purpose and Benefit to the User

Improving accessibility ensures that all users, including those using assistive technologies, can interact with the AG Grid filtering components seamlessly. This aligns with WCAG compliance standards and enhances the usability of the application.

Acceptance Criteria

• All listed components allow navigation and interaction via keyboard.
• Screen readers correctly announce elements and their states.
• Testing confirms compliance with WCAG accessibility standards.

Development Checklist

• [ ] Ensure all elements in the Compliance Reports filtering (Current Status, Date Picker) are navigable with arrow keys and tabbing. (Arrow keys once in dropdown menus).
• [ ] Enable keyboard navigation and functionality in the Fuel Codes filtering date picker. (Please limit date to 4 characters).
• [ ] Make all columns in Organizations table with dropdowns fully navigable with the keyboard. (Arrow keys once in dropdown menus).
• [ ] Test keyboard and screen reader support for User Roles filtering dropdowns and ensure users can move and select using keyboard keys. (Arrow keys once in dropdown menus).
• [ ] Test keyboard and screen reader support for Transactions ensure users can move and select using the enter key. (enter key doesn't work to activate the dropdown or id, type, from, to, units etc).
• [ ] Validate changes against WCAG standards.

Notes

• Ensure consistent keyboard navigation patterns across all components.
• Focus on testing both Mac and Windows platforms for compatibility.

[dhaselhan]

Talked to Stuart on Datepickers, unfortunately the AG Grid Datepicker does not meet a lot of accessibility standards, but making a custom one is too much work at this point. I will be fixing year to only take 4 digits but we will re-visit an accessible calendar later.

[dhaselhan]

We will want to review AG Grids accessibility guidelines and make deicsions on what we want to do: https://www.ag-grid.com/javascript-data-grid/accessibility/

There is also currently code in place to disable most of the AG Grid keyboard shortcuts, that might be critical to accessiblity: https://www.ag-grid.com/javascript-data-grid/keyboard-navigation/