feat: add a11y for audio player and the rest of the buttons

Author: MartinCupela

src/components/Attachment/Audio.tsx

@@ -46,12 +46,22 @@ const AudioAttachmentUI = ({ audioPlayer }: AudioAttachmentUIProps) => {
                 isPlaying={!!isPlaying}
                 secondsElapsed={secondsElapsed}
               />
-              <ProgressBar progress={progress ?? 0} seek={audioPlayer.seek} />
+              <ProgressBar
+                durationSeconds={durationSeconds}
+                progress={progress ?? 0}
+                secondsElapsed={secondsElapsed}
+                seek={audioPlayer.seek}
+              />
             </>
           ) : (
             <>
               <FileSizeIndicator fileSize={audioPlayer.fileSize} />
-              <ProgressBar progress={progress ?? 0} seek={audioPlayer.seek} />
+              <ProgressBar
+                durationSeconds={durationSeconds}
+                progress={progress ?? 0}
+                secondsElapsed={secondsElapsed}
+                seek={audioPlayer.seek}
+              />
             </>
           )}
         </div>

src/components/Attachment/Geolocation.tsx

@@ -100,19 +100,24 @@ export type GeolocationAttachmentMapPlaceholderProps = {
 
 const DefaultGeolocationAttachmentMapPlaceholder = ({
   location,
-}: GeolocationAttachmentMapPlaceholderProps) => (
-  <div
-    className='str-chat__message-attachment-geolocation__placeholder'
-    data-testid='geolocation-attachment-map-placeholder'
-  >
-    <IconLocation />
-    <a
-      className='str-chat__message-attachment-geolocation__placeholder-link'
-      href={`https://maps.google.com?q=${[location.latitude, location.longitude].join()}`}
-      rel='noreferrer'
-      target='_blank'
+}: GeolocationAttachmentMapPlaceholderProps) => {
+  const { t } = useTranslationContext();
+
+  return (
+    <div
+      className='str-chat__message-attachment-geolocation__placeholder'
+      data-testid='geolocation-attachment-map-placeholder'
     >
-      <ExternalLinkIcon />
-    </a>
-  </div>
-);
+      <IconLocation />
+      <a
+        aria-label={t('Open location in a map')}
+        className='str-chat__message-attachment-geolocation__placeholder-link'
+        href={`https://maps.google.com?q=${[location.latitude, location.longitude].join()}`}
+        rel='noreferrer'
+        target='_blank'
+      >
+        <ExternalLinkIcon />
+      </a>
+    </div>
+  );
+};

src/components/Attachment/LinkPreview/CardAudio.tsx

@@ -39,8 +39,10 @@ const SourceLink = ({
 );
 
 const audioPlayerStateSelector = (state: AudioPlayerState) => ({
+  durationSeconds: state.durationSeconds,
   isPlaying: state.isPlaying,
   progress: state.progressPercent,
+  secondsElapsed: state.secondsElapsed,
 });
 
 const AudioWidget = ({ mimeType, src }: { src: string; mimeType?: string }) => {
@@ -63,7 +65,7 @@ const AudioWidget = ({ mimeType, src }: { src: string; mimeType?: string }) => {
     src,
   });
 
-  const { isPlaying, progress } =
+  const { durationSeconds, isPlaying, progress, secondsElapsed } =
     useStateStore(audioPlayer?.state, audioPlayerStateSelector) ?? {};
 
   if (!audioPlayer) return;
@@ -73,7 +75,12 @@ const AudioWidget = ({ mimeType, src }: { src: string; mimeType?: string }) => {
       <div className='str-chat__message-attachment-audio-widget--play-controls'>
         <PlayButton isPlaying={!!isPlaying} onClick={audioPlayer.togglePlay} />
       </div>
-      <ProgressBar progress={progress ?? 0} seek={audioPlayer.seek} />
+      <ProgressBar
+        durationSeconds={durationSeconds}
+        progress={progress ?? 0}
+        secondsElapsed={secondsElapsed}
+        seek={audioPlayer.seek}
+      />
     </div>
   );
 };

src/components/Attachment/VoiceRecording.tsx

