From 616062d1aedf8a44099a8b141dd1ec4a3e5c8ef7 Mon Sep 17 00:00:00 2001
From: aquilaafuadajo <aquilaafuadajo@gmail.com>
Date: Wed, 27 Mar 2024 12:16:33 +0100
Subject: [PATCH 1/2] keyboard accessibility post bulk actions (wip)

---
 .../src/app/post/post-preview/post-preview.component.html      | 3 +--
 .../src/app/post/post-preview/post-preview.component.ts        | 3 ++-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/web-mzima-client/src/app/post/post-preview/post-preview.component.html b/apps/web-mzima-client/src/app/post/post-preview/post-preview.component.html
index 772da88e31..a82df97c04 100644
--- a/apps/web-mzima-client/src/app/post/post-preview/post-preview.component.html
+++ b/apps/web-mzima-client/src/app/post/post-preview/post-preview.component.html
@@ -1,7 +1,6 @@
 <div
   class="post"
   *ngIf="post"
-  (click)="postClicked($event)"
   [ngStyle]="{ '--color': post.color || 'var(--color-neutral-100)' }"
   [ngClass]="{
     'post--feed': feedView,
@@ -10,7 +9,7 @@
 >
   <div class="post__head">
     <ng-container *ngIf="selectable">
-      <mat-checkbox [(ngModel)]="isChecked"></mat-checkbox>
+      <mat-checkbox [(ngModel)]="isChecked" (ngModelChange)="postClicked($event)"></mat-checkbox>
     </ng-container>
     <app-post-head
       [post]="post"
diff --git a/apps/web-mzima-client/src/app/post/post-preview/post-preview.component.ts b/apps/web-mzima-client/src/app/post/post-preview/post-preview.component.ts
index ca6f3ba2e8..6e542c6ae1 100644
--- a/apps/web-mzima-client/src/app/post/post-preview/post-preview.component.ts
+++ b/apps/web-mzima-client/src/app/post/post-preview/post-preview.component.ts
@@ -63,7 +63,8 @@ export class PostPreviewComponent implements OnInit, OnChanges {
     this.details.next(true);
   }
 
-  public postClicked(event: MouseEvent): void {
+  public postClicked(event: any): void {
+    console.log(this.isChecked);
     if (this.selectable) {
       event.stopPropagation();
       this.isChecked = !this.isChecked;

From 2adba58d163b1e02c2950fe949849ecc6c9cbd5c Mon Sep 17 00:00:00 2001
From: aquilaafuadajo <aquilaafuadajo@gmail.com>
Date: Wed, 27 Mar 2024 13:01:52 +0100
Subject: [PATCH 2/2] add keyboard support for post bulk actions

---
 .../src/app/post/post-preview/post-preview.component.html  | 7 ++++++-
 .../src/app/post/post-preview/post-preview.component.ts    | 4 +---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/apps/web-mzima-client/src/app/post/post-preview/post-preview.component.html b/apps/web-mzima-client/src/app/post/post-preview/post-preview.component.html
index a82df97c04..bcdf51ca97 100644
--- a/apps/web-mzima-client/src/app/post/post-preview/post-preview.component.html
+++ b/apps/web-mzima-client/src/app/post/post-preview/post-preview.component.html
@@ -1,6 +1,7 @@
 <div
   class="post"
   *ngIf="post"
+  (click)="$event.stopPropagation(); postClicked()"
   [ngStyle]="{ '--color': post.color || 'var(--color-neutral-100)' }"
   [ngClass]="{
     'post--feed': feedView,
@@ -9,7 +10,11 @@
 >
   <div class="post__head">
     <ng-container *ngIf="selectable">
-      <mat-checkbox [(ngModel)]="isChecked" (ngModelChange)="postClicked($event)"></mat-checkbox>
+      <mat-checkbox
+        [checked]="isChecked"
+        (keydown.enter)="$event.preventDefault(); postClicked()"
+        (keydown.Space)="$event.preventDefault(); postClicked()"
+      ></mat-checkbox>
     </ng-container>
     <app-post-head
       [post]="post"
diff --git a/apps/web-mzima-client/src/app/post/post-preview/post-preview.component.ts b/apps/web-mzima-client/src/app/post/post-preview/post-preview.component.ts
index 6e542c6ae1..6b95807d41 100644
--- a/apps/web-mzima-client/src/app/post/post-preview/post-preview.component.ts
+++ b/apps/web-mzima-client/src/app/post/post-preview/post-preview.component.ts
@@ -63,10 +63,8 @@ export class PostPreviewComponent implements OnInit, OnChanges {
     this.details.next(true);
   }
 
-  public postClicked(event: any): void {
-    console.log(this.isChecked);
+  public postClicked(): void {
     if (this.selectable) {
-      event.stopPropagation();
       this.isChecked = !this.isChecked;
       this.selected.emit(this.isChecked);
     }