fix: add grid & cell role for screen ready accessibility (#1337)

- this PR replicates an old SlickGrid PR (except the focus which can cause other issues) mleibman/SlickGrid#616
ghiscoding · Jan 16, 2024 · 7309fa8 · 7309fa8
1 parent 454ce99
commit 7309fa8
Showing 1 changed file with 8 additions and 5 deletions.
diff --git a/packages/common/src/core/slickGrid.ts b/packages/common/src/core/slickGrid.ts
@@ -631,6 +631,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
     this._container.style.outline = String(0);
     this._container.classList.add(this.uid);
     this._container.classList.add('ui-widget');
+    this._container.setAttribute('role', 'grid');
 
     const containerStyles = window.getComputedStyle(this._container);
     if (!(/relative|absolute|fixed/).test(containerStyles.position)) {
@@ -1583,7 +1584,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
       const headerTarget = this.hasFrozenColumns() ? ((i <= this._options.frozenColumn!) ? this._headerL : this._headerR) : this._headerL;
       const headerRowTarget = this.hasFrozenColumns() ? ((i <= this._options.frozenColumn!) ? this._headerRowL : this._headerRowR) : this._headerRowL;
 
-      const header = createDomElement('div', { id: `${this.uid + m.id}`, dataset: { id: String(m.id) }, className: 'ui-state-default slick-state-default slick-header-column' }, headerTarget);
+      const header = createDomElement('div', { id: `${this.uid + m.id}`, dataset: { id: String(m.id) }, role: 'columnheader', className: 'ui-state-default slick-state-default slick-header-column' }, headerTarget);
       if (m.toolTip) {
         header.title = m.toolTip;
       }
@@ -3264,7 +3265,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
 
     const frozenRowOffset = this.getFrozenRowOffset(row);
 
-    const rowDiv = createDomElement('div', { className: `ui-widget-content ${rowCss}`, style: { top: `${this.getRowTop(row) - frozenRowOffset}px` } });
+    const rowDiv = createDomElement('div', { className: `ui-widget-content ${rowCss}`, role: 'row', style: { top: `${this.getRowTop(row) - frozenRowOffset}px` } });
     let rowDivR: HTMLElement | undefined;
     divArrayL.push(rowDiv);
 
@@ -3356,9 +3357,11 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
     }
 
     const toolTipText = (formatterResult as FormatterResultObject)?.toolTip ? `${(formatterResult as FormatterResultObject).toolTip}` : '';
-    const cellDiv = document.createElement('div');
-    cellDiv.className = `${cellCss} ${addlCssClasses || ''}`.trim();
-    cellDiv.setAttribute('title', toolTipText);
+    const cellDiv = createDomElement('div', { className: `${cellCss} ${addlCssClasses || ''}`.trim(), role: 'gridcell', tabIndex: -1 });
+    cellDiv.setAttribute('aria-describedby', this.uid + m.id);
+    if (toolTipText) {
+      cellDiv.setAttribute('title', toolTipText);
+    }
 
     if (m.hasOwnProperty('cellAttrs') && m.cellAttrs instanceof Object) {
       Object.keys(m.cellAttrs).forEach(key => {