Fix table cells and inputs being read ad 'clickable' in NVDA (#5933)

public-ui · Jan 24, 2024 · a8f6fc5 · a8f6fc5
2 parents 9ff83f9 + 0aaf631
commit a8f6fc5
Show file tree

Hide file tree

Showing 8 changed files with 12 additions and 2 deletions.
diff --git 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 */}
 				>
 					<span slot="label">
 						{hasExpertSlot ? (

diff --git 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 */}
 				>
 					<span slot="label">
 						{hasExpertSlot ? (

diff --git 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 */}
 				>
 					<span slot="label">
 						{hasExpertSlot ? (

diff --git 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 */}
 				>
 					<span slot="label">
 						{hasExpertSlot ? (

diff --git 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 */}
 				>
 					<span slot="label">
 						{hasExpertSlot ? (

diff --git 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 */}
 				>
 					<span slot="label">
 						{hasExpertSlot ? (

diff --git 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 */}
 				>
 					<span slot="label">
 						{hasExpertSlot ? (

diff --git 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(
 						<div
 							style={{
 								display: `grid`,