-
Notifications
You must be signed in to change notification settings - Fork 321
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
Fix landmarks #1454
Fix landmarks #1454
Changes from all commits
eeb9191
3c1fc72
2405b5d
bf611d0
4760d6e
1e461b7
e6b5bd3
d1b4622
346cb87
6fc4807
b13a1b6
a5f1f8e
87db857
52b968d
bd26466
dfa1a26
3bb86f2
fc12dbc
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,10 +1,13 @@ | ||
{# Displays the current page's Table of Contents. #} | ||
{% set page_toc = generate_toc_html() %} | ||
{%- if page_toc | length >= 1 %} | ||
<div class="page-toc tocsection onthispage"> | ||
{%- set page_navigation_heading_id = unique_html_id("pst-page-navigation-heading") -%} | ||
<div | ||
id="{{ page_navigation_heading_id }}" | ||
class="page-toc tocsection onthispage"> | ||
<i class="fa-solid fa-list"></i> {{ _("On this page") }} | ||
</div> | ||
<nav class="bd-toc-nav page-toc"> | ||
<nav class="bd-toc-nav page-toc" aria-labelledby="{{ page_navigation_heading_id }}"> | ||
{{ page_toc }} | ||
</nav> | ||
{%- endif %} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -50,7 +50,7 @@ | |
|
||
{# A button hidden by default to help assistive devices quickly jump to main content #} | ||
{# ref: https://www.youtube.com/watch?v=VUR0I5mqq7I #} | ||
<a class="skip-link" href="#main-content">{{ _("Skip to main content") }}</a> | ||
<a id="pst-skip-link" class="skip-link" href="#main-content">{{ _("Skip to main content") }}</a> | ||
|
||
{%- endblock %} | ||
|
||
|
@@ -81,14 +81,18 @@ | |
<div class="search-button__overlay"></div> | ||
<div class="search-button__search-container">{% include "../components/search-field.html" %}</div> | ||
</div> | ||
|
||
<header> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This also had to do with All page content should be contained by landmarks. Note that this PR does not fix all instances of this error everywhere in the theme. (For example, the Read The Docs switcher violates this rule.) |
||
{%- if theme_announcement -%} | ||
{% include "sections/announcement.html" %} | ||
{%- endif %} | ||
{% block docs_navbar %} | ||
<nav class="bd-header navbar navbar-expand-lg bd-navbar"> | ||
<div class="bd-header navbar navbar-expand-lg bd-navbar"> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The This outer nav contains the logo, the version switcher, the list of header links, the search bar, the theme switcher, and the icon links to Twitter, GitHub, PyPI and PyData. The inner nav contains the list of header links, so I think it better matches the nav element semantics. Furthermore, on mobile this outer nav changes so that it only shows the left hamburger (site and section navigation), the logo, the search, and the right hamburger (page navigation). Whereas the inner nav (based on the Jinja navbar-nav.html component), contains the same content on desktop and mobile. On mobile, the semantics become very clear. On mobile the sidebar contains two navigation sections: one for the site, one for the section of the site that you're in: So I think the inner nav should keep the nav semantics, whereas the nav semantics here on this line should be removed. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. As an aside, there's something that feels not quite right to me about putting external links under a heading that says "Site Navigation" but maybe that's an issue for another day. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
yes let's punt on that. Users like to do it (have external links in the main topbar nav) and would be mad if we removed the ability to do that. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Right. But maybe the heading should be "Main Navigation" or something like that instead of "Site Navigation"? Or maybe we get rid of the visible heading altogether and set aria-label="Main" on the nav tag. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'm OK with "Main navigation" instead of "Site navigation" There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. After thinking about this some more, may I make an argument to simply remove the heading?
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. can you open a new issue to discuss further the idea of removing the "Site navigation" title? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. #1588 :) |
||
{%- include "sections/header.html" %} | ||
</nav> | ||
</div> | ||
{% endblock docs_navbar %} | ||
</header> | ||
|
||
<div class="bd-container"> | ||
<div class="bd-container__inner bd-page-width"> | ||
{# Primary sidebar #} | ||
|
@@ -107,7 +111,7 @@ | |
{% block docs_body %} | ||
{# This is empty and only shows up if text has been highlighted by the URL #} | ||
{% include "components/searchbox.html" %} | ||
<article class="bd-article" role="main"> | ||
<article class="bd-article"> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Duplicate main landmark (there should only be one on the page). If you look just a few lines above, you'll find a I think this was an oversight of #1019. |
||
{% block body %}{% endblock %} | ||
</article> | ||
{% endblock docs_body %} | ||
|
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.
I want to do this in a follow-up PR not this one because this PR has been open for a while and has gotten stuck on translation stuff, so I would like to tackle the translation issues separately.
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.
Sorry what is the translation issue ?
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.
It's been a while so I don't actually remember what issues I was running into, but in a previous version of this PR, I had changed a translatable string, so then I tried to go through the
nox -s translate -- extract
andnox -s translate -- update
steps but I ran into issues or didn't understand what was going on. So I decided to revert the change to the translatable string_("Section Navigation")
.Similarly, here I don't know how to mark this string as translatable (because it's a
.js
file) and even if I did know how to mark it as translatable, I would still want to defer the work of putting it through the translation machinery until later, in the interest of getting this PR merged now and handling translation stuff in a subsequent PR. Does that make sense?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.
The string here, "Version warning", is used to label the landmark (
<aside>
=> role = complementary) that I added to the version warning banner. (The rationale is that since we make the version warning banner so visually prominent, we should also make it prominent for assistive tech, hence the landmark.)Eventually the string needs to be translated. It will be surfaced by assistive tech when showing or announcing landmarks on the page: "Version warning, complementary" (something like that)
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.
Can you open a new issue to remind us to come back to this (question about marking strings as translatable if they're generated within JavaScript) please?
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.
#1587 😃