diff --git a/packages/common/src/core/slickGrid.ts b/packages/common/src/core/slickGrid.ts index 09ce9ee77..09a816396 100644 --- a/packages/common/src/core/slickGrid.ts +++ b/packages/common/src/core/slickGrid.ts @@ -631,6 +631,7 @@ export class SlickGrid = Column, 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 = Column, 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 = Column, 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 = Column, 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 => {