fix: make version selection focusable

package.json

@@ -45,7 +45,6 @@
     "@types/mustache": "^4.1.1",
     "@types/node": "^22.15.19",
     "@types/react": "^18.3.10",
-    "@types/rimraf": "^4.0.5",
     "@types/tar": "^6.1.13",
     "adm-zip": "^0.5.16",
     "autoprefixer": "10.4.21",

src/components/theme/VersionSelection/VersionSelection.module.css

@@ -9,10 +9,12 @@
 
 .versionSelection {
   cursor: pointer;
+  padding: 0;
+  height: 2.5rem;
 }
 
-.versionSelection ix-icon {
-  margin-inline-start: 0.25rem;
-  margin-block-start: 0.125rem;
-  vertical-align: top;
+.versionSelection span {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
 }

src/components/theme/VersionSelection/index.tsx

@@ -6,14 +6,16 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { IxDropdown, IxDropdownItem, IxIcon } from '@siemens/ix-react';
 import {
-  iconChevronDown,
-  iconOpenExternal,
-  iconVersionHistory,
-} from '@siemens/ix-icons/icons';
+  IxButton,
+  IxDropdown,
+  IxDropdownItem,
+  IxIcon,
+  IxTypography,
+} from '@siemens/ix-react';
+import { iconChevronDown } from '@siemens/ix-icons/icons';
 import BrowserOnly from '@docusaurus/BrowserOnly';
-import { useMemo } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 import clsx from 'clsx';
 
 import styles from './VersionSelection.module.css';
@@ -37,33 +39,68 @@ export default function VersionSelection({ value }: { value: VersionFile }) {
     () => value.versions.find((v) => v.id === value.currentVersion),
     [value]
   );
+
+  const dropdownListenerRef = useRef<{
+    el: HTMLIxDropdownElement;
+    handler: (e: Event) => void;
+  } | null>(null);
+
+  const dropdownRef = useCallback((el: HTMLIxDropdownElement | null) => {
+    if (dropdownListenerRef.current) {
+      const { el: prevEl, handler } = dropdownListenerRef.current;
+      prevEl.removeEventListener('itemClick', handler);
+      dropdownListenerRef.current = null;
+    }
+    if (el) {
+      const handler = (e: Event) => {
+        (e.target as HTMLElement).querySelector<HTMLAnchorElement>('a[href]')?.click();
+      };
+      el.addEventListener('itemClick', handler);
+      dropdownListenerRef.current = { el, handler };
+    }
+  }, []);
+
   return (
     <BrowserOnly>
       {() => (
         <>
-          <span
+          <IxButton
             id="custom-version-selection"
             className={clsx('navbar__item nav-link', styles.versionSelection)}
+            variant="tertiary"
+            aria-label={`${currentVersion?.dropdownLabel ?? currentVersion?.label}, select version`}
+            aria-haspopup="listbox"
           >
-            {currentVersion.label}
-            <IxIcon name={iconChevronDown} />
-          </span>
-          <IxDropdown trigger="custom-version-selection">
+            <span>
+              <IxTypography textColor="std" format="label-lg">
+                {currentVersion?.label}
+              </IxTypography>
+              <IxIcon color="color-std-text" name={iconChevronDown} />
+            </span>
+          </IxButton>
+          <IxDropdown ref={dropdownRef} trigger="custom-version-selection">
             {value.versions.map((version) => (
-              <IxDropdownItem key={version.id}>
-                {currentVersion.id === version.id ? (
+              <IxDropdownItem
+                key={version.id}
+                aria-label={
+                  currentVersion?.id === version.id
+                    ? `${version.dropdownLabel ?? version.label}, current version`
+                    : `${version.dropdownLabel ?? version.label}, link`
+                }
+              >
+                {currentVersion?.id === version.id ? (
                   <span>
-                    {currentVersion.dropdownLabel ?? currentVersion.label}
+                    {currentVersion?.dropdownLabel ?? currentVersion?.label}
                   </span>
                 ) : (
-                  <a href={version.href} className="all-unset">
+                  <a href={version.href} className="all-unset" tabIndex={-1}>
                     {version.dropdownLabel ?? version.label}
                   </a>
                 )}
               </IxDropdownItem>
             ))}
-            <IxDropdownItem>
-              <Link href="/docs/home/releases/release-version">
+            <IxDropdownItem aria-label="Show versioning, link">
+              <Link href="/docs/home/releases/release-version" tabIndex={-1}>
                 Show versioning
               </Link>
             </IxDropdownItem>