New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. Weโll occasionally send you account related emails.
Already on GitHub? Sign in to your account
sidebar uses native <details> for collapsible groups [#3804. also #3517, #3805] #3806
base: main
Are you sure you want to change the base?
Conversation
(sorry for that noise. almost never resolve merge conflicts via the github UI and forgot it would merge the base into the feature. disregard the "'main' into sidebar-details", it's reverted) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
.item:hover .caret
and .item:hover .caret:hover
styles should probably be merged and adjusted to .item summary:hover .caret { color: var(--vp-c-text-1) }
(because currently item is whole element instead of just that title part)
Also, regarding #3805 I don't think that's a bug. If I am on this state: I would want clicking next page will uncollapse the "Writing" section in sidebar. |
Also, the tests seem to be failing, please update those too. |
Thanks for the feedback. Been meaning to say that I see the failing tests and will look at them. Will try to find time for this soon. |
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]