From c85b3e4fd17939e4ff5cc12d012fa139eb137b68 Mon Sep 17 00:00:00 2001
From: Christopher Toth <q.alpha@gmail.com>
Date: Wed, 11 May 2022 17:40:43 -0600
Subject: [PATCH] feat(a11y): Added roles and labels to the playback controls
 (#2167)

---
 src/renderer/pages/player-page.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/renderer/pages/player-page.js b/src/renderer/pages/player-page.js
index 96568e6a..22faba6e 100644
--- a/src/renderer/pages/player-page.js
+++ b/src/renderer/pages/player-page.js
@@ -610,6 +610,8 @@ function renderPlayerControls (state) {
       key='skip-previous'
       className={'icon skip-previous float-left ' + prevClass}
       onClick={dispatcher('previousTrack')}
+      role='button'
+      aria-label='Previous track'
     >
       skip_previous
     </i>,
@@ -618,6 +620,8 @@ function renderPlayerControls (state) {
       key='play'
       className='icon play-pause float-left'
       onClick={dispatcher('playPause')}
+      role='button'
+      aria-label={state.playing.isPaused ? 'Play' : 'Pause'}
     >
       {state.playing.isPaused ? 'play_arrow' : 'pause'}
     </i>,
@@ -626,6 +630,8 @@ function renderPlayerControls (state) {
       key='skip-next'
       className={'icon skip-next float-left ' + nextClass}
       onClick={dispatcher('nextTrack')}
+      role='button'
+      aria-label='Next track'
     >
       skip_next
     </i>,
@@ -634,6 +640,8 @@ function renderPlayerControls (state) {
       key='fullscreen'
       className='icon fullscreen float-right'
       onClick={dispatcher('toggleFullScreen')}
+      role='button'
+      aria-label={state.window.isFullScreen ? 'Exit full screen' : 'Enter full screen'}
     >
       {state.window.isFullScreen ? 'fullscreen_exit' : 'fullscreen'}
     </i>
@@ -646,6 +654,8 @@ function renderPlayerControls (state) {
         key='subtitles'
         className={'icon closed-caption float-right ' + captionsClass}
         onClick={handleSubtitles}
+        role='button'
+        aria-label='Closed captions'
       >
         closed_caption
       </i>
@@ -727,6 +737,8 @@ function renderPlayerControls (state) {
       <i
         className='icon volume-icon float-left'
         onMouseDown={handleVolumeMute}
+        role='button'
+        aria-label='Mute'
       >
         {volumeIcon}
       </i>