diff options
| author | Oliver Speir | 2024-04-08 07:47:34 -0600 |
|---|---|---|
| committer | GitHub | 2024-04-08 15:47:34 +0200 |
| commit | 3b29b3ab824f538f27e20310cb08786a92c7bd65 (patch) | |
| tree | 7b0f037804ea8a6e24276e03712a2669a0095d28 | |
| parent | 418d386722a4caa0158efe3bd399909bab95d59c (diff) | |
| download | IT.starlight-3b29b3ab824f538f27e20310cb08786a92c7bd65.tar.gz IT.starlight-3b29b3ab824f538f27e20310cb08786a92c7bd65.tar.bz2 IT.starlight-3b29b3ab824f538f27e20310cb08786a92c7bd65.zip | |
Tab aria selected (#1723)
Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>
| -rw-r--r-- | .changeset/late-onions-jog.md | 5 | ||||
| -rw-r--r-- | packages/starlight/user-components/Tabs.astro | 8 |
2 files changed, 9 insertions, 4 deletions
diff --git a/.changeset/late-onions-jog.md b/.changeset/late-onions-jog.md new file mode 100644 index 00000000..360668ec --- /dev/null +++ b/.changeset/late-onions-jog.md @@ -0,0 +1,5 @@ +--- +'@astrojs/starlight': patch +--- + +Fixes accessibility by using `aria-selected="false"` for inactive tabs instead of removing `aria-selected="true"` in the tablist of Starlight’s `<Tabs>` component diff --git a/packages/starlight/user-components/Tabs.astro b/packages/starlight/user-components/Tabs.astro index 554be0e4..c163b2bd 100644 --- a/packages/starlight/user-components/Tabs.astro +++ b/packages/starlight/user-components/Tabs.astro @@ -17,7 +17,7 @@ const { html, panels } = processPanels(panelHtml); role="tab" href={'#' + panelId} id={tabId} - aria-selected={idx === 0 && 'true'} + aria-selected={idx === 0 ? 'true' : 'false'} tabindex={idx !== 0 ? -1 : 0} > {icon && <Icon name={icon} />} @@ -61,7 +61,7 @@ const { html, panels } = processPanels(panelHtml); color: var(--sl-color-gray-3); outline-offset: var(--sl-outline-offset-inside); } - .tab [role='tab'][aria-selected] { + .tab [role='tab'][aria-selected="true"] { color: var(--sl-color-white); border-color: var(--sl-color-text-accent); font-weight: 600; @@ -87,7 +87,7 @@ const { html, panels } = processPanels(panelHtml); // Handle clicks for mouse users tab.addEventListener('click', (e) => { e.preventDefault(); - const currentTab = tablist.querySelector('[aria-selected]'); + const currentTab = tablist.querySelector('[aria-selected="true"]'); if (e.currentTarget !== currentTab) { this.switchTab(e.currentTarget as HTMLAnchorElement, i); } @@ -122,7 +122,7 @@ const { html, panels } = processPanels(panelHtml); // Mark all tabs as unselected and hide all tab panels. this.tabs.forEach((tab) => { - tab.removeAttribute('aria-selected'); + tab.setAttribute('aria-selected', 'false'); tab.setAttribute('tabindex', '-1'); }); this.panels.forEach((oldPanel) => { |