feat: dynamic aria label for the geomap

Author: andreishket

vis/js/components/Heading.tsx

@@ -11,6 +11,7 @@ import {
   StandardTitle,
 } from "../templates/headingtitles";
 import { queryConcatenator } from "../utils/data";
+import { getHeadingLabel } from "../utils/getHeadingLabel";
 
 const Heading = ({
   localization,
@@ -179,26 +180,6 @@ const sliceText = (text, maxLength) => {
   return `${text.slice(0, maxLength - 3)}...`;
 };
 
-/**
- * Refactored helper function for getting the heading label.
- */
-export const getHeadingLabel = (labelType, localization) => {
-  switch (labelType) {
-    case "authorview-streamgraph":
-      return localization.streamgraph_authors_label;
-    case "authorview-knowledgemap":
-      return localization.overview_authors_label;
-    case "keywordview-streamgraph":
-      return localization.streamgraph_label;
-    case "keywordview-knowledgemap":
-      return localization.overview_label;
-    case "geomap":
-      return localization.geomap_label;
-    default:
-      throw new Error(`Label of type '${labelType}' not supported.`);
-  }
-};
-
 const unescapeHTML = (string) => {
   const entityMap = {
     "&": "&",

vis/js/templates/Geomap/HeightContainer/config.ts

@@ -0,0 +1,43 @@
+import { queryConcatenator } from "@/js/utils/data";
+import { getHeadingLabel } from "@/js/utils/getHeadingLabel";
+import { unescapeHTML } from "@/js/utils/unescapeHTMLentities";
+
+const MAX_LENGTH_CUSTOM = 100;
+
+const sliceText = (text: string, maxLength: number) => {
+  if (text.length <= maxLength) {
+    return text;
+  }
+
+  return `${text.slice(0, maxLength - 3)}...`;
+};
+
+type Params = {
+  titleLabelType: Parameters<typeof getHeadingLabel>[0];
+  localization: Parameters<typeof getHeadingLabel>[1];
+  query: string;
+  advancedQuery: string | null;
+  customTitle: unknown;
+  titleStyle: string | null;
+};
+
+export const getAriaLabel = ({
+  titleLabelType,
+  localization,
+  query,
+  advancedQuery,
+  customTitle,
+  titleStyle,
+}: Params) => {
+  const headingLabel = getHeadingLabel(titleLabelType, localization);
+  const queryString = queryConcatenator([query, advancedQuery]);
+
+  const effectiveTitle =
+    titleStyle === "custom" &&
+    typeof customTitle !== "undefined" &&
+    customTitle !== null
+      ? unescapeHTML(sliceText(String(customTitle), MAX_LENGTH_CUSTOM))
+      : queryString;
+
+  return effectiveTitle ? `${headingLabel} ${effectiveTitle}` : headingLabel;
+};

vis/js/templates/Geomap/HeightContainer/getAriaLabel.ts

@@ -1,14 +1,37 @@
 import { FC, PropsWithChildren } from "react";
 import { useSelector } from "react-redux";
 
-import { getMapHeight } from "./selectors";
-import { ACCESSABILITY_ATTRIBUTES } from "./config";
+import { getAriaLabel } from "./getAriaLabel";
+import {
+  getCustomTitle,
+  getLocalization,
+  getMapHeight,
+  getQuery,
+  getQueryAdvanced,
+  getTitleLabelType,
+  getTitleStyle,
+} from "./selectors";
 
 export const HeightContainer: FC<PropsWithChildren> = ({ children }) => {
   const height = useSelector(getMapHeight);
+  const localization = useSelector(getLocalization);
+  const titleLabelType = useSelector(getTitleLabelType);
+  const query = useSelector(getQuery);
+  const advancedQuery = useSelector(getQueryAdvanced);
+  const customTitle = useSelector(getCustomTitle);
+  const titleStyle = useSelector(getTitleStyle);
+
+  const ariaLabel = getAriaLabel({
+    titleLabelType,
+    localization,
+    query,
+    advancedQuery,
+    customTitle,
+    titleStyle,
+  });
 
   return (
-    <div style={{ height }} {...ACCESSABILITY_ATTRIBUTES}>
+    <div role="region" aria-label={ariaLabel} style={{ height }}>
       {children}
     </div>
   );

vis/js/templates/Geomap/HeightContainer/index.tsx

@@ -1,3 +1,9 @@
 import { State } from "@/js/types";
 
 export const getMapHeight = (state: State) => state.chart.height;
+export const getLocalization = (state: State) => state.localization;
+export const getTitleLabelType = (state: State) => state.heading.titleLabelType;
+export const getQuery = (state: State) => state.query.text;
+export const getQueryAdvanced = (state: State) => state.q_advanced.text;
+export const getCustomTitle = (state: State) => state.heading.customTitle;
+export const getTitleStyle = (state: State) => state.heading.titleStyle;

vis/js/templates/Geomap/HeightContainer/selectors.ts

@@ -5,11 +5,11 @@ import { MapContainer } from "react-leaflet";
 
 import { CONFIG } from "./config";
 import { HeightContainer } from "./HeightContainer";
+import { KeyboardZoomController } from "./KeyboardZoomController";
 import { Layer } from "./Layer";
 import { Pins } from "./Pins";
 import { SelectionResetHandler } from "./SelectionResetHandler";
 import { ZoomControls } from "./ZoomControls";
-import { KeyboardZoomController } from "./KeyboardZoomController";
 
 export const Geomap: FC = () => (
   <HeightContainer>

vis/js/templates/Geomap/index.tsx

@@ -0,0 +1,28 @@
+import { Localization } from "../i18n/localization";
+
+type TitleLabelType =
+  | "authorview-streamgraph"
+  | "authorview-knowledgemap"
+  | "keywordview-streamgraph"
+  | "keywordview-knowledgemap"
+  | "geomap";
+
+export const getHeadingLabel = (
+  labelType: TitleLabelType,
+  localization: Localization,
+) => {
+  switch (labelType) {
+    case "authorview-streamgraph":
+      return localization.streamgraph_authors_label;
+    case "authorview-knowledgemap":
+      return localization.overview_authors_label;
+    case "keywordview-streamgraph":
+      return localization.streamgraph_label;
+    case "keywordview-knowledgemap":
+      return localization.overview_label;
+    case "geomap":
+      return localization.geomap_label;
+    default:
+      throw new Error(`Label of type '${labelType}' not supported.`);
+  }
+};