Merge pull request #1134 from owi92/screen-reader-issues

Address some screen reader issues

src/i18n/locales/de.json

@@ -77,8 +77,9 @@
   "sources-audio-reselect-audio": "Audio neu auswählen",
   "sources-audio-device": "Gerät",
 
-  "share-desktop": "Bildschirm teilen",
-  "share-camera": "Kamera teilen",
+  "share-display": "Bildschirm teilen",
+  "share-user": "Kamera teilen",
+  "share-display-and-user": "Bildschirm und Kamera teilen",
   "state-paused": "Pause",
   "state-recording": "Aufnahme",
   "state-waiting": "Warten",
@@ -177,6 +178,8 @@
       "label": "Aufnahme speichern",
       "upload-button": "Hochladen",
       "save-locally": "Lokal speichern",
+      "save-desktop-locally": "Bildschirmaufnahme lokal speichern",
+      "save-video-locally": "Kameraaufnahme lokal speichern",
       "recording-saved": "Aufnahme gespeichert",
       "finish-button": "Abschließen"
     }

src/i18n/locales/el.json

@@ -12,8 +12,8 @@
   "save-creation-form-invalid": "Παρακαλώ ορίστε τίτλο και παρουσιαστή",
   "save-creation-label-presenter": "Παρουσιαστής",
   "save-creation-label-title": "Τίτλος",
-  "share-desktop": "Κοινοποίηση επιφάνειας εργασίας",
-  "share-camera": "Κοινοποίηση κάμερας",
+  "share-display": "Κοινοποίηση επιφάνειας εργασίας",
+  "share-user": "Κοινοποίηση κάμερας",
   "state-paused": "Παύση",
   "state-recording": "Εγγραφή",
   "state-waiting": "Αναμονή",

src/i18n/locales/en.json

@@ -38,8 +38,9 @@
   "save-creation-return-to-no-label": "Exit Opencast Studio and go back",
   "save-creation-new-recording": "Start a new recording",
   "save-creation-new-recording-warning": "By starting a new recording, the current recording(s) will be discarded in this application (any uploaded or downloaded recording(s) will not be affected). Are you sure?",
-  "share-desktop": "Share desktop",
-  "share-camera": "Share camera",
+  "share-display": "Share display",
+  "share-user": "Share camera",
+  "share-display-and-user": "Share display & camera",
   "state-paused": "Paused",
   "state-recording": "Recording",
   "state-waiting": "Waiting",
@@ -179,6 +180,8 @@
       "label": "Save video",
       "upload-button": "Upload",
       "save-locally": "Save locally",
+      "save-desktop-locally": "Save display recording locally",
+      "save-video-locally": "Save camera recording locally",
       "recording-saved": "Recording saved",
       "finish-button": "Finish"
     }

src/i18n/locales/es.json

@@ -37,8 +37,8 @@
 
   "save-creation-new-recording": "Empezar una nueva grabación",
   "save-creation-new-recording-warning": "Al comenzar una nueva grabación, la grabación actual se descartará (las grabaciones subidas o descargadas no se verán afectadas). ¿Estás seguro?",
-  "share-desktop": "Compartir escritorio",
-  "share-camera": "Compartir cámara",
+  "share-display": "Compartir escritorio",
+  "share-user": "Compartir cámara",
   "state-paused": "Pausado",
   "state-recording": "Grabando",
   "state-waiting": "Esperando",

src/i18n/locales/fa.json

@@ -12,8 +12,8 @@
   "save-creation-form-invalid": "لطفا عنوان و مجری را تعیین کنید",
   "save-creation-label-presenter": "ارائه دهنده",
   "save-creation-label-title": "عنوان",
-  "share-desktop": "اشتراک دسکتاپ (بدون صدا)",
-  "share-camera": "به اشتراک گذاشتن دوربین",
+  "share-display": "اشتراک دسکتاپ (بدون صدا)",
+  "share-user": "به اشتراک گذاشتن دوربین",
   "state-paused": "توقف شده",
   "state-recording": "ضبط کردن",
   "state-waiting": "در حال انتظار",

