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:
|
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.