-
Notifications
You must be signed in to change notification settings - Fork 673
Collapsible source headings #17226
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
base: 5.8
Are you sure you want to change the base?
Collapsible source headings #17226
Conversation
Related issues: |
…ollapsible-index-headings
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.
Nice!! Couple thoughts:
- The setting seems unnecessary? From an AX perspective it would be weird if some headings are collapsible and some aren’t.
- I don’t love the collapsed toggle styling’s inverted colors. Let’s just have it look the same, but upside-down, as when the heading is expanded.
# Conflicts: # src/web/assets/cp/dist/cp.js # src/web/assets/cp/dist/cp.js.map
…com:craftcms/cms into feature/CMS-1339-collapsible-index-headings
Updated, all headings are just collapsible now.
The toggle will only appear this way when one of the items nested beneath it (and therefore invisible when collapsed) is selected. The goal was to provide some kind of "hey a thing under here is selected" indicator. We could also highlight the actual item that's collapsed, but that felt a little too strong to me. I also remove these lines because a heading will always get a |
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.
Awesome feature! From a11y testing:
- The disclosure controls should be updated to either be at least 24px in size, or have sufficient space with adjacent links
- The disclosure control should also include the heading name for extra context, either as visually-hidden text, or referenced via
aria-labelledby
oraria-describedby
. The benefit of using visually-hidden text oraria-labelledby
would be that the control is more accessible to voice control users, and screen reader users who may be navigating controls out of context. - This issue already exists, but I’m wondering if we should require headings not be blank, as it’s a bit disconcerting when there’s a disclosure toggle next to a blank heading.
- The inverted button communicates to sighted users that one of the child items is active, but that information isn’t communicated to screen reader users. It may be helpful to add something like
aria-current="true"
to communicate that we’re currently inside that nested source menu. 🤔
Thanks @gcamacho079! 🙌
I think we have enough space here (but please correct me if I'm wrong). I found this guidance:
So I whipped up some CSS to see and I think things look good?
Fixed in 702eda4 happy to tweak that language though. I'd love a recommendation.
As of d5316e7 blank headings won't be collapsible. I feel like that's probably the best compromise for the moment.
Would |
@brianjhanson I think this only applies when the disclosure is open; the safe clickable area of the disclosure toggle is 21.2px according to the testing extension, due to the first link in the nested source menu: ![]()
The reason I flagged it is because there’s a visual indicator that there’s an active child without there being an equivalent for AT users. When the disclosure is expanded, there isn’t an indicator on the parent, in which case, there’s no hard requirement to include that information for AT users. We can include it, though, for clarity, and I realized after my initial comment that we can actually put the |
Thanks @gcamacho079! I just added a bit more margin to headings which gets the hit target test to pass in AXE for me.
Just updated so the parent |
Description
Adds a "collapsible" option to source headings when customizing.
When checked, headings will get an icon before the label and items beneath the heading can be collapsed.
If the current page is an ancestor of a collapsed section, the icon will flip colors to denote a collapsed item is active.
The state of each toggle will be stored in cookies so it will persist across page loads. The only downside is a minor flash of the expanded state.
Related issues
Fixes CMS-1339