bryntum / support

An issues-only repository for the Bryntum project management component suite which includes powerful Grid, Scheduler, Calendar, Kanban Task Board and Gantt chart components all built in pure JS / CSS / TypeScript
https://www.bryntum.com
55 stars 6 forks source link

ARIA Label for a Column not updated properly #9944

Open chuckn0rris opened 2 months ago

chuckn0rris commented 2 months ago

Forum post

I am working on a project where I need to provide custom ARIA labels for each cell in a column that supports multiselect functionality. Specifically, I want the ARIA label to reflect the number of selected elements in the cell.

For example, in a column titled "Contacts," when a cell is focused, I would like the aria-label to be something like "Four contacts selected."

I have attempted to use the cellAriaLabel accessibility column config to achieve this, but I encountered some limitations:

Static String Limitation: The cellAriaLabel attribute appears to only accept static string values. This restricts me from dynamically generating the ARIA label based on the cell's data (i.e., the number of selected contacts).

Custom ARIA Label with setAttribute: I also tried to assign a custom ARIA label using setAttribute in the column's renderer function. However, when I click on the cell, the ARIA label reverts to the default value, overwriting my custom label.

Given these constraints, I am looking for guidance on how to implement a dynamic ARIA label for each cell in this scenario. Specifically, I would like to know:

Is there a way to pass a method or function to cellAriaLabel to dynamically generate the label based on the cell's value? If not, is there an alternative approach that would allow me to set and persist a custom ARIA label for each cell when it is focused or navigated to it? Your assistance in addressing this use case would be greatly appreciated.

Thank you for your support!

chuckn0rris commented 2 months ago

Fix for Column.js

onCellFocus(location) {
        this.location = location;

        if (!this._headerArialLabelSet) {
            this.updateHeaderAriaLabel(this.localizeProperty('ariaLabel'));
            this._headerArialLabelSet = true;
        }

        // Update cell aria-label if we have one configured
        if (location.rowIndex !== -1) {
            const ariaLabel = this.localizeProperty('cellAriaLabel');
            if (ariaLabel) {
                this.updateCellAriaLabel();
            {
        }
    }
matsbryntse commented 2 months ago

Also needs a new demo showing how to set a custom cell aria attribute based on Record contents