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

@@ -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();
+			}
+		}
+	}
 }

src/structured-list/structured-list.component.ts

@@ -152,14 +152,14 @@ 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,
 					selected: row.selected,
 					name: this.name
 				});
 				this.onChange(row.value);
+				this.writeValue(row.value);
 			});
 		});
 		this.updateChildren();

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>
 	`