fix(keyboard naivagtion): cycle through topics with arrow keys in topics menu

src/components/TopicElements/TopicElements.js

@@ -196,8 +196,8 @@ function TopicElements({ history }) {
         </EventConsumer>
         {elements.permalink && <Permalink history={history} />}
         {elements.search && <Search />}
-        {elements.header && <Header loginUrl={loginUrl} />}
         {elements.header && <TopicTelephoneInfos />}
+        {elements.header && <Header loginUrl={loginUrl} />}
         {elements.popup && <Popup />}
         {elements.mapControls && (
           <MapControls

src/components/TopicMenu/TopicMenu.js

@@ -20,6 +20,7 @@ import {
 import Select from "../Select/Select";
 import InfosButton from "../InfosButton";
 import TopicInfosButton from "../TopicInfosButton";
+import { TOPIC_MENU_ITEM_ID_PREFIX } from "../../utils/constants";
 
 const styles = () => ({
   wrapperBaseLayerSelect: {
@@ -182,6 +183,7 @@ class TopicMenu extends PureComponent {
       <div className="wkp-topic-menu">
         <div className="wkp-topic-menu-item-wrapper">
           <div
+            id={`${TOPIC_MENU_ITEM_ID_PREFIX}-${topic.key}`}
             className="wkp-topic-menu-item"
             role="button"
             tabIndex={0}

src/components/TopicsMenu/TopicsMenu.js

@@ -13,7 +13,10 @@ import {
   updateDrawEditLink,
 } from "../../model/app/actions";
 import DrawLayerMenu from "../DrawLayerMenu";
-import { ONLY_WHEN_NOT_LOGGED_IN } from "../../utils/constants";
+import {
+  ONLY_WHEN_NOT_LOGGED_IN,
+  TOPIC_MENU_ITEM_ID_PREFIX,
+} from "../../utils/constants";
 
 const propTypes = {
   menuHeight: PropTypes.number,
@@ -32,6 +35,30 @@ const defaultProps = {
   bodyElementRef: null,
 };
 
+function getFocusedTopic(topicsToDisplay) {
+  return topicsToDisplay.find((topic) => {
+    if (document.activeElement?.id?.startsWith(TOPIC_MENU_ITEM_ID_PREFIX)) {
+      return (
+        document.activeElement.id ===
+        `${TOPIC_MENU_ITEM_ID_PREFIX}-${topic.key}`
+      );
+    }
+    return false;
+  });
+}
+
+function getNextTopic(topicsToDisplay, focusedTopic) {
+  const nextIndex =
+    topicsToDisplay.findIndex((t) => t.key === focusedTopic?.key) + 1 || 0;
+  return topicsToDisplay[nextIndex];
+}
+
+function getPreviousTopic(topicsToDisplay, focusedTopic) {
+  const previousIndex =
+    topicsToDisplay.findIndex((t) => t.key === focusedTopic?.key) - 1 || 0;
+  return topicsToDisplay[previousIndex];
+}
+
 function TopicsMenu({ children, menuHeight, bodyElementRef }) {
   const permissionInfos = useSelector((state) => state.app.permissionInfos);
   const menuOpen = useSelector((state) => state.app.menuOpen);
@@ -74,6 +101,36 @@ function TopicsMenu({ children, menuHeight, bodyElementRef }) {
     });
   }, [activeTopic, topics, permissionInfos]);
 
+  useEffect(() => {
+    let handleKeyUp;
+    if (menuOpen) {
+      handleKeyUp = (e) => {
+        const focusedTopic = getFocusedTopic(topicsToDisplay);
+        if (!focusedTopic) return;
+        e.stopPropagation();
+        e.preventDefault();
+        if (e.keyCode === 38) {
+          const previousTopicMenuItem = document.getElementById(
+            `${TOPIC_MENU_ITEM_ID_PREFIX}-${getPreviousTopic(topicsToDisplay, focusedTopic)?.key}`,
+          );
+          previousTopicMenuItem?.focus();
+        }
+        if (e.keyCode === 40) {
+          e.stopPropagation();
+          e.preventDefault();
+          const nextTopicMenuItem = document.getElementById(
+            `${TOPIC_MENU_ITEM_ID_PREFIX}-${getNextTopic(topicsToDisplay, focusedTopic)?.key}`,
+          );
+          nextTopicMenuItem?.focus();
+        }
+      };
+      document.addEventListener("keyup", handleKeyUp);
+    }
+    return () => {
+      document.removeEventListener("keyup", handleKeyUp);
+    };
+  }, [menuOpen, topicsToDisplay]);
+
   if (!topics || !topics.length) {
     return null;
   }

src/layerInfos/NetzkarteTopicInfo/NetzkarteTopicInfo.js

@@ -6,8 +6,6 @@ const propTypes = {
   t: PropTypes.func.isRequired,
 };
 
-const defaultProps = {};
-
 function NetzkarteTopicInfo({ t }) {
   return (
     <div>
@@ -27,6 +25,5 @@ function NetzkarteTopicInfo({ t }) {
 }
 
 NetzkarteTopicInfo.propTypes = propTypes;
-NetzkarteTopicInfo.defaultProps = defaultProps;
 
 export default withTranslation()(NetzkarteTopicInfo);

src/utils/constants.js

@@ -61,3 +61,6 @@ export const LS_SIZE_KEY = "tm.max.canvas.size";
 
 // hideInLayerTree values
 export const ONLY_WHEN_NOT_LOGGED_IN = "onlyWhenNotLoggedIn";
+
+// topic menu items
+export const TOPIC_MENU_ITEM_ID_PREFIX = "topic-menu-item";