@@ -37,6 +37,7 @@ type VoiceRecordingPlayerUIProps = {
 // todo: finish creating a BaseAudioPlayer derived from VoiceRecordingPlayerUI and AudioAttachmentUI
 const VoiceRecordingPlayerUI = ({ audioPlayer }: VoiceRecordingPlayerUIProps) => {
   const { FileSizeIndicator = DefaultFileSizeIndicator } = useComponentContext();
+  const { t } = useTranslationContext();
   const {
     canPlayRecord,
     durationSeconds,
@@ -69,14 +70,19 @@ const VoiceRecordingPlayerUI = ({ audioPlayer }: VoiceRecordingPlayerUIProps) =>
             )}
           </div>
           <WaveProgressBar
+            durationSeconds={durationSeconds}
             progress={progress}
+            secondsElapsed={secondsElapsed}
             seek={audioPlayer.seek}
             waveformData={audioPlayer.waveformData || []}
           />
         </div>
       </div>
       <div className='str-chat__message-attachment__voice-recording-widget__right-section'>
         <PlaybackRateButton
+          aria-label={t('Playback speed {{ rate }}x', {
+            rate: playbackRate?.toString() ?? '1',
+          })}
           disabled={!canPlayRecord}
           onClick={audioPlayer.increasePlaybackRate}
         >

src/components/Attachment/__tests__/WaveProgressBar.test.tsx

@@ -127,15 +127,21 @@ describe('WaveProgressBar', () => {
     expect(screen.queryByTestId(PROGRESS_INDICATOR_TEST_ID)).not.toHaveStyle('left: 0px');
   });
 
-  it('adds keyboard focus semantics and supports keyboard seek', () => {
+  it('adds slider semantics and supports keyboard seek', () => {
     const seek = vi.fn();
     render(<WaveProgressBar progress={20} seek={seek} waveformData={originalSample} />);
 
     const root = screen.getByTestId(BAR_ROOT_TEST_ID);
+    expect(root).toHaveAttribute('role', 'slider');
+    expect(root).toHaveAttribute('aria-label', 'aria/Seek audio position');
     expect(root).toHaveAttribute('tabindex', '0');
     expect(root).toHaveAttribute('aria-valuemin', '0');
     expect(root).toHaveAttribute('aria-valuemax', '100');
     expect(root).toHaveAttribute('aria-valuenow', '20');
+    expect(root).toHaveAttribute(
+      'aria-valuetext',
+      'aria/Audio position {{ progress }} percent',
+    );
 
     fireEvent.keyDown(root, { key: 'End' });
 
@@ -144,4 +150,17 @@ describe('WaveProgressBar', () => {
       currentTarget: root,
     });
   });
+
+  it('seeks backward with PageDown key using larger step', () => {
+    const seek = vi.fn();
+    render(<WaveProgressBar progress={20} seek={seek} waveformData={originalSample} />);
+
+    const root = screen.getByTestId(BAR_ROOT_TEST_ID);
+    fireEvent.keyDown(root, { key: 'PageDown' });
+
+    expect(seek).toHaveBeenCalledWith({
+      clientX: 12,
+      currentTarget: root,
+    });
+  });
 });

src/components/AudioPlayback/__tests__/ProgressBar.test.tsx

@@ -4,14 +4,20 @@ import { fromPartial } from '@total-typescript/shoehorn';
 import { ProgressBar } from '../components/ProgressBar';
 
 describe('ProgressBar', () => {
-  it('adds keyboard focus semantics', () => {
+  it('adds slider semantics', () => {
     render(<ProgressBar progress={40} seek={vi.fn()} />);
 
     const root = screen.getByTestId('audio-progress');
+    expect(root).toHaveAttribute('role', 'slider');
+    expect(root).toHaveAttribute('aria-label', 'aria/Seek audio position');
     expect(root).toHaveAttribute('tabindex', '0');
     expect(root).toHaveAttribute('aria-valuemin', '0');
     expect(root).toHaveAttribute('aria-valuemax', '100');
     expect(root).toHaveAttribute('aria-valuenow', '40');
+    expect(root).toHaveAttribute(
+      'aria-valuetext',
+      'aria/Audio position {{ progress }} percent',
+    );
   });
 
   it('seeks forward with ArrowRight key', () => {
@@ -33,4 +39,41 @@ describe('ProgressBar', () => {
       currentTarget: root,
     });
   });
+
+  it('seeks forward with PageUp key using larger step', () => {
+    const seek = vi.fn();
+    render(<ProgressBar progress={40} seek={seek} />);
+
+    const root = screen.getByTestId('audio-progress');
+    vi.spyOn(root, 'getBoundingClientRect').mockReturnValue(
+      fromPartial<DOMRect>({
+        width: 200,
+        x: 10,
+      }),
+    );
+
+    fireEvent.keyDown(root, { key: 'PageUp' });
+
+    expect(seek).toHaveBeenCalledWith({
+      clientX: 110,
+      currentTarget: root,
+    });
+  });
+
+  it('adds time-based aria-valuetext when duration data is available', () => {
+    render(
+      <ProgressBar
+        durationSeconds={200}
+        progress={40}
+        secondsElapsed={80}
+        seek={vi.fn()}
+      />,
+    );
+
+    const root = screen.getByTestId('audio-progress');
+    expect(root).toHaveAttribute(
+      'aria-valuetext',
+      'aria/Audio position {{ elapsed }} of {{ duration }}',
+    );
+  });
 });

src/components/AudioPlayback/components/DurationDisplay.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import clsx from 'clsx';
+import { formatTime } from './formatTime';
 
 type DurationDisplayProps = {
   /** Whether audio is currently playing */
@@ -14,22 +15,6 @@ type DurationDisplayProps = {
   showRemaining?: boolean;
 };
 
-function formatTime(totalSeconds?: number, rounding: 'ceil' | 'floor' = 'ceil') {
-  if (totalSeconds == null || Number.isNaN(totalSeconds) || totalSeconds < 0) {
-    return null;
-  }
-  const roundedSeconds =
-    rounding === 'floor' ? Math.floor(totalSeconds) : Math.ceil(totalSeconds);
-  const hours = Math.floor(roundedSeconds / 3600);
-  const minutes = Math.floor((roundedSeconds % 3600) / 60);
-  const seconds = roundedSeconds % 60;
-  const minSec = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(
-    2,
-    '0',
-  )}`;
-  return hours ? `${String(hours).padStart(2, '0')}:${minSec}` : minSec;
-}
-
 export function DurationDisplay({
   className,
   duration,

src/components/AudioPlayback/components/ProgressBar.tsx

@@ -1,18 +1,31 @@
 import clsx from 'clsx';
 import React from 'react';
 import { handleProgressBarKeyboardSeek } from './keyboardSeek';
+import { getAudioTrackSliderAriaValueText } from './progressBarA11y';
 import { useInteractiveProgressBar } from './useInteractiveProgressBar';
 import type { SeekFn as AudioPlayerSeekFn } from '../AudioPlayer';
+import { useTranslationContext } from '../../../context';
 
 type SeekParams = Parameters<AudioPlayerSeekFn>[0];
 
 export type ProgressBarProps = {
   /** Progress expressed in fractional number value btw 0 and 100. */
   progress: number;
+  /** Total track duration in seconds. */
+  durationSeconds?: number;
+  /** Current elapsed position in seconds. */
+  secondsElapsed?: number;
   seek: (params: SeekParams) => void;
 } & Pick<React.ComponentProps<'div'>, 'className'>;
 
-export const ProgressBar = ({ className, progress, seek }: ProgressBarProps) => {
+export const ProgressBar = ({
+  className,
+  durationSeconds,
+  progress,
+  secondsElapsed,
+  seek,
+}: ProgressBarProps) => {
+  const { t } = useTranslationContext('ProgressBar');
   const {
     handleDrag,
     handleDragStart,
@@ -21,33 +34,47 @@ export const ProgressBar = ({ className, progress, seek }: ProgressBarProps) =>
     setProgressIndicator,
     setRoot,
   } = useInteractiveProgressBar({ progress, seek });
+  const normalizedProgress = Math.max(0, Math.min(100, progress));
+  const ariaValueText = getAudioTrackSliderAriaValueText({
+    durationSeconds,
+    progress: normalizedProgress,
+    secondsElapsed,
+    t,
+  });
 
   return (
     <div
+      aria-label={t('aria/Seek audio position')}
+      aria-orientation='horizontal'
       aria-valuemax={100}
       aria-valuemin={0}
-      aria-valuenow={Math.round(progress)}
+      aria-valuenow={Math.round(normalizedProgress)}
+      aria-valuetext={ariaValueText}
       className={clsx(
         'str-chat__message-attachment-audio-widget--progress-track',
         className,
       )}
-      data-progress={progress}
+      data-progress={normalizedProgress}
       data-testid='audio-progress'
       onClick={seek}
-      onKeyDown={(event) => handleProgressBarKeyboardSeek({ event, progress, seek })}
+      onKeyDown={(event) =>
+        handleProgressBarKeyboardSeek({ event, progress: normalizedProgress, seek })
+      }
       onPointerDown={handleDragStart}
       onPointerMove={handleDrag}
       onPointerUp={handleDragStop}
       ref={setRoot}
-      role='progressbar'
+      role='slider'
       style={
         {
-          '--str-chat__message-attachment-audio-widget-progress': progress + '%',
+          '--str-chat__message-attachment-audio-widget-progress':
+            normalizedProgress + '%',
         } as React.CSSProperties
       }
       tabIndex={0}
     >
       <div
+        aria-hidden='true'
         className='str-chat__message-attachment-audio-widget--progress-indicator'
         ref={setProgressIndicator}
         style={{ insetInlineStart: `${indicatorLeft}px` }}