Add aria-readonly to readonly cells (#2379)

* Add aria-readonly * Update src/Cell.tsx Co-authored-by: Nicolas Stepien <[email protected]> Co-authored-by: Nicolas Stepien <[email protected]>
adazzle · Apr 27, 2021 · be8cd4a · be8cd4a
1 parent 24b9c6a
commit be8cd4a
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/src/Cell.tsx b/src/Cell.tsx
@@ -3,7 +3,7 @@ import type { RefAttributes } from 'react';
 import { css } from '@linaria/core';
 
 import { cellSelectedClassname } from './style';
-import { getCellStyle, getCellClassname } from './utils';
+import { getCellStyle, getCellClassname, isCellEditable } from './utils';
 import type { CellRendererProps } from './types';
 
 const cellCopied = css`
@@ -107,6 +107,7 @@ function Cell<R, SR>({
       aria-colindex={column.idx + 1} // aria-colindex is 1-based
       aria-selected={isCellSelected}
       aria-colspan={colSpan}
+      aria-readonly={isCellEditable(column, row) || undefined}
       ref={ref}
       className={className}
       style={getCellStyle(column, colSpan)}

diff --git a/src/utils/selectedCellUtils.ts b/src/utils/selectedCellUtils.ts
@@ -11,9 +11,12 @@ interface IsSelectedCellEditableOpts<R, SR> {
 export function isSelectedCellEditable<R, SR>({ selectedPosition, columns, rows, isGroupRow }: IsSelectedCellEditableOpts<R, SR>): boolean {
   const column = columns[selectedPosition.idx];
   const row = rows[selectedPosition.rowIdx];
+  return !isGroupRow(row) && isCellEditable(column, row);
+}
+
+export function isCellEditable<R, SR>(column: CalculatedColumn<R, SR>, row: R): boolean {
   return column.editor != null
     && !column.rowGroup
-    && !isGroupRow(row)
     && (typeof column.editable === 'function' ? column.editable(row) : column.editable) !== false;
 }