sidebar uses native <details> for collapsible groups [#3804. also #3517, #3805] #3806
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #3804
Fixes #3517, closes #3802 as obviated
Fixes #3805
3804 is the primary target of this PR. Preserving the behaviors identified in 3517 and 3805 would have taken additional work, so I took the opportunity to address them for "free".
Before
Sidebar collapsible groups used custom markup and JS. Carets are focusable, an accessibility problem.
After
<details>
elements. Custom markup and JS is reduced.To test
With the released version, replace
docs/.vitepress/config/en.ts
'ssidebarGuide
with the following.Run
pnpm run docs
Open
http://localhost:<your port>/guide/what-is-vitepress
in a browserConfirm that the "Introduction" group is closed. [3804 regression check]
Toggle "Introduction" and its children open by clicking on the carets [3517]. Confirm that all items linked to "What is VitePress?" have the active color. [3804 regression check]
Toggle unlinked group headings, eg. "Writing". Confirm that they toggle when either the text or caret is clicked. [3517]
Confirm that the non-group item linked to "What is VitePress?" has the indicator. [3804 regression check]
Toggle "Introduction" > "Group heading linked to โWhat is VitePress?โ" closed.
Confirm that hovering over "Introduction" > "Deploy", which is not linked, does not give it the hover color. [3804 regression check]
Confirm that hovering of the text "Group heading linked to โWhat is VitePress?โ" gives it the hover color. [3804]
Confirm that hovering with the cursor over linked sidebar items gives them the hover color. [3804 regression check]
Click "Introduction" > "Routing"
Under "Introduction", click the text of the first item, "Group heading linked to "โWhat is VitePress?โ". Confirm that the site navigates and the group stays closed. [3805]