From b28da88cb91367c95a42c8a44819fdbd26c7e05f Mon Sep 17 00:00:00 2001 From: Stefan Dietz Date: Tue, 23 Jan 2024 16:01:08 +0100 Subject: [PATCH 1/3] Update readme --- .../components/src/components/table/readme.md | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/packages/components/src/components/table/readme.md b/packages/components/src/components/table/readme.md index 50881562e1..9c03f08380 100644 --- a/packages/components/src/components/table/readme.md +++ b/packages/components/src/components/table/readme.md @@ -121,15 +121,16 @@ Warum die Tabelle einen **Tabindex** hat, wird auf der folgenden Webseite beschr ## Properties -| Property | Attribute | Description | Type | Default | -| ----------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `_allowMultiSort` | `_allow-multi-sort` | Defines whether to allow multi sort. | `boolean \| undefined` | `undefined` | -| `_data` _(required)_ | `_data` | Defines the primary table data. | `KoliBriTableDataType[] \| string` | `undefined` | -| `_dataFoot` | `_data-foot` | Defines the data for the table footer. | `KoliBriTableDataType[] \| string \| undefined` | `undefined` | -| `_headers` _(required)_ | `_headers` | Defines the horizontal and vertical table headers. | `string \| { horizontal?: KoliBriTableHeaderCell[][] \| undefined; vertical?: KoliBriTableHeaderCell[][] \| undefined; }` | `undefined` | -| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` | -| `_minWidth` | `_min-width` | Defines the table min-width. | `string \| undefined` | `undefined` | -| `_pagination` | `_pagination` | Defines whether to show the data distributed over multiple pages. | `boolean \| string \| undefined \| { _page: number; } & { _on?: KoliBriPaginationButtonCallbacks \| undefined; _page?: number \| undefined; _max?: number \| undefined; _boundaryCount?: number \| undefined; _hasButtons?: boolean \| Stringified \| undefined; _pageSize?: number \| undefined; _pageSizeOptions?: Stringified \| undefined; _siblingCount?: number \| undefined; _customClass?: string \| undefined; _label?: string \| undefined; _tooltipAlign?: AlignPropType \| undefined; }` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ----------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `_allowMultiSort` | `_allow-multi-sort` | Defines whether to allow multi sort. | `boolean \| undefined` | `undefined` | +| `_data` _(required)_ | `_data` | Defines the primary table data. | `KoliBriTableDataType[] \| string` | `undefined` | +| `_dataFoot` | `_data-foot` | Defines the data for the table footer. | `KoliBriTableDataType[] \| string \| undefined` | `undefined` | +| `_headers` _(required)_ | `_headers` | Defines the horizontal and vertical table headers. | `string \| { horizontal?: KoliBriTableHeaderCell[][] \| undefined; vertical?: KoliBriTableHeaderCell[][] \| undefined; }` | `undefined` | +| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` | +| `_minWidth` | `_min-width` | Defines the table min-width. | `string \| undefined` | `undefined` | +| `_pagination` | `_pagination` | Defines whether to show the data distributed over multiple pages. | `boolean \| string \| undefined \| { _page: number; } & { _on?: KoliBriPaginationButtonCallbacks \| undefined; _page?: number \| undefined; _max?: number \| undefined; _boundaryCount?: number \| undefined; _hasButtons?: boolean \| Stringified \| undefined; _pageSize?: number \| undefined; _pageSizeOptions?: Stringified \| undefined; _siblingCount?: number \| undefined; _customClass?: string \| undefined; _label?: string \| undefined; _tooltipAlign?: AlignPropType \| undefined; }` | `undefined` | +| `_paginationPosition` | `_pagination-position` | Controls the position of the pagination. | `"both" \| "bottom" \| "top" \| undefined` | `'bottom'` | ## Dependencies From 23f705f51e177f2585ab0a7bd7ba742336e84415 Mon Sep 17 00:00:00 2001 From: Stefan Dietz Date: Tue, 23 Jan 2024 11:56:01 +0100 Subject: [PATCH 2/3] Fix table cell rendered with React read as 'clickable' --- .../samples/react/src/components/table/render-cell.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/samples/react/src/components/table/render-cell.tsx b/packages/samples/react/src/components/table/render-cell.tsx index 6467a5c08f..12f56315cc 100644 --- a/packages/samples/react/src/components/table/render-cell.tsx +++ b/packages/samples/react/src/components/table/render-cell.tsx @@ -76,10 +76,13 @@ const HEADERS: KoliBriTableHeaders = { /* Example 4: Render function using React */ render: (el) => { - el.setAttribute('role', 'presentation'); + const renderElement = document.createElement('div'); + renderElement.setAttribute('role', 'presentation'); + el.innerHTML = ''; + el.appendChild(renderElement); /* https://react.dev/reference/react-dom/client/createRoot */ - getRoot(el).render( + getRoot(renderElement).render(
Date: Tue, 23 Jan 2024 16:07:57 +0100 Subject: [PATCH 3/3] Fix input components read as 'clickable' because of event listener --- packages/components/src/components/input-color/component.tsx | 1 + packages/components/src/components/input-email/component.tsx | 1 + packages/components/src/components/input-file/component.tsx | 1 + packages/components/src/components/input-password/component.tsx | 1 + packages/components/src/components/input-text/component.tsx | 1 + packages/components/src/components/select/component.tsx | 1 + packages/components/src/components/textarea/component.tsx | 1 + 7 files changed, 7 insertions(+) diff --git a/packages/components/src/components/input-color/component.tsx b/packages/components/src/components/input-color/component.tsx index fc8b110976..629241d724 100644 --- a/packages/components/src/components/input-color/component.tsx +++ b/packages/components/src/components/input-color/component.tsx @@ -74,6 +74,7 @@ export class KolInputColor implements InputColorAPI { _tooltipAlign={this._tooltipAlign} _touched={this.state._touched} onClick={() => this.ref?.focus()} + role={`presentation` /* Avoid element being read as 'clickable' in NVDA */} > {hasExpertSlot ? ( diff --git a/packages/components/src/components/input-email/component.tsx b/packages/components/src/components/input-email/component.tsx index 35141059fd..1629096fb6 100644 --- a/packages/components/src/components/input-email/component.tsx +++ b/packages/components/src/components/input-email/component.tsx @@ -95,6 +95,7 @@ export class KolInputEmail implements InputEmailAPI { _tooltipAlign={this._tooltipAlign} _touched={this.state._touched} onClick={() => this.ref?.focus()} + role={`presentation` /* Avoid element being read as 'clickable' in NVDA */} > {hasExpertSlot ? ( diff --git a/packages/components/src/components/input-file/component.tsx b/packages/components/src/components/input-file/component.tsx index 6225e43f14..f1fa21f452 100644 --- a/packages/components/src/components/input-file/component.tsx +++ b/packages/components/src/components/input-file/component.tsx @@ -72,6 +72,7 @@ export class KolInputFile implements InputFileAPI { _tooltipAlign={this._tooltipAlign} _touched={this.state._touched} onClick={() => this.ref?.focus()} + role={`presentation` /* Avoid element being read as 'clickable' in NVDA */} > {hasExpertSlot ? ( diff --git a/packages/components/src/components/input-password/component.tsx b/packages/components/src/components/input-password/component.tsx index a6167fb65e..b73074521e 100644 --- a/packages/components/src/components/input-password/component.tsx +++ b/packages/components/src/components/input-password/component.tsx @@ -93,6 +93,7 @@ export class KolInputPassword implements InputPasswordAPI { _tooltipAlign={this._tooltipAlign} _touched={this.state._touched} onClick={() => this.ref?.focus()} + role={`presentation` /* Avoid element being read as 'clickable' in NVDA */} > {hasExpertSlot ? ( diff --git a/packages/components/src/components/input-text/component.tsx b/packages/components/src/components/input-text/component.tsx index 2239a41af2..02e00d7198 100644 --- a/packages/components/src/components/input-text/component.tsx +++ b/packages/components/src/components/input-text/component.tsx @@ -108,6 +108,7 @@ export class KolInputText implements InputTextAPI { _tooltipAlign={this._tooltipAlign} _touched={this.state._touched} onClick={() => this.ref?.focus()} + role={`presentation` /* Avoid element being read as 'clickable' in NVDA */} > {hasExpertSlot ? ( diff --git a/packages/components/src/components/select/component.tsx b/packages/components/src/components/select/component.tsx index 2f88b62e6f..0239242981 100644 --- a/packages/components/src/components/select/component.tsx +++ b/packages/components/src/components/select/component.tsx @@ -105,6 +105,7 @@ export class KolSelect implements SelectAPI { _tooltipAlign={this._tooltipAlign} _touched={this.state._touched} onClick={() => this.ref?.focus()} + role={`presentation` /* Avoid element being read as 'clickable' in NVDA */} > {hasExpertSlot ? ( diff --git a/packages/components/src/components/textarea/component.tsx b/packages/components/src/components/textarea/component.tsx index b302a37660..859e8bc248 100644 --- a/packages/components/src/components/textarea/component.tsx +++ b/packages/components/src/components/textarea/component.tsx @@ -85,6 +85,7 @@ export class KolTextarea implements TextareaAPI { _tooltipAlign={this._tooltipAlign} _touched={this.state._touched} onClick={() => this.ref?.focus()} + role={`presentation` /* Avoid element being read as 'clickable' in NVDA */} > {hasExpertSlot ? (