src/i18n/locales/fr.json

@@ -39,8 +39,8 @@
   "save-creation-return-to-no-label": "Quitter et revenir à la page précédente",
   "save-creation-new-recording": "Commencer un nouvel enregistrement",
   "save-creation-new-recording-warning": "En démarrant un nouvel enregistrement, les enregistrements actuels seront supprimés (les enregistrements téléchargés ou en cours de téléchargement ne sont pas concernés). Êtes-vous sûr ?",
-  "share-desktop": "Partager le bureau",
-  "share-camera": "Partager la caméra",
+  "share-display": "Partager le bureau",
+  "share-user": "Partager la caméra",
   "state-paused": "En pause",
   "state-recording": "Enregistrement en cours",
   "state-waiting": "En attente",

src/i18n/locales/nl.json

@@ -44,8 +44,8 @@
   "sources-audio-question": "Audio opnemen?",
   "sources-audio-microphone": "Microfoon",
   "sources-audio-without-audio": "Geen audio",
-  "share-desktop": "Beeldscherm delen",
-  "share-camera": "Camera delen",
+  "share-display": "Beeldscherm delen",
+  "share-user": "Camera delen",
   "state-paused": "Gepauzeerd",
   "state-recording": "Opnemen",
   "state-waiting": "Wachten",

src/i18n/locales/sl.json

@@ -24,8 +24,8 @@
   "save-creation-upload-to": "Naloži na <1>{{server}}</1>",
   "save-creation-new-recording": "Začni novo snemanje",
   "save-creation-new-recording-warning": "Z pričetkom novega snemanja bodo trenutni posnetki izgubljeni (to ne vpliva na že naložene ali prenesene posnetke). Ali ste prepričan?",
-  "share-desktop": "Delite zaslon",
-  "share-camera": "Delite video kamero",
+  "share-display": "Delite zaslon",
+  "share-user": "Delite video kamero",
   "state-paused": "Zaustavljeno",
   "state-recording": "Snemanje",
   "state-waiting": "Čakanje",

src/i18n/locales/tr.json

@@ -24,8 +24,8 @@
   "save-creation-form-invalid": "Lütfen başlık ve sunucuyu ekleyin",
   "save-creation-label-presenter": "Sunucu",
   "save-creation-label-title": "Başlık",
-  "share-desktop": "Masaüstünü paylaş",
-  "share-camera": "Kamerayı paylaş",
+  "share-display": "Masaüstünü paylaş",
+  "share-user": "Kamerayı paylaş",
   "state-paused": "Duraklat",
   "state-recording": "Kayıt ediliyor",
   "state-waiting": "Bekliyor",

src/i18n/locales/zh.json

@@ -39,8 +39,8 @@
   "save-creation-return-to-no-label": "退出并返回上一页",
   "save-creation-new-recording": "开始新录制",
   "save-creation-new-recording-warning": "通过开始新的录制，当前录制内容将在此应用程序中被丢弃（任何上传或下载的录制文件都不会受到影响）。是否确定？",
-  "share-desktop": "共享桌面",
-  "share-camera": "共享摄像头",
+  "share-display": "共享桌面",
+  "share-user": "共享摄像头",
   "state-paused": "暂停",
   "state-recording": "录制",
   "state-waiting": "等待",

src/steps/finish/save-locally.tsx

