From 5f0243d369864d650dd2c1f9f0afd938ca481c8a Mon Sep 17 00:00:00 2001
From: Pierre Leroux <p.leroux@gmx.com>
Date: Tue, 3 Dec 2024 18:06:43 +0100
Subject: [PATCH] fix(GUI): radix a11y Dialog.Title visuallyHidden on
 publicationInfo Dialog

Dialog.content aria-describedby set to undefined on all Dialog.content components
---
 .../publicationInfos/publicationInfoContent.tsx       |  7 +++++--
 src/renderer/library/components/Wizard.tsx            |  2 +-
 .../library/components/dialog/ApiappAddForm.tsx       |  2 +-
 .../library/components/dialog/OpdsFeedAddForm.tsx     |  2 +-
 .../library/components/dialog/OpdsFeedUpdateForm.tsx  |  2 +-
 .../dialog/publicationInfos/PublicationInfo.tsx       | 11 +++++++++--
 src/renderer/library/components/settings/Settings.tsx |  2 +-
 .../dialog/publicationInfos/PublicationInfo.tsx       |  6 +++++-
 8 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/renderer/common/components/dialog/publicationInfos/publicationInfoContent.tsx b/src/renderer/common/components/dialog/publicationInfos/publicationInfoContent.tsx
index 59c9472d0..cbf822ea0 100644
--- a/src/renderer/common/components/dialog/publicationInfos/publicationInfoContent.tsx
+++ b/src/renderer/common/components/dialog/publicationInfos/publicationInfoContent.tsx
@@ -42,7 +42,7 @@ import { useTranslator } from "readium-desktop/renderer/common/hooks/useTranslat
 import { useSelector } from "readium-desktop/renderer/common/hooks/useSelector";
 import { ICommonRootState } from "readium-desktop/common/redux/states/commonRootState";
 
