From 42089d474bbe9d9b0c27d2194f631cc5b7da0227 Mon Sep 17 00:00:00 2001
From: Gregor Eichelberger <gregor.eichelberger@tuwien.ac.at>
Date: Tue, 16 Jan 2024 12:01:30 +0100
Subject: [PATCH] Group edit series options

As discussed in PR https://github.com/elan-ev/tobira/pull/1021 this is a
PoC to test screenreader output with individual groups.
---
 .../Realm/Content/Edit/EditMode/Series.tsx    | 29 +++++++++++++------
 .../Realm/Content/Edit/EditMode/util.tsx      | 15 +++++-----
 2 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/frontend/src/routes/manage/Realm/Content/Edit/EditMode/Series.tsx b/frontend/src/routes/manage/Realm/Content/Edit/EditMode/Series.tsx
index 87ed632e4..1461bdcf5 100644
--- a/frontend/src/routes/manage/Realm/Content/Edit/EditMode/Series.tsx
+++ b/frontend/src/routes/manage/Realm/Content/Edit/EditMode/Series.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useId } from "react";
 import { useTranslation } from "react-i18next";
 import { graphql, useFragment, useMutation } from "react-relay";
 import { useController, useFormContext } from "react-hook-form";
@@ -82,6 +82,8 @@ export const EditSeriesBlock: React.FC<EditSeriesBlockProps> = ({ block: blockRe
         rules: { required: true },
     });
 
+    const headingId = useId();
+
     return <EditModeForm create={create} save={save} map={(data: SeriesFormData) => data}>
         <Heading>{t("manage.realm.content.series.series.heading")}</Heading>
         {"series" in errors && <div css={{ margin: "8px 0" }}>
@@ -96,8 +98,6 @@ export const EditSeriesBlock: React.FC<EditSeriesBlockProps> = ({ block: blockRe
             onBlur={seriesField.onBlur}
         />
         <div
-            role="group"
-            aria-label={t("manage.realm.content.display-options")}
             css={{
                 display: "flex",
                 flexDirection: "row",
@@ -115,8 +115,11 @@ export const EditSeriesBlock: React.FC<EditSeriesBlockProps> = ({ block: blockRe
                 },
             }}
         >
-            <div>
-                <Heading>{t("series.settings.order")}</Heading>
+            <div
+                role="group"
+                aria-labelledby={headingId + "-order"}
+            >
+                <Heading id={headingId + "-order"}>{t("series.settings.order")}</Heading>
                 <DisplayOptionGroup type="radio" {...{ form }} optionProps={[
                     {
                         option: "order",
@@ -144,8 +147,11 @@ export const EditSeriesBlock: React.FC<EditSeriesBlockProps> = ({ block: blockRe
                     },
                 ]} />
             </div>
-            <div>
-                <Heading>{t("series.settings.layout")}</Heading>
+            <div
+                role="group"
+                aria-labelledby={headingId + "-view"}
+            >
+                <Heading id={headingId + "-view"}>{t("series.settings.layout")}</Heading>
                 <DisplayOptionGroup type="radio" {...{ form }} optionProps={[
                     {
                         option: "layout",
@@ -167,8 +173,13 @@ export const EditSeriesBlock: React.FC<EditSeriesBlockProps> = ({ block: blockRe
                     },
                 ]} />
             </div>
-            <div>
-                <Heading>{t("manage.realm.content.series.metadata.heading")}</Heading>
+            <div
+                role="group"
+                aria-labelledby={headingId + "-metadata"}
+            >
+                <Heading id={headingId + "-metadata"}>
+                    {t("manage.realm.content.series.metadata.heading")}
+                </Heading>
                 <DisplayOptionGroup type="checkbox" {...{ form }} optionProps={[
                     {
                         option: "showTitle",
diff --git a/frontend/src/routes/manage/Realm/Content/Edit/EditMode/util.tsx b/frontend/src/routes/manage/Realm/Content/Edit/EditMode/util.tsx
index 83b924c93..ea4d6a56e 100644
--- a/frontend/src/routes/manage/Realm/Content/Edit/EditMode/util.tsx
+++ b/frontend/src/routes/manage/Realm/Content/Edit/EditMode/util.tsx
@@ -3,13 +3,14 @@ import { COLORS } from "../../../../../../color";
 import { screenWidthAbove, screenWidthAtMost } from "@opencast/appkit";
 
 
-export const Heading: React.FC<{ children: ReactNode }> = ({ children }) => <h3 css={{
-    ":not(:first-of-type)": { marginTop: 12 },
-    marginBottom: 8,
-    fontSize: 18,
-}}>
-    {children}
-</h3>;
+export const Heading: React.FC<{ id?: string; children: ReactNode }> = ({ id, children }) =>
+    <h3 id={id} css={{
+        ":not(:first-of-type)": { marginTop: 12 },
+        marginBottom: 8,
+        fontSize: 18,
+    }}>
+        {children}
+    </h3>;
 
 
 type NiceRadioProps = React.PropsWithChildren<{