Change focus element in scrollable tables in order to fix screen read…

…er output (#6106)
public-ui · Feb 28, 2024 · 04e0697 · 04e0697
2 parents 468f5cb + d7e9070
commit 04e0697
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 9 deletions.
diff --git a/packages/components/src/components/table/component.tsx b/packages/components/src/components/table/component.tsx
@@ -837,7 +837,7 @@ export class KolTable implements TableAPI {
 				{this.pageEndSlice > 0 && this.showPagination && paginationTop}
 
 				{/* Firefox automatically makes the following div focusable when it has a scrollbar. We implement a similar behavior cross-browser by allowing the
-				 * <caption> to receive focus. Hence, we disable focus for the div to avoid having two focusable elements:
+				 * <div class="focus-element"> to receive focus. Hence, we disable focus for the div to avoid having two focusable elements:
 				 *   tabindex="-1" prevents keyboard-focus,
 				 *   catching the mouseDown event prevents click-focus
 				 */}
@@ -855,7 +855,17 @@ export class KolTable implements TableAPI {
 							minWidth: this.state._minWidth,
 						}}
 					>
-						<caption tabindex={this.tableDivElementHasScrollbar ? '0' : undefined}>{this.state._label}</caption>
+						{/*
+						 * The following element allows the table to receive focus without providing redundant content to screen readers.
+						 * The `div` is technically not allowed here. But any allowed element would mutate the table semantics. Additionally, the `&nbsp;` is necessary to
+						 * prevent screen readers from just reading "blank".
+						 */}
+						<div class="focus-element" tabindex={this.tableDivElementHasScrollbar ? '0' : undefined} aria-describedby="caption">
+							&nbsp;
+						</div>
+
+						<caption id="caption">{this.state._label}</caption>
+
 						{Array.isArray(this.state._headers.horizontal) && (
 							<thead>
 								{this.state._headers.horizontal.map((cols, rowIndex) => (

diff --git a/packages/components/src/components/table/style.scss b/packages/components/src/components/table/style.scss
@@ -20,11 +20,14 @@
 		text-align: start;
 	}
 
-	caption:focus {
+	.focus-element {
+		font-size: 0;
+	}
+	.focus-element:focus {
 		outline: 0 !important;
 	}
 
-	.table:has(caption:focus) {
+	.table:has(.focus-element:focus) {
 		/* @see https://remysharp.com/til/css/focus-ring-default-styles */
 		outline: 5px auto Highlight;
 		outline: 5px auto -webkit-focus-ring-color;

diff --git a/packages/themes/bmf/src/index.ts b/packages/themes/bmf/src/index.ts
@@ -1577,7 +1577,7 @@ export const BMF = KoliBri.createTheme('bmf', {
 			overflow-y: hidden;
 		}
 
-		.table:has(caption:focus) {
+		.table:has(.focus-element:focus) {
 			outline-color: var(--color-ocean);
 			outline-style: solid;
 			outline-width: 3px;

diff --git a/packages/themes/default/src/components/table.scss b/packages/themes/default/src/components/table.scss
@@ -26,7 +26,7 @@
 	.table {
 		padding: 0.5rem;
 	}
-	.table:has(caption:focus) {
+	.table:has(.focus-element:focus) {
 		outline-color: var(--color-primary-variant);
 		outline-offset: 2px;
 		outline-style: solid;

diff --git a/packages/themes/ecl/src/components/ecl-ec/table.scss b/packages/themes/ecl/src/components/ecl-ec/table.scss
@@ -23,7 +23,7 @@
 	.table {
 		padding: 0.5em;
 	}
-	.table:has(caption:focus) {
+	.table:has(.focus-element:focus) {
 		outline-color: var(--color-blue);
 		outline-offset: 2px;
 		outline-style: solid;

diff --git a/packages/themes/ecl/src/components/ecl-eu/table.scss b/packages/themes/ecl/src/components/ecl-eu/table.scss
@@ -23,7 +23,7 @@
 	.table {
 		padding: 0.5em;
 	}
-	.table:has(caption:focus) {
+	.table:has(.focus-element:focus) {
 		outline-color: var(--color-blue);
 		outline-offset: 2px;
 		outline-style: solid;

diff --git a/packages/themes/itzbund/src/components/table.scss b/packages/themes/itzbund/src/components/table.scss
@@ -11,7 +11,7 @@
 	.table {
 		padding: 0.5em;
 	}
-	.table:has(caption:focus) {
+	.table:has(.focus-element:focus) {
 		outline-color: var(--color-petrol);
 		outline-offset: 2px;
 		outline-style: solid;