Make hover effect on dropdown admonitions more prominent

[gabalafou]

Closes Quansight-Labs/czi-scientific-python-mgmt#80

This PR:

• Outlines the title bar of dropdown admonitions on hover
• Darkens the chevron icon on hover
• Restores the focus ring on the Sphinx Design dropdown admonitions by increasing the selector specificity for the focus ring, which fixes Focus ring on Sphinx Design dropdowns missing again #1923 (but I ultimately want to fix Sphinx Design)

Test plan

To test this PR, go to the following preview URL:

• https://pydata-sphinx-theme--1986.org.readthedocs.build/en/1986/user_guide/web-components.html

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.

[github-actions]

Coverage report

This PR does not seem to contain any modification to coverable code.

[drammock]

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.

[gabalafou]

Thanks @drammock!

all the admonitions on that page get a title underline

Great catch! I didn't realize that the nested selector in _togglebutton.scss was casting such a wide net. I fixed this issue by changing .admonition to .dropdown.admonition.toggle.

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

[drammock]

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.

[gabalafou]

@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

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.

[gabalafou]

Cross reference:

• Focus ring on Sphinx Design dropdowns missing again #1923

[drammock]

@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?

[gabalafou]

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 😅

[gabalafou]

Two things came out of today's CZI Scientific Python team sync that need happen before merging this PR:

• Add transition to the hover outline to make it a bit less jarring
• Get an okay from @smeragoel

[smeragoel]

@gabalafou This LGTM and is approved from my end!

[drammock]

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?

[dbitouze]

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:

• collapsed: the behavior is that of this PR (only the title is enclosed),
• expanded: the frame encloses the entire rectangle of the admonition?

[drammock]

Wouldn't it be more appropriate for the outline to enclose not only the title, but also the entire admonition

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.

[dbitouze]

Wouldn't it be more appropriate for the outline to enclose not only the title, but also the entire admonition

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.