feat(table): add aria label in editors

DevoInc · Nov 14, 2024 · f9e8cc6 · f9e8cc6
1 parent 4ce526d
commit f9e8cc6
Show file tree

Hide file tree

Showing 11 changed files with 47 additions and 9 deletions.
diff --git a/packages/table/src/editors/BooleanEditor/BooleanEditor.tsx b/packages/table/src/editors/BooleanEditor/BooleanEditor.tsx
@@ -2,12 +2,15 @@ import * as React from 'react';
 import { SwitchControl } from '@devoinc/genesys-ui';
 
 import type { TCellEditor } from '../../declarations';
+import { TContextTextEditorParams } from '../TextEditor';
 
-export const BooleanEditor: React.FC<TCellEditor> = ({ value, onChange }) => (
+export const BooleanEditor: React.FC<TCellEditor> = ({ value, onChange, colDef }) => (
   <SwitchControl
     size="sm"
     checked={!!value}
-    aria-label={'Switch'}
+    aria-label={
+      (colDef?.context as TContextTextEditorParams)?.texts?.editorLabel ?? value as string
+    }
     onChange={() => {
       if (onChange) {
         onChange(!value);

diff --git a/packages/table/src/editors/NumberEditor/NumberEditor.tsx b/packages/table/src/editors/NumberEditor/NumberEditor.tsx
@@ -3,11 +3,14 @@ import React, { FormEvent } from 'react';
 import { InputControl } from '@devoinc/genesys-ui';
 
 import type { TCellEditor } from '../../declarations';
+import { TContextTextEditorParams } from '../TextEditor';
 
-export const NumberEditor: React.FC<TCellEditor> = ({ value, onChange }) => (
+export const NumberEditor: React.FC<TCellEditor> = ({ value, onChange, colDef }) => (
   <InputControl
     type={'number'}
-    aria-label={'Number input'}
+    aria-label={
+      (colDef?.context as TContextTextEditorParams)?.texts?.editorLabel ?? value as string
+    }
     value={String(value)}
     onChange={(event: FormEvent) => {
       onChange(parseInt((event.target as HTMLInputElement).value, 10));

diff --git a/packages/table/src/editors/OptionsEditor/OptionsEditor.tsx b/packages/table/src/editors/OptionsEditor/OptionsEditor.tsx
@@ -6,6 +6,7 @@ import { ROW_HEIGHT_MD } from '../../constants';
 import type { TCellEditor } from '../../declarations';
 import { TableContext } from '../../context';
 import { type TContextOptions, getSelectOptions } from '../../facade';
+import { TContextTextEditorParams } from '../TextEditor';
 
 export const OptionsEditor: React.FC<TCellEditor> = ({
   value,
@@ -30,6 +31,9 @@ export const OptionsEditor: React.FC<TCellEditor> = ({
       options={getSelectOptions(options)}
       autoFocus
       size={density === 'compact' && rowHeight <= ROW_HEIGHT_MD ? 'sm' : 'md'}
+      aria-label={
+        (colDef?.context as TContextTextEditorParams)?.texts?.editorLabel ?? value as string
+      }
     />
   );
 };
diff --git a/packages/table/src/editors/Table.stories.tsx b/packages/table/src/editors/Table.stories.tsx
@@ -30,10 +30,10 @@ const data = Holo.of()
       Holo.chance.pickone(['read', 'view', 'inProgress', 'completed']),
     picture: 'avatar',
   })
-  .repeat(1)
+  .repeat(9)
   .generate();
 
-const colDefs: TColDef = [
+const colDefs: TColDef[] = [
   {
     id: 'id',
     preset: 'text',

diff --git a/packages/table/src/editors/TextAreaEditor/TextAreaEditor.tsx b/packages/table/src/editors/TextAreaEditor/TextAreaEditor.tsx
@@ -4,12 +4,15 @@ import { TextareaControl } from '@devoinc/genesys-ui';
 import type { TCellEditor } from '../../declarations';
 
 import { EditorFloatingWrapper } from '../components';
+import { TContextTextEditorParams } from '../TextEditor';
 
-export const TextAreaEditor: React.FC<TCellEditor> = ({ value, onChange }) => (
+export const TextAreaEditor: React.FC<TCellEditor> = ({ value, onChange, colDef }) => (
   <EditorFloatingWrapper>
     <TextareaControl
       rows={6}
-      aria-label={'TextArea input'}
+      aria-label={
+        (colDef?.context as TContextTextEditorParams)?.texts?.editorLabel ?? value as string
+      }
       value={String(value)}
       onChange={(event: FormEvent) => {
         if (onChange) {

diff --git a/packages/table/src/editors/TextEditor/TextEditor.tsx b/packages/table/src/editors/TextEditor/TextEditor.tsx
@@ -23,7 +23,7 @@ export const TextEditor: React.FC<TCellEditor> = ({
       size={density === 'compact' && rowHeight <= ROW_HEIGHT_MD ? 'sm' : 'md'}
       autoFocus
       aria-label={
-        (colDef?.context as TContextTextEditorParams)?.texts?.editorLabel
+        (colDef?.context as TContextTextEditorParams)?.texts?.editorLabel ?? value as string
       }
       value={String(value)}
       onChange={(event: React.FormEvent) =>

diff --git a/packages/table/src/presets/column/boolean.ts b/packages/table/src/presets/column/boolean.ts
@@ -10,4 +10,9 @@ export const boolean: TColDef = {
   cellEditor: BooleanEditor,
   cellFilter: BooleanFilter,
   minWidth: 100,
+  context: {
+    texts: {
+      editorLabel: 'Edit this boolean content',
+    },
+  },
 };
diff --git a/packages/table/src/presets/column/link.ts b/packages/table/src/presets/column/link.ts
@@ -9,4 +9,9 @@ export const link: TColDef = {
   cellRenderer: LinkRenderer,
   cellEditor: TextEditor,
   cellFilter: TextFilter,
+  context: {
+    texts: {
+      editorLabel: 'Edit this link content',
+    },
+  },
 };
diff --git a/packages/table/src/presets/column/longText/longText.ts b/packages/table/src/presets/column/longText/longText.ts
@@ -11,4 +11,9 @@ export const longText: TColDef = {
   cellEditor: TextAreaEditor,
   rowHeight: ROW_HEIGHT_LG,
   cellFilter: TextFilter,
+  context: {
+    texts: {
+      editorLabel: 'Edit this text content',
+    },
+  },
 };
diff --git a/packages/table/src/presets/column/number.ts b/packages/table/src/presets/column/number.ts
@@ -9,4 +9,9 @@ export const number: TColDef = {
   cellEditor: NumberEditor,
   align: 'right',
   cellFilter: NumberFilter,
+  context: {
+    texts: {
+      editorLabel: 'Edit this number content',
+    },
+  },
 };
diff --git a/packages/table/src/presets/column/options.ts b/packages/table/src/presets/column/options.ts
@@ -9,4 +9,9 @@ export const options: TColDef = {
   cellEditor: OptionsEditor,
   cellFilter: OptionsFilter,
   minWidth: 100,
+  context: {
+    texts: {
+      editorLabel: 'Edit this select content',
+    },
+  },
 };