@@ -82,6 +82,7 @@ export const SaveLocally: React.FC = () => {
         </div>
         <a
           ref={buttons[i]}
+          aria-label={t(`steps.finish.save-${deviceType}-locally`)}
           target="_blank"
           download={downloadName}
           href={url}
@@ -92,7 +93,6 @@ export const SaveLocally: React.FC = () => {
             if (e.key === " ") {
               e.preventDefault();
               buttons[i].current?.click();
-              dispatch({ type: "MARK_DOWNLOADED", index: i });
             }
           }}
           css={{

src/steps/finish/upload.tsx

@@ -397,7 +397,7 @@ export const Input = <I extends FieldValues, F>({
         <input
           id={id}
           aria-invalid={error ? "true" : "false"}
-          aria-describedby={`${name}Error`}
+          aria-describedby={error ? `${name}Error` : id}
           autoComplete="off"
           type={type}
           {...rest}

src/steps/recording/controls.tsx

@@ -87,6 +87,12 @@ export const RecordingControls: React.FC<Props> = ({
             "paused": () => resumeRecording,
             "recording": () => pauseRecording,
           })}
+          aria-label={match(recordingState, {
+            "inactive": () => t("record-button-title"),
+            "paused": () => t("resume-button-title"),
+            "recording": () => t("pause-button-title"),
+          })}
+          aria-live="polite"
           css={{
             position: "relative",
             width: 50,

src/steps/review/control-box.tsx

@@ -385,6 +385,7 @@ const Controls: React.FC<SharedProps> = ({ currentTime, previewController }) =>
       {/* Play/pause button */}
       <WithTooltip tooltip={isPlaying ? t("review-pause") : t("review-play")}>
         <ProtoButton
+          aria-label={isPlaying ? t("review-pause") : t("review-play")}
           css={{
             backgroundColor: COLORS.accent5,
             color: isHighContrast ? COLORS.neutral05 : "white",
@@ -510,6 +511,7 @@ const CutControls: React.FC<CutControlsProps> = (
     <WithTooltip tooltip={t(`review-set-${marker}`)}>
       <ProtoButton
         {...{ disabled }}
+        aria-label={t(`review-set-${marker}`)}
         onClick={cut}
         onMouseDown={e => e.preventDefault()}
         css={{

src/steps/video-setup/prefs.tsx

@@ -218,6 +218,7 @@ export const StreamSettings: React.FC<StreamSettingsProps> = ({ isDesktop, strea
         >
           <ProtoButton
             onClick={() => setIsExpanded(old => !old)}
+            aria-label={isExpanded ? t("video-settings-close") : t("video-settings-open")}
             css={{
               border: "none",
               display: "inline-block",

src/steps/video-setup/source-select.tsx

@@ -85,13 +85,15 @@ export const SourceSelection: React.FC<SourceSelectionProps> = ({
     >
       {(displaySupported || !onMobileDevice()) && <SourceOptionButton
         label={t("sources-scenario-display")}
+        ariaLabel={t("share-display")}
         icon={<FiMonitor />}
         onClick={clickDisplay}
         disabledText={displaySupported ? false : t("sources-video-display-not-supported")}
         shortcut={showShortcuts ? SHORTCUTS.videoSetup.selectScreen : undefined}
       />}
       {(displaySupported || !onMobileDevice()) && userSupported && <SourceOptionButton
         label={t("sources-scenario-display-and-user")}
+        ariaLabel={t("share-display-and-user")}
         icon={(
           <div css={{
             lineHeight: 0,
@@ -114,6 +116,7 @@ export const SourceSelection: React.FC<SourceSelectionProps> = ({
       />}
       {userSupported && <SourceOptionButton
         label={t("sources-scenario-user")}
+        ariaLabel={t("share-user")}
         icon={<FiUser />}
         onClick={clickUser}
         disabledText={state.hasWebcam ? false : t("sources-video-no-cam-detected")}

src/ui/SourceOptionButton.tsx

@@ -12,17 +12,19 @@ export type SourceOptionButtonProps = {
   onClick: () => void;
   disabledText?: false | string;
   shortcut?: string;
+  ariaLabel?: string;
 };
 
 export const SourceOptionButton: React.FC<SourceOptionButtonProps> = (
-  { icon, label, onClick, shortcut, disabledText }
+  { icon, label, onClick, shortcut, disabledText, ariaLabel }
 ) => {
   const { isHighContrast } = useColorScheme();
 
   return (
     <ProtoButton
       onClick={onClick}
       disabled={!!disabledText}
+      aria-label={ariaLabel}
       css={{
         position: "relative",
         display: "inline-flex",