tab index implemented for each variant item (npm#244)

makhmudjon-inadullaev · Makhmudjon Inadullaev · Makhmudjon Inadullaev · web-flow · commit c74dafdeb8e5 · 2022-10-27T13:09:49.000+04:00
* tab index implemented for each variant item

* we collapse on last element blur

Co-authored-by: Makhmudjon Inadullaev &lt;makhmudjon@Makhmudjons-MacBook-Pro-2.local&gt;
Co-authored-by: Makhmudjon Inadullaev &lt;makhmudjon@MakhmudjonsMBP2.home&gt;
diff --git a/src/theme/nav.yml b/src/theme/nav.yml
@@ -287,6 +287,7 @@
   variants:
     - title: Version 6.14.17 (Legacy Release)
       shortName: v6
+      tabIndex: 1
       url: /cli/v6
       default: false
       children:
@@ -526,6 +527,7 @@
               description: Cleaning the slate
     - title: Version 7.24.2 (Legacy Release)
       shortName: v7
+      tabIndex: 2
       url: /cli/v7
       default: false
       children:
@@ -781,6 +783,7 @@
     - title: Version 8.19.2 (Latest Release)
       shortName: v8
       url: /cli/v8
+      tabIndex: 3
       default: true
       children:
         - title: CLI Commands
diff --git a/theme/src/components/variant-select.js b/theme/src/components/variant-select.js
@@ -29,12 +29,21 @@ function VariantSelect(props) {
       return null;
   }
 
-  variantPages.forEach((match) => {
+  /** 
+   *  We should use '@primer/react' package, as '@primer/components' package depricated and moved to '@primer/react'.
+   *  We have no closing/opening control with current '@primer/components' package, so document.body click event used for closing purpose.
+   */
+  // TODO: We should use 'setOpen' function returned by the useDetails hook when we move to '@primer/react' package. https://primer.style/react/deprecated/Dropdown
+  function collapseDropdown () {
+    document.body.click()
+  }
+
+  variantPages.forEach((match, index) => {
       if (match.page.url === path) {
           selectedItem = match;
       }
 
-      items.push(<Dropdown.Item onClick={() => { window.location.href = match.page.url; }} key={match.variant.title}>{match.variant.title}</Dropdown.Item>);
+      items.push(<Dropdown.Item onBlur={index === (variantPages.length - 1) ? collapseDropdown : undefined} tabIndex={match.variant.tabIndex} onClick={() => { window.location.href = match.page.url; }} key={match.variant.title}>{match.variant.title}</Dropdown.Item>);
   });
 
   return (
