Skip to content

Commit fda4087

Browse files
gabalafoudbitouzeCadairdrammockdependabot[bot]
authored
Fix duplicate HTML IDs (#1425)
* Fix duplicate HTML IDs * fix tests * Do not animate the version admonitions colors. (#1424) Otherwise a delay has to be added to the accessibility color contrast checks, to wait for the colors to fully transition. * BUG - Remove redundant ARIA in breadcrumb navigation (#1426) * style(i18n): French Typo fixed (#1430) * Add the ability to add a center section to the footer (#1432) * Add a center section for the footer * Add docs for footer_center * Add a test site for the center footer * test it in our own docs * remove new test site * add footer test --------- Co-authored-by: Daniel McCloy <[email protected]> * Build(deps): Bump actions/checkout from 3 to 4 (#1433) Bumps [actions/checkout](https://github.com/actions/checkout) from 3 to 4. - [Release notes](https://github.com/actions/checkout/releases) - [Changelog](https://github.com/actions/checkout/blob/main/CHANGELOG.md) - [Commits](actions/checkout@v3...v4) --- updated-dependencies: - dependency-name: actions/checkout dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Add dropdown_text argument to generate_header_nav_html (#1423) * Add dropdown_text argument to generate_header_nav_html * Add a test, fix typo in theme.conf and remove header_dropdown_text from docs/conf.py * fixed? --------- Co-authored-by: Daniel McCloy <[email protected]> * fix: rollback ref and Id changes (#1438) * bump: version 0.13.3 → 0.14.0 (#1440) * bump version * update version switcher * back to dev * fix: change the z-index of the dropdown (#1442) In order to be on top of the primary sidebar on small screens. * fix: set the same background for dark/light (#1443) * fix: set the same background for dark/light et the same background color for all state of the search field. It is currently only applied when hovered * fix: wrong css selector * Update src/pydata_sphinx_theme/assets/styles/components/_search.scss * Update src/pydata_sphinx_theme/assets/styles/components/_search.scss * Fix duplicate HTML IDs * fix tests * unique_html_id * backwards-compat generate_header_nav_html * feedback review * update fixture * ughhhh...caching * code cleanup * fix test snapshot * put comment inside def --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Denis Bitouzé <[email protected]> Co-authored-by: Stuart Mumford <[email protected]> Co-authored-by: Daniel McCloy <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Alenka Frim <[email protected]> Co-authored-by: Rambaud Pierrick <[email protected]>
1 parent bcfcc85 commit fda4087

File tree

3 files changed

+75
-29
lines changed

3 files changed

+75
-29
lines changed

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/version-switcher.html

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,24 @@
1-
{# As the version switcher will only work when JavaScript is enabled, we add it through JavaScript.
2-
#}
1+
{%- set button_id = unique_html_id("pst-version-switcher-button") -%}
2+
{%- set dropdown_id = unique_html_id("pst-version-switcher-list") -%}
3+
{# As the version switcher will only work when JavaScript is enabled, we add it through JavaScript. #}
34
<script>
45
document.write(`
56
<div class="version-switcher__container dropdown">
6-
<button id="versionswitcherbutton" type="button" role="button" class="version-switcher__button btn btn-sm navbar-btn dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="listbox" aria-controls="versionswitcherlist" aria-label="Version switcher list">
7+
<button id="{{ button_id }}"
8+
type="button"
9+
class="version-switcher__button btn btn-sm navbar-btn dropdown-toggle"
10+
data-bs-toggle="dropdown"
11+
aria-haspopup="listbox"
12+
aria-controls="{{ dropdown_id }}"
13+
aria-label="Version switcher list"
14+
>
715
Choose version <!-- this text may get changed later by javascript -->
816
<span class="caret"></span>
917
</button>
10-
<div id="versionswitcherlist" class="version-switcher__menu dropdown-menu list-group-flush py-0" role="listbox" aria-labelledby="versionswitcherbutton">
11-
<!-- dropdown will be populated by javascript on page load -->
18+
<div id="{{ dropdown_id }}"
19+
class="version-switcher__menu dropdown-menu list-group-flush py-0"
20+
role="listbox" aria-labelledby="{{ button_id }}">
21+
<!-- dropdown will be populated by javascript on page load -->
1222
</div>
1323
</div>
1424
`);

src/pydata_sphinx_theme/toctree.py

Lines changed: 48 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
"""Methods to build the toctree used in the html pages."""
22

33
from functools import lru_cache
4-
from typing import List, Union
4+
from itertools import count
5+
from typing import Iterator, List, Union
56
from urllib.parse import urlparse
67

78
import sphinx
@@ -37,27 +38,24 @@ def add_toctree_functions(
3738
"""Add functions so Jinja templates can add toctree objects."""
3839

3940
@lru_cache(maxsize=None)
40-
def generate_header_nav_html(
41-
n_links_before_dropdown: int = 5, dropdown_text: str = "More"
42-
) -> str:
43-
"""Generate top-level links that are meant for the header navigation.
44-
45-
We use this function instead of the TocTree-based one used for the
46-
sidebar because this one is much faster for generating the links and
47-
we don't need the complexity of the full Sphinx TocTree.
48-
49-
This includes two kinds of links:
50-
51-
- Links to pages described listed in the root_doc TocTrees
52-
- External links defined in theme configuration
41+
def get_or_create_id_generator(base_id: str) -> Iterator[str]:
42+
for n in count(start=1):
43+
if n == 1:
44+
yield base_id
45+
else:
46+
yield f"{base_id}-{n}"
5347

54-
Additionally it will create a dropdown list for several links after
55-
a cutoff.
48+
def unique_html_id(base_id: str):
49+
"""Create an id that is unique from other ids created by this function at build time.
5650
57-
Parameters:
58-
n_links_before_dropdown:The number of links to show before nesting the remaining links in a Dropdown element.
59-
dropdown_text:Text of the dropdown element button.
51+
The function works by sequentially returning "<base_id>", "<base_id>-2",
52+
"<base_id>-3", etc. each time it is called.
6053
"""
54+
return next(get_or_create_id_generator(base_id))
55+
56+
@lru_cache(maxsize=None)
57+
def generate_header_nav_before_dropdown(n_links_before_dropdown):
58+
"""The cacheable part."""
6159
try:
6260
n_links_before_dropdown = int(n_links_before_dropdown)
6361
except Exception:
@@ -148,14 +146,42 @@ def generate_header_nav_html(
148146
for html in links_html[n_links_before_dropdown:]
149147
]
150148

149+
return out, links_dropdown
150+
151+
def generate_header_nav_html(
152+
n_links_before_dropdown: int = 5, dropdown_text: str = "More"
153+
) -> str:
154+
"""Generate top-level links that are meant for the header navigation.
155+
156+
We use this function instead of the TocTree-based one used for the
157+
sidebar because this one is much faster for generating the links and
158+
we don't need the complexity of the full Sphinx TocTree.
159+
160+
This includes two kinds of links:
161+
162+
- Links to pages described listed in the root_doc TocTrees
163+
- External links defined in theme configuration
164+
165+
Additionally it will create a dropdown list for several links after
166+
a cutoff.
167+
168+
Parameters:
169+
n_links_before_dropdown:The number of links to show before nesting the remaining links in a Dropdown element.
170+
dropdown_text:Text of the dropdown element button.
171+
"""
172+
out, links_dropdown = generate_header_nav_before_dropdown(
173+
n_links_before_dropdown
174+
)
175+
151176
if links_dropdown:
177+
dropdown_id = unique_html_id("pst-nav-more-links")
152178
links_dropdown_html = "\n".join(links_dropdown)
153179
out += f"""
154180
<li class="nav-item dropdown">
155-
<button class="btn dropdown-toggle nav-item" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-controls="pst-header-nav-more-links">
181+
<button class="btn dropdown-toggle nav-item" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-controls="{dropdown_id}">
156182
{_(dropdown_text)}
157183
</button>
158-
<ul id="pst-header-nav-more-links" class="dropdown-menu">
184+
<ul id="{dropdown_id}" class="dropdown-menu">
159185
{links_dropdown_html}
160186
</ul>
161187
</li>
@@ -314,6 +340,7 @@ def navbar_align_class() -> List[str]:
314340
)
315341
return align_options[align]
316342

343+
context["unique_html_id"] = unique_html_id
317344
context["generate_header_nav_html"] = generate_header_nav_html
318345
context["generate_toctree_html"] = generate_toctree_html
319346
context["generate_toc_html"] = generate_toc_html

tests/test_build/navbar_switcher.html

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,21 @@
11
<script>
22
document.write(`
33
<div class="version-switcher__container dropdown">
4-
<button id="versionswitcherbutton" type="button" role="button" class="version-switcher__button btn btn-sm navbar-btn dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="listbox" aria-controls="versionswitcherlist" aria-label="Version switcher list">
4+
<button id="pst-version-switcher-button-2"
5+
type="button"
6+
class="version-switcher__button btn btn-sm navbar-btn dropdown-toggle"
7+
data-bs-toggle="dropdown"
8+
aria-haspopup="listbox"
9+
aria-controls="pst-version-switcher-list-2"
10+
aria-label="Version switcher list"
11+
>
512
Choose version <!-- this text may get changed later by javascript -->
613
<span class="caret"></span>
714
</button>
8-
<div id="versionswitcherlist" class="version-switcher__menu dropdown-menu list-group-flush py-0" role="listbox" aria-labelledby="versionswitcherbutton">
9-
<!-- dropdown will be populated by javascript on page load -->
15+
<div id="pst-version-switcher-list-2"
16+
class="version-switcher__menu dropdown-menu list-group-flush py-0"
17+
role="listbox" aria-labelledby="pst-version-switcher-button-2">
18+
<!-- dropdown will be populated by javascript on page load -->
1019
</div>
1120
</div>
1221
`);

0 commit comments

Comments
 (0)