Skip to content

Consistent focus ring (first pass) #1549

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.

Sign up for GitHub

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

Merged
merged 14 commits into from
Nov 13, 2023
Merged

Consistent focus ring (first pass) #1549

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
4062f89
wip
gabalafou Oct 30, 2023
1d5af58
Style focus state in header nav
gabalafou Oct 31, 2023
5856c9e
update focus ring style on all focussable elements
gabalafou Oct 31, 2023
99dcef3
simplify
gabalafou Oct 31, 2023
850fc9c
fix links in mobile sidebar overlay
gabalafou Nov 6, 2023
357b34c
put focus rings around a few more focusable elements
gabalafou Nov 6, 2023
7470f40
polish
gabalafou Nov 6, 2023
37640dd
update comment
gabalafou Nov 6, 2023
e2d1810
review
gabalafou Nov 7, 2023
94e6804
better align focus ring on collapsible admonitions
gabalafou Nov 9, 2023
f3f53c0
comment and simplify sphinx-togglebutton focus ring
gabalafou Nov 9, 2023
029d178
make css override more explicit
gabalafou Nov 9, 2023
b4c08a9
Fix SD link-card focus ring and on homepage, bring links inside card
gabalafou Nov 13, 2023
e67849e
Update docs/index.md
drammock Nov 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/examples/gallery.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ Thanks for your support!
link: https://fairlearn.org/main/about/
- title: Feature-engine
link: https://feature-engine.readthedocs.io/
- title: idtracker.ai
- title: idtracker.ai
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The build step was auto-linking idtracker.ai, outputting two anchor tags instead of one.

link: https://idtracker.ai/
- title: MegEngine
link: https://www.megengine.org.cn/doc/stable/en/index.html
Expand Down
8 changes: 3 additions & 5 deletions docs/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,11 @@ A clean, Bootstrap-based Sphinx theme by and for [the PyData community](https://
- header: "{fas}`circle-half-stroke;pst-color-primary` Light / Dark theme"
content: "Users can toggle between light and dark themes interactively."
- header: "{fas}`palette;pst-color-primary` Customizable UI and themes"
content: "Customize colors and branding with CSS variables, and build custom UIs with [Sphinx Design](user_guide/web-components)."
content: "Customize colors and branding with CSS variables, and build custom UIs with [Sphinx Design components](user_guide/web-components)."
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since there is another link on the home page to the same URL, it's considered good practice for accessibility to make both of them also have the same name: "Sphinx Design components."

- header: "{fab}`python;pst-color-primary` Supports PyData and Jupyter"
content: "CSS and UI support for Jupyter extensions and PyData execution outputs."
link: "examples/pydata.html"
content: "CSS and UI support for Jupyter extensions and [PyData execution outputs](examples/pydata.ipynb)."
- header: "{fas}`lightbulb;pst-color-primary` Example Gallery"
content: "See our gallery of projects that use this theme."
link: "examples/gallery.html"
content: "See [our gallery](examples/gallery.md) of projects that use this theme."
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The HTML template for cards with links decouples the link text (which should be the card content) from the link element, causing them to appear to assistive tech as their hrefs, in this case "examples/pydata.html" and "examples/gallery.html."

I felt it would be better to bring the links into the cards for two reasons:

  1. Seeing/hearing "Pydata execution outputs" and "our gallery" is arguably nicer than hearing the hrefs
  2. It makes these two cards consistent with the other 4 cards, which do not have link fields. I always felt it was a little weird that the last two cards had hover and focus states while the others did not.

```

```{seealso}
Expand Down
27 changes: 22 additions & 5 deletions src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,11 +140,6 @@ html[data-theme="light"] {
.sd-card-header {
background-color: var(--pst-color-panel-background);
border-bottom: 1px solid var(--pst-color-border);

&:focus-visible {
outline: $focus-ring-outline;
outline-offset: -$focus-ring-width;
}
}
.sd-card-footer {
background-color: var(--pst-color-panel-background);
Expand All @@ -154,6 +149,22 @@ html[data-theme="light"] {
.sd-card-body {
background-color: var(--pst-color-panel-background);
}

// Focus ring for link-cards
.sd-stretched-link:focus-visible {
// Don't put the focus ring on the <a> element (it has zero height in Sphinx Design cards)
outline: none;

// Put the focus ring on the <a> element's ::after pseudo-element
&:after {
outline: $focus-ring-outline;
border-radius: 0.25rem; // copied from Sphinx Design CSS for .sd-card
}
}

&.sd-card-hover:hover {
border-color: var(--pst-color-link-hover);
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Snuck in a hover color correction with this commit.

}
}
/*******************************************************************************
* tabs
Expand Down Expand Up @@ -261,5 +272,11 @@ details.sd-dropdown {
.sd-summary-down {
top: 0.7rem;
}

// Focus ring
&:focus-visible {
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These focus ring CSS rules that I had put under .sd-card more properly belong in this section of the CSS file.

outline: $focus-ring-outline;
outline-offset: -$focus-ring-width;
}
}
}