|
272 | 272 |
|
273 | 273 | const coerceToArray = (val) => (Array.isArray(val) ? val : [val]) |
274 | 274 |
|
275 | | - const clearSelected = (parentElement) => { |
276 | | - const childrenElements = parentElement.querySelectorAll('button.selected') |
277 | | - childrenElements.forEach((child) => { |
278 | | - child.classList.remove('selected') |
279 | | - }) |
280 | | - } |
281 | | - |
282 | 275 | const setTitle = (title) => (isArchiveSite() ? `Archive ${title}` : homeTitle) |
283 | 276 |
|
284 | 277 | const isArchiveSite = () => window.location.host.includes('archive') |
|
654 | 647 | if (page.navVersionIconId) { |
655 | 648 | navVersionWrapper.appendChild(createSvgElement('.icon.nav-version-icon', '#' + page.navVersionIconId)) |
656 | 649 | } |
| 650 | + |
| 651 | + const currentNavGroup = createElement('div') |
| 652 | + currentNavGroup.setAttribute('role', 'group') |
| 653 | + const currentNavLabel = createElement('div.nav-version-label') |
| 654 | + currentNavLabel.setAttribute('role', 'presentation') |
| 655 | + currentNavGroup.appendChild(currentNavLabel) |
| 656 | + |
| 657 | + const catchallNavGroup = createElement('div') |
| 658 | + catchallNavGroup.setAttribute('role', 'group') |
| 659 | + const catchallNavLabel = createElement('div.nav-version-label') |
| 660 | + catchallNavLabel.setAttribute('role', 'presentation') |
| 661 | + catchallNavGroup.appendChild(catchallNavLabel) |
| 662 | + |
657 | 663 | versions.reduce((lastVersionData, versionData) => { |
658 | 664 | if (!isArchiveSite()) { |
659 | 665 | if (versionData === currentVersionData) { |
660 | | - navVersionMenu.appendChild(createElement('span.nav-version-label', currentVersion)) |
| 666 | + currentNavLabel.textContent = currentVersion |
| 667 | + navVersionMenu.appendChild(currentNavGroup) |
661 | 668 | } else if (versionData.prerelease) { |
662 | 669 | if (!lastVersionData) { |
663 | | - navVersionMenu.appendChild(createElement('span.nav-version-label', 'Prerelease versions')) |
| 670 | + currentNavLabel.textContent = 'Prerelease versions' |
| 671 | + navVersionMenu.appendChild(currentNavGroup) |
664 | 672 | } |
665 | 673 | } else if (lastVersionData === currentVersionData) { |
666 | | - navVersionMenu.appendChild(createElement('span.nav-version-label', previousVersions)) |
| 674 | + catchallNavLabel.textContent = previousVersions |
| 675 | + navVersionMenu.appendChild(catchallNavGroup) |
667 | 676 | } |
668 | 677 | } else if (versionData === currentVersionData) { |
669 | | - navVersionMenu.appendChild(createElement('span.nav-version-label', 'Archived versions')) |
| 678 | + catchallNavLabel.textContent = 'Archived versions' |
| 679 | + navVersionMenu.appendChild(catchallNavGroup) |
670 | 680 | } |
| 681 | + |
671 | 682 | const versionDataset = { |
672 | 683 | version: versionData.version, |
673 | 684 | } |
674 | 685 | const navVersionOption = createElement( |
675 | | - 'button.nav-version-option', |
| 686 | + 'div.nav-version-option', |
676 | 687 | { dataset: versionDataset }, |
677 | 688 | versionData.displayVersion |
678 | 689 | ) |
| 690 | + navVersionOption.setAttribute('role', 'option') |
679 | 691 | navVersionOption.setAttribute('tabindex', '-1') |
680 | 692 | navVersionOption.id = `${componentData.name}-${versionData.displayVersion}` |
681 | 693 | navVersionOption.addEventListener('keydown', (e) => { |
|
690 | 702 | navVersionOption.addEventListener('blur', () => { |
691 | 703 | setAriaActiveDescendant(componentData.name, versionData.displayVersion, false) |
692 | 704 | }) |
693 | | - if (versionData === currentVersionData) { |
694 | | - addCurrentVersionIndicator(navVersionMenu, 'tooltip-dot-nav-version') |
695 | | - } |
696 | 705 | if (versionData.version === activeVersion) { |
697 | 706 | navVersionOption.classList.add('selected') |
698 | 707 | } |
699 | | - navVersionMenu |
700 | | - .appendChild(navVersionOption) |
701 | | - .addEventListener('click', (e) => this.selectVersion(navVersionMenu, navItem, componentData, e)) |
| 708 | + if (versionData === currentVersionData) { |
| 709 | + addCurrentVersionIndicator(navVersionOption, 'tooltip-dot-nav-version') |
| 710 | + } |
| 711 | + if (!isArchiveSite() && versionData === currentVersionData) { |
| 712 | + currentNavGroup.appendChild(navVersionOption) |
| 713 | + } else { |
| 714 | + catchallNavGroup.appendChild(navVersionOption) |
| 715 | + } |
| 716 | + |
| 717 | + navVersionMenu.addEventListener('click', (e) => this.selectVersion(navVersionMenu, navItem, componentData, e)) |
702 | 718 | return versionData |
703 | 719 | }, undefined) |
704 | 720 | navVersionWrapper.addEventListener('mousedown', (e) => { |
|
720 | 736 | autoCloseVersionDropdown(navVersionMenu) |
721 | 737 | }) |
722 | 738 | if (versions.length > 1) navVersionDropdown.appendChild(navVersionMenu) |
723 | | - navVersionMenu.lastChild?.addEventListener('blur', () => { |
| 739 | + const navOptions = navVersionMenu.querySelectorAll('.nav-version-option') |
| 740 | + navOptions[navOptions.length - 1]?.addEventListener('blur', () => { |
724 | 741 | autoCloseVersionDropdown(navVersionMenu) |
725 | 742 | }) |
726 | 743 |
|
|
851 | 868 | } |
852 | 869 |
|
853 | 870 | selectVersion (navVersionMenu, navItem, componentData, e) { |
854 | | - this.toggleNav(navItem, componentData, e.target.dataset.version) |
855 | | - clearSelected(navItem) |
| 871 | + const allVersionOptions = navVersionMenu.querySelectorAll('.nav-version-option') |
| 872 | + allVersionOptions.forEach((option) => option.classList.remove('selected')) |
856 | 873 | e.target.classList.add('selected') |
| 874 | + this.toggleNav(navItem, componentData, e.target.dataset.version) |
| 875 | + |
857 | 876 | const navVersionWrapper = document.querySelector( |
858 | 877 | `[data-component="${navItem.getAttribute('data-component')}"] .nav-version-wrapper` |
859 | 878 | ) |
|
0 commit comments