tab index implemented for each variant item (#244)
* tab index implemented for each variant item * we collapse on last element blur Co-authored-by: Makhmudjon Inadullaev <makhmudjon@Makhmudjons-MacBook-Pro-2.local> Co-authored-by: Makhmudjon Inadullaev <makhmudjon@MakhmudjonsMBP2.home>
Makhmudjon Inadullaev committed
Oct 27, 2022 at 14:09 UTC
c74dafdeb8e58c25d7d900499758ea43b9d41052
2 files changed
+14
-2
src/theme/nav.yml
+3
@@ -287,6 +287,7 @@
287
variants:
288
- title: Version 6.14.17 (Legacy Release)
289
shortName: v6
290
+ tabIndex: 1
291
url: /cli/v6
292
default: false
293
children:
@@ -526,6 +527,7 @@
527
description: Cleaning the slate
528
- title: Version 7.24.2 (Legacy Release)
529
shortName: v7
530
+ tabIndex: 2
531
url: /cli/v7
532
default: false
533
children:
@@ -781,6 +783,7 @@
783
- title: Version 8.19.2 (Latest Release)
784
shortName: v8
785
url: /cli/v8
786
+ tabIndex: 3
787
default: true
788
children:
789
- title: CLI Commands
theme/src/components/variant-select.js
+11
-2
@@ -29,12 +29,21 @@ function VariantSelect(props) {
29
return null;
30
}
31
32
- variantPages.forEach((match) => {
32
+ /**
33
+ * We should use '@primer/react' package, as '@primer/components' package depricated and moved to '@primer/react'.
34
+ * We have no closing/opening control with current '@primer/components' package, so document.body click event used for closing purpose.
35
+ */
36
+ // TODO: We should use 'setOpen' function returned by the useDetails hook when we move to '@primer/react' package. https://primer.style/react/deprecated/Dropdown
37
+ function collapseDropdown () {
38
+ document.body.click()
39
+ }
40
+
41
+ variantPages.forEach((match, index) => {
42
if (match.page.url === path) {
43
selectedItem = match;
44
}
45
37
- items.push(<Dropdown.Item onClick={() => { window.location.href = match.page.url; }} key={match.variant.title}>{match.variant.title}</Dropdown.Item>);
46
+ 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>);
47
});
48
49
return (