Make hover effect on dropdown admonitions more prominent #1986
Conversation
Coverage report
This PR does not seem to contain any modification to coverable code. |
There was a problem hiding this comment.
Two points:
- all the admonitions on that page get a title underline when hovered (even the non-collapsible ones that aren't interactable). Is that intended? Seems misleading/confusing to have hover effects on non-interactible elements.
- Collapsible admonition with no provided title gets a default "..." icon (
sd-octicon-kebab-horizontal), which doesn't respond to hover in any way.
trallard
added
tag: accessibility
….po in ja (pydata#1979) Co-authored-by: transifex-integration[bot] <43880903+transifex-integration[bot]@users.noreply.github.com> Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
….po in fr (pydata#2000) Co-authored-by: transifex-integration[bot] <43880903+transifex-integration[bot]@users.noreply.github.com> Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
gabalafou
force-pushed
the
chevron-hover
branch
from
912286c
to
4fd3533
Compare
|
Thanks @drammock!
Great catch! I didn't realize that the nested selector in In my latest batch of commits, I decided to try outlining the entire title bar on hover. I'm curious what folks think of this hover effect. cc @smeragoel |
There was a problem hiding this comment.
In my latest batch of commits, I decided to try outlining the entire title bar on hover. I'm curious what folks think of this hover effect
Confused, I don't see any "outline" on hover (side note: when tabbing through the page I also don't see a focus ring on these dropdowns either). Tried both FF and Chromium on Linux.
One point I mentioned before is still true:
Collapsible admonition with no provided title gets a default "..." icon (
sd-octicon-kebab-horizontal), which doesn't respond to hover in any way.
|
@drammock somehow I forgot to git push 2f16458 🤦♂️ Please try this link again (be sure to clear your cache): cc @smeragoel PS. I'm aware of the missing focus ring, and I am working on a PR today to try to upstream some of the work to Sphinx Design. |
|
Cross reference: |
There was a problem hiding this comment.
@drammock somehow I forgot to git push 2f16458 🤦♂️
Please try this link again (be sure to clear your cache):
* https://pydata-sphinx-theme--1986.org.readthedocs.build/en/1986/user_guide/web-components.html
OK I see the hover-outline now.
PS. I'm aware of the missing focus ring, and I am working on a PR today to try to upstream some of the work to Sphinx Design.
I also see the focus ring though (your comments made me expect it to still not work)... Is &:focus:focus-visible a clever selector specificity hack that fixed it?
Oh yes! I forgot that I added that in 2f16458 😅 |
|
Two things came out of today's CZI Scientific Python team sync that need happen before merging this PR:
|
|
@gabalafou This LGTM and is approved from my end! |
There was a problem hiding this comment.
I like the added transition! I noticed one more tiny problem though. The very last dropdown on the page (in the toggle buttons section) doesn't get the extra inner space, so if it has tab focus and hover at the same time, the hover effect (purple) is mostly hidden behind the tab focus ring (pink). Presumably a CSS selector issue?
|
Wouldn't it be more appropriate for the outline to enclose not only the title, but also the entire admonition so that when the admonition is:
|
Clicking on the content area doesn't trigger the collapsing though. Only clicking on the title bar. So IMO it would be misleading for the hover outline to encompass the entire card when it's expanded. |
I see. Agree. |
Closes Quansight-Labs/czi-scientific-python-mgmt#80
This PR:
Test plan
To test this PR, go to the following preview URL:
then hover your mouse over the dropdown admonitions. Try hovering over various parts of the admonition, for example, directly over the button versus anywhere in the dropdown title bar. Also check the hover effect on the admonition when it's in the expanded state, too.
An inconsistency
You may notice an inconsistency between the Sphinx Design collapsible admonitions and those from sphinx-togglebutton. With the SD admonitions, the chevron icon points right when collapsed, then rotates to point down when expanded. With sphinx-togglebutton, the icon points down when collapsed, then points up when expanded. But it's not within the scope of this PR to fix that inconsistency.