From 16ea7aef8a5f13e4cff5984f182808b7cc952b30 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Thu, 19 Sep 2024 15:49:33 +0200
Subject: [PATCH] Fix channel chart accessibility

---
 .../my-video-channels.component.html          |  1 +
 .../my-video-channels.component.ts            | 21 ++++++++++++++++---
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
index 58a43272e..336a46214 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
@@ -61,6 +61,7 @@
               *ngIf="chartOptions && videoChannelsChartData && videoChannelsChartData[i]"
               width="40vw" height="100px"
               type="line" [data]="videoChannelsChartData[i]" [options]="chartOptions"
+              [ariaLabel]="getChartAriaLabel(videoChannelsChartData[i])"
             ></p-chart>
           </ng-template>
         </div>
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts
index a0060864e..465886e76 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts
@@ -19,6 +19,8 @@ import { DeleteButtonComponent } from '../../shared/shared-main/buttons/delete-b
 import { EditButtonComponent } from '../../shared/shared-main/buttons/edit-button.component'
 import { ChannelsSetupMessageComponent } from '../../shared/shared-main/misc/channels-setup-message.component'
 
+type CustomChartData = (ChartData & { startDate: string, total: number })
+
 @Component({
   templateUrl: './my-video-channels.component.html',
   styleUrls: [ './my-video-channels.component.scss' ],
@@ -42,7 +44,7 @@ import { ChannelsSetupMessageComponent } from '../../shared/shared-main/misc/cha
 export class MyVideoChannelsComponent {
   videoChannels: VideoChannel[] = []
 
-  videoChannelsChartData: ChartData[]
+  videoChannelsChartData: CustomChartData[]
 
   chartOptions: ChartOptions
 
@@ -146,8 +148,15 @@ export class MyVideoChannelsComponent {
               fill: false,
               borderColor: '#c6c6c6'
             }
-          ]
-        } as ChartData))
+          ],
+
+          total: v.viewsPerDay.map(day => day.views)
+            .reduce((p, c) => p + c, 0),
+
+          startDate: v.viewsPerDay.length !== 0
+            ? v.viewsPerDay[0].date.toLocaleDateString()
+            : ''
+        }))
 
         this.buildChartOptions()
 
@@ -207,4 +216,10 @@ export class MyVideoChannelsComponent {
       }
     }
   }
+
+  getChartAriaLabel (data: CustomChartData) {
+    if (!data.startDate) return ''
+
+    return formatICU($localize`${data.total} {value, plural, =1 {view} other {views}} since ${data.startDate}`, { value: data.total })
+  }
 }