-
+import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
 
 
 export interface IProps {
@@ -411,7 +411,10 @@ export const PublicationInfoContent: React.FC<React.PropsWithChildren<IProps>> =
                             </Dialog.Trigger>
                             <Dialog.Portal>
                                 {/* <div className={stylesModals.modal_dialog_overlay}></div> */}
-                                <Dialog.Content className={stylesModals.modal_dialog}>
+                                <Dialog.Content className={stylesModals.modal_dialog} aria-describedby={undefined}>
+                                    <VisuallyHidden.Root>
+                                        <Dialog.Title>{__("catalog.bookInfo")}</Dialog.Title>
+                                    </VisuallyHidden.Root>
                                     <div className={stylesModals.modal_dialog_body_cover}>
                                         <Cover
                                             publicationViewMaybeOpds={props.publicationViewMaybeOpds}
diff --git a/src/renderer/library/components/Wizard.tsx b/src/renderer/library/components/Wizard.tsx
index 1b99be58f..4598a9fb0 100644
--- a/src/renderer/library/components/Wizard.tsx
+++ b/src/renderer/library/components/Wizard.tsx
@@ -80,7 +80,7 @@ export const WizardModal = () => {
         </Dialog.Trigger> */}
         <Dialog.Portal>
             <div className={stylesModals.modal_dialog_overlay}></div>
-            <Dialog.Content className={classNames(stylesModals.modal_dialog)}>
+            <Dialog.Content className={classNames(stylesModals.modal_dialog)} aria-describedby={undefined}>
                 <Tabs.Root defaultValue="tab1" data-orientation="vertical" orientation="vertical" className={stylesSettings.settings_container}>
                     <Tabs.List className={stylesSettings.settings_tabslist} data-orientation="vertical" aria-orientation="vertical">
                         <Tabs.Trigger value="tab1">
diff --git a/src/renderer/library/components/dialog/ApiappAddForm.tsx b/src/renderer/library/components/dialog/ApiappAddForm.tsx
index 1308ce1cf..8f1bf831f 100644
--- a/src/renderer/library/components/dialog/ApiappAddForm.tsx
+++ b/src/renderer/library/components/dialog/ApiappAddForm.tsx
@@ -210,7 +210,7 @@ export const ApiappAddFormDialog = () => {
         </Dialog.Trigger>
         <Dialog.Portal>
             <div className={stylesModals.modal_dialog_overlay}></div>
-            <Dialog.Content className={stylesModals.modal_dialog}>
+            <Dialog.Content className={stylesModals.modal_dialog} aria-describedby={undefined}>
                 <div className={stylesModals.modal_dialog_header}>
                     <Dialog.Title>
                         {__("opds.addFormApiapp.title")}
diff --git a/src/renderer/library/components/dialog/OpdsFeedAddForm.tsx b/src/renderer/library/components/dialog/OpdsFeedAddForm.tsx
index 1bdd39828..685240fb6 100644
--- a/src/renderer/library/components/dialog/OpdsFeedAddForm.tsx
+++ b/src/renderer/library/components/dialog/OpdsFeedAddForm.tsx
@@ -82,7 +82,7 @@ export const OpdsFeedAddFormDialog = () => {
         </Dialog.Trigger>
         <Dialog.Portal>
             <div className={stylesModals.modal_dialog_overlay}></div>
-            <Dialog.Content className={stylesModals.modal_dialog} >
+            <Dialog.Content className={stylesModals.modal_dialog} aria-describedby={undefined}>
                 <div className={stylesModals.modal_dialog_header}>
                     <Dialog.Title>
                         {__("opds.addMenu")}
diff --git a/src/renderer/library/components/dialog/OpdsFeedUpdateForm.tsx b/src/renderer/library/components/dialog/OpdsFeedUpdateForm.tsx
index bb56b28cb..b2ff99be1 100644
--- a/src/renderer/library/components/dialog/OpdsFeedUpdateForm.tsx
+++ b/src/renderer/library/components/dialog/OpdsFeedUpdateForm.tsx
@@ -58,7 +58,7 @@ class OpdsFeedUpdateForm extends React.Component<IProps, IState> {
             </Dialog.Trigger>
             <Dialog.Portal>
                 <div className={stylesModals.modal_dialog_overlay}></div>
-                <Dialog.Content className={stylesModals.modal_dialog}>
+                <Dialog.Content className={stylesModals.modal_dialog} aria-describedby={undefined}>
                     <div className={stylesModals.modal_dialog_header}>
                         <Dialog.Title>
                             {__("opds.updateForm.title")}
diff --git a/src/renderer/library/components/dialog/publicationInfos/PublicationInfo.tsx b/src/renderer/library/components/dialog/publicationInfos/PublicationInfo.tsx
index acb503cc6..677c34d07 100644
--- a/src/renderer/library/components/dialog/publicationInfos/PublicationInfo.tsx
+++ b/src/renderer/library/components/dialog/publicationInfos/PublicationInfo.tsx
@@ -10,6 +10,7 @@ import * as stylesModals from "readium-desktop/renderer/assets/styles/components
 import * as stylesButtons from "readium-desktop/renderer/assets/styles/components/buttons.scss";
 
 import * as Dialog from "@radix-ui/react-dialog";
+import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
 import * as React from "react";
 import { DialogType, DialogTypeName } from "readium-desktop/common/models/dialog";
 import * as dialogActions from "readium-desktop/common/redux/actions/dialog";
@@ -89,7 +90,10 @@ export const PublicationInfoLibWithRadixContent = React.forwardRef<HTMLDivElemen
             <Dialog.Portal>
                 {/* <Dialog.Overlay className="DialogOverlay" /> */}
                 <div className={stylesModals.modal_dialog_overlay}></div>
-                <Dialog.Content className={stylesModals.modal_dialog} {...props} ref={forwardRef}>
+                <Dialog.Content className={stylesModals.modal_dialog} {...props} ref={forwardRef} aria-describedby={undefined}>
+                    <VisuallyHidden.Root>
+                        <Dialog.Title>{__("catalog.bookInfo")}</Dialog.Title>
+                    </VisuallyHidden.Root>
                     <div className={stylesModals.modal_dialog_header}>
                         {/* <Dialog.Title className="DialogTitle">{__("catalog.bookInfo")}</Dialog.Title> */}
                         <h1>{__("catalog.bookInfo")}</h1>
@@ -160,7 +164,10 @@ export const PublicationInfoOpdsWithRadixContent = React.forwardRef<HTMLDivEleme
             <Dialog.Portal>
                 {/* <Dialog.Overlay className="DialogOverlay" /> */}
                 <div className={stylesModals.modal_dialog_overlay}></div>
-                <Dialog.Content className={stylesModals.modal_dialog} {...props} ref={forwardRef}>
+                <Dialog.Content className={stylesModals.modal_dialog} {...props} ref={forwardRef} aria-describedby={undefined}>
+                    <VisuallyHidden.Root>
+                        <Dialog.Title>{__("catalog.bookInfo")}</Dialog.Title>
+                    </VisuallyHidden.Root>
                     <div className={stylesModals.modal_dialog_header}>
                         {/* <Dialog.Title className="DialogTitle">{__("catalog.bookInfo")}</Dialog.Title> */}
                         <h2>{__("catalog.bookInfo")}</h2>
diff --git a/src/renderer/library/components/settings/Settings.tsx b/src/renderer/library/components/settings/Settings.tsx
index 8d918482c..05a0a91b7 100644
--- a/src/renderer/library/components/settings/Settings.tsx
+++ b/src/renderer/library/components/settings/Settings.tsx
@@ -327,7 +327,7 @@ export const Settings: React.FC<ISettingsProps> = () => {
         </Dialog.Trigger>
         <Dialog.Portal>
             <div className={stylesModals.modal_dialog_overlay}></div>
-            <Dialog.Content className={classNames(stylesModals.modal_dialog)}>
+            <Dialog.Content className={classNames(stylesModals.modal_dialog)} aria-describedby={undefined}>
                 <Tabs.Root defaultValue="tab1" data-orientation="vertical" orientation="vertical" className={stylesSettings.settings_container}>
                     <Tabs.List className={stylesSettings.settings_tabslist} data-orientation="vertical" aria-orientation="vertical">
                         <Tabs.Trigger value="tab1">
diff --git a/src/renderer/reader/components/dialog/publicationInfos/PublicationInfo.tsx b/src/renderer/reader/components/dialog/publicationInfos/PublicationInfo.tsx
index 0e70b3997..c96c3456d 100644
--- a/src/renderer/reader/components/dialog/publicationInfos/PublicationInfo.tsx
+++ b/src/renderer/reader/components/dialog/publicationInfos/PublicationInfo.tsx
@@ -9,6 +9,7 @@ import * as stylesModals from "readium-desktop/renderer/assets/styles/components
 import * as stylesButtons from "readium-desktop/renderer/assets/styles/components/buttons.scss";
 
 import * as Dialog from "@radix-ui/react-dialog";
+import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
 import * as debug_ from "debug";
 import * as React from "react";
 import { DialogType, DialogTypeName } from "readium-desktop/common/models/dialog";
@@ -68,7 +69,10 @@ export const PublicationInfoReaderWithRadixContent = React.forwardRef<HTMLDivEle
             <Dialog.Portal container={appOverlayElement}>
                 {/* <Dialog.Overlay className="DialogOverlay" /> */}
                 <div className={stylesModals.modal_dialog_overlay}></div>
-                <Dialog.Content className={stylesModals.modal_dialog} {...props} ref={forwardRef}>
+                <Dialog.Content className={stylesModals.modal_dialog} {...props} ref={forwardRef} aria-describedby={undefined}>
+                    <VisuallyHidden.Root>
+                        <Dialog.Title>{__("catalog.bookInfo")}</Dialog.Title>
+                    </VisuallyHidden.Root>
                     <div className={stylesModals.modal_dialog_header}>
                         {/* <Dialog.Title className="DialogTitle">{__("catalog.bookInfo")}</Dialog.Title> */}
                         <h1>{__("catalog.bookInfo")}</h1>