fix annotation list semantic and aria-labels

edrlab · Dec 30, 2024 · 4d7c584 · 4d7c584
1 parent b59c26f
commit 4d7c584
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 21 deletions.
diff --git a/src/renderer/assets/styles/components/annotations.scss b/src/renderer/assets/styles/components/annotations.scss
@@ -9,6 +9,10 @@
   display: flex;
   flex-direction: column;
   gap: 5px;
+
+  ol {
+    padding: 0;
+  }
 }
 
 .popover_dialog_reader .settings_tab.annotations_tab {
@@ -518,6 +522,7 @@
 
   .settings_tab .annotations_line {
     width: 100%;
+    list-style-type: none;
   }
 
   .annotations_line {

diff --git a/src/renderer/reader/components/ReaderMenu.tsx b/src/renderer/reader/components/ReaderMenu.tsx
@@ -476,7 +476,7 @@ const AnnotationCard: React.FC<{ timestamp: number, annotation: IAnnotationState
     const date = new Date(timestamp);
     const dateStr = `${(`${date.getDate()}`.padStart(2, "0"))}/${(`${date.getMonth() + 1}`.padStart(2, "0"))}/${date.getFullYear()}`;
 
-    const { style, percentRounded } = React.useMemo(() => {
+    const { percentRounded } = React.useMemo(() => {
         if (r2Publication.Spine && annotation.locatorExtended.locator) {
             const percent = computeProgression(r2Publication.Spine || [], annotation.locatorExtended.locator);
             const percentRounded = Math.round(percent);
@@ -496,7 +496,7 @@ const AnnotationCard: React.FC<{ timestamp: number, annotation: IAnnotationState
 
     const creatorName = (annotation.creator?.id !== creatorMyself.id ? annotation.creator?.name : creatorMyself.name) || "";
 
-    return (<div
+    return (<li
         className={stylesAnnotations.annotations_line}
         style={{ backgroundColor: dockedEditAnnotation ? "var(--color-extralight-grey)" : "", borderLeft: dockedEditAnnotation ? "none" : `4px solid ${annotationColor}` }}
         onKeyDown={isEdited ? (e) => {
@@ -511,14 +511,15 @@ const AnnotationCard: React.FC<{ timestamp: number, annotation: IAnnotationState
                 }, 100);
             }
         } : undefined}
+        aria-label={__("reader.annotations.note", {color: __(Object.entries(annotationsColorsLight).find(([colorHex]) => colorHex === annotationColor)?.[1])})}
     >
         {/* <SVG ariaHidden={true} svg={BookmarkIcon} /> */}
         <div className={stylesAnnotations.annnotation_container}>
             {isEdited ?
                 <></>
                 : <button className={classNames(stylesAnnotations.annotation_name, "R2_CSS_CLASS__FORCE_NO_FOCUS_OUTLINE")}
                     // title={bname}
-                    aria-label={`${__("reader.navigation.goTo")} ... "${btext}"`}
+                    aria-label={__("reader.annotations.goToContent")}
                     style={{ borderLeft: dockedEditAnnotation && "2px solid var(--color-blue)" }}
                     onClick={(e) => {
                         e.preventDefault();
@@ -562,7 +563,7 @@ const AnnotationCard: React.FC<{ timestamp: number, annotation: IAnnotationState
                     :
                     <>
                         <HardWrapComment comment={comment} />
-                        {tagName ? <div className={stylesTags.tags_wrapper}>
+                        {tagName ? <div className={stylesTags.tags_wrapper} aria-label={__("catalog.tags")}>
                             <div className={stylesTags.tag}>
                                 <a onClick={() => setTagFilter(tagName)}
                                     onKeyUp={(e) => {
@@ -581,11 +582,11 @@ const AnnotationCard: React.FC<{ timestamp: number, annotation: IAnnotationState
         </div>
         <div className={stylesAnnotations.annotation_edit}>
             <div>
-                <div>
+                <div aria-label={__("reader.annotations.date")}>
                     <SVG ariaHidden svg={CalendarIcon} />
                     <p>{dateStr}</p>
                 </div>
-                <div>
+                <div aria-label={__("publication.progression.title")}>
                     <SVG ariaHidden svg={BookOpenIcon} />
                     <p>{bprogression}</p>
                 </div>
@@ -670,10 +671,10 @@ const AnnotationCard: React.FC<{ timestamp: number, annotation: IAnnotationState
                 }
             </div>
         </div>
-        <div className={stylesPopoverDialog.gauge}>
+        {/* <div className={stylesPopoverDialog.gauge}>
             <div className={stylesPopoverDialog.fill} style={style}></div>
-        </div>
-    </div>);
+        </div> */}
+    </li>);
 };
 
 const selectionIsSet = (a: Selection): a is Set<string> => typeof a === "object";
@@ -1350,17 +1351,19 @@ const AnnotationList: React.FC<{ annotationUUIDFocused: string, resetAnnotationU
                 </div>
             </div>
             <div className={stylesAnnotations.separator} />
-            {annotationsPagedArray.map(([timestamp, annotationItem], _i) =>
-                <AnnotationCard
-                    key={`annotation-card_${annotationItem.uuid}`}
-                    timestamp={timestamp}
-                    annotation={annotationItem}
-                    goToLocator={goToLocator}
-                    isEdited={annotationItem.uuid === annotationItemEditedUUID}
-                    triggerEdition={triggerEdition(annotationItem)}
-                    setTagFilter={(v) => setTagArrayFilter(new Set([v]))}
-                />,
-            )}
+            <ol>
+                {annotationsPagedArray.map(([timestamp, annotationItem], _i) =>
+                    <AnnotationCard
+                        key={`annotation-card_${annotationItem.uuid}`}
+                        timestamp={timestamp}
+                        annotation={annotationItem}
+                        goToLocator={goToLocator}
+                        isEdited={annotationItem.uuid === annotationItemEditedUUID}
+                        triggerEdition={triggerEdition(annotationItem)}
+                        setTagFilter={(v) => setTagArrayFilter(new Set([v]))}
+                    />,
+                )}
+            </ol>
             {
                 isPaginated ? <>
                     <div className={stylesPopoverDialog.navigation_container}>

diff --git a/src/resources/locales/en.json b/src/resources/locales/en.json
@@ -324,6 +324,9 @@
   },
   "reader": {
     "annotations": {
+      "note": "{{- color}} Note",
+      "date": "Modification date",
+      "goToContent": "Go to the content",
       "Color": "Color",
       "addNote": "Annotate",
       "advancedMode": "Instant mode (auto create after select)",

diff --git a/src/resources/locales/fr.json b/src/resources/locales/fr.json
@@ -324,6 +324,9 @@
   },
   "reader": {
     "annotations": {
+      "note": "Note {{- color}}",
+      "date": "Date de modification",
+      "goToContent": "Aller au contenu",
       "Color": "Couleur",
       "addNote": "Annoter",
       "advancedMode": "Mode instantané (création automatique après sélection)",