From 635b5121aa43a06359e2d9f6c598c028c6640351 Mon Sep 17 00:00:00 2001
From: Eduard Marcinco <edomarcinco@gmail.com>
Date: Wed, 6 Nov 2024 01:25:37 +0100
Subject: [PATCH] feat: add keyboard accessibility to structured list (#3039)

Co-authored-by: Akshat Patel <38994122+Akshat55@users.noreply.github.com>
---
 src/structured-list/list-row.component.ts     | 25 +++++++++----------
 .../structured-list.component.ts              |  2 +-
 .../structured-list.stories.ts                | 22 ++++++++++++++++
 3 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/src/structured-list/list-row.component.ts b/src/structured-list/list-row.component.ts
index 9a09b94ccd..91a7f85bc3 100644
--- a/src/structured-list/list-row.component.ts
+++ b/src/structured-list/list-row.component.ts
@@ -38,12 +38,13 @@ import { ListColumn } from "./list-column.component";
 		<ng-container *ngIf="selection">
 			<input
 				#input
-				tabindex="-1"
 				class="cds--structured-list-input cds--visually-hidden"
 				type="radio"
 				[value]="value"
 				[name]="name"
 				[title]="label"
+				(focus)="handleFocus(true)"
+				(blur)="handleFocus(false)"
 				(change)="onChange($event)"
 				[checked]="selected"/>
 			<div class="cds--structured-list-td">
@@ -80,7 +81,6 @@ export class ListRow implements AfterContentInit {
 	name = "list";
 
 	@HostBinding("class.cds--structured-list-row") wrapper = true;
-	@HostBinding("attr.tabindex") tabindex = this.selection ? "0" : null;
 	@HostBinding("attr.role") role = "row";
 
 	@ContentChildren(ListColumn) columns: QueryList<ListColumn>;
@@ -102,18 +102,17 @@ export class ListRow implements AfterContentInit {
 			this.input.nativeElement.click();
 		}
 	}
-
-	@HostListener("focus")
-	onfocus() {
-		this.isFocused = true;
-	}
-
-	@HostListener("blur")
-	onblur() {
-		this.isFocused = false;
-	}
-
+	
 	onChange(event) {
 		this.change.emit(event);
 	}
+
+	handleFocus(isFocused) {
+		if (this.selection) {
+			this.isFocused = isFocused;
+			if (this.isFocused) {
+				this.input.nativeElement.click();
+			}
+		}
+	}
 }
diff --git a/src/structured-list/structured-list.component.ts b/src/structured-list/structured-list.component.ts
index fae4abed28..944475219f 100644
--- a/src/structured-list/structured-list.component.ts
+++ b/src/structured-list/structured-list.component.ts
@@ -152,7 +152,6 @@ export class StructuredList implements AfterContentInit, ControlValueAccessor {
 		this.rows.forEach(row => {
 			setSelection(row);
 			row.name = this.name;
-			row.tabindex = this.selection ? "0" : null;
 			row.change.subscribe(() => {
 				this.selected.emit({
 					value: row.value,
@@ -160,6 +159,7 @@ export class StructuredList implements AfterContentInit, ControlValueAccessor {
 					name: this.name
 				});
 				this.onChange(row.value);
+				this.writeValue(row.value);
 			});
 		});
 		this.updateChildren();
diff --git a/src/structured-list/structured-list.stories.ts b/src/structured-list/structured-list.stories.ts
index 22fe7be52c..e2af5a79c2 100644
--- a/src/structured-list/structured-list.stories.ts
+++ b/src/structured-list/structured-list.stories.ts
@@ -105,6 +105,28 @@ const SelectionTemplate = (args) => ({
 					Pellentesque vulputate nisl a porttitor interdum.
 				</cds-list-column>
 			</cds-list-row>
+			<cds-list-row value="row3">
+				<cds-list-column>Row 3</cds-list-column>
+				<cds-list-column nowrap="true">Row Three</cds-list-column>
+				<cds-list-column>
+					Lorem ipsum dolor sit amet,
+					consectetur adipiscing elit. Nunc dui magna,
+					finibus id tortor sed, aliquet bibendum augue.
+					Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.
+					Pellentesque vulputate nisl a porttitor interdum.
+				</cds-list-column>
+			</cds-list-row>
+			<cds-list-row value="row4">
+				<cds-list-column>Row 4</cds-list-column>
+				<cds-list-column nowrap="true">Row Four</cds-list-column>
+				<cds-list-column>
+					Lorem ipsum dolor sit amet,
+					consectetur adipiscing elit. Nunc dui magna,
+					finibus id tortor sed, aliquet bibendum augue.
+					Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.
+					Pellentesque vulputate nisl a porttitor interdum.
+				</cds-list-column>
+			</cds-list-row>
 		</cds-structured-list>
 		<p>{{valueSelected}}</p>
 	`