Skip to content

Fix: Add keyboard and screen reader accessible submenu navigation #309

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

Closed
IsabelBirds wants to merge 3 commits into from
Closed

Fix: Add keyboard and screen reader accessible submenu navigation #309

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c73136b
fix: Add keyboard and screen reader accessible submenu navigation
RobPrecious Mar 21, 2021
73ab5fd
Update to pass regression checks
IsabelBirds Mar 22, 2021
0329623
fix: update tests
RobPrecious Jul 25, 2021
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
27 changes: 25 additions & 2 deletions sphinx_book_theme/__init__.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,21 +161,44 @@ def generate_nav_html(
def collapse_list(li, ul, level):
if ul:
li.attrs["class"] = li.attrs.get("class", []) + ["collapsible-parent"]

if level <= 0:
ul.attrs["class"] = ul.attrs.get("class", []) + ["collapse-ul"]
li.append(
label = li.find("a").text + " sub menu"
button = toctree.new_tag(
"button",
attrs={
"class": ["chevron-button"],
"type": "button",
"aria-expanded": "false",
"aria-label": label,
},
)
button.append(
toctree.new_tag(
"i", attrs={"class": ["fas", "fa-chevron-down"]}
)
)
li.insert(1, button)
else:
# Icon won't show up unless captions are collapsed
if not li.name == "p" and "caption" not in li["class"]:
li.append(
label = li.find("a").text + " sub menu"
button = toctree.new_tag(
"button",
attrs={
"class": ["chevron-button"],
"type": "button",
"aria-expanded": "true",
"aria-label": label,
},
)
button.append(
toctree.new_tag(
"i", attrs={"class": ["fas", "fa-chevron-up"]}
)
)
li.insert(1, button)

# for top-level caption's collapse functionality
for para in toctree("p", attrs={"class": ["caption"]}):
Expand Down
2 changes: 1 addition & 1 deletion ...heme.e7340bb3dbd8dde6db86f25597f54a1b.css → ...heme.4ff1fef338556deea8228fdbb4ce9b58.css
View file
Open in desktop

Large diffs are not rendered by default.

22 changes: 14 additions & 8 deletions ...theme.7d483ff0a819d6edff12ce0b1ead3928.js → ...theme.890f6eca7a1115c66b0355561449d440.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,22 +10,28 @@ var initTocHide=()=>{var scrollTimeout;var throttle=200;var tocHeight=$("#bd-toc
return false}else{$("div.bd-toc").addClass("show")};})};var manageScrolledClassOnBody=function(){if(window.scrollY>0){document.body.classList.add("scrolled");}else{document.body.classList.remove("scrolled");}}
$(window).on('scroll',function(){if(!scrollTimeout){scrollTimeout=setTimeout(function(){checkTocScroll();manageScrolledClassOnBody();scrollTimeout=null;},throttle);}});}
var collapsibleListener=()=>{let expandUl=($ul)=>{if($ul.hasClass("collapse-ul")){$ul.removeClass("collapse-ul")
$ul.next("i").removeClass("fa-chevron-down").addClass("fa-chevron-up")}}
$ul.find("i").removeClass("fa-chevron-down").addClass("fa-chevron-up")
$ul.find("button").attr("aria-expanded","true")}}
$elem=$("li.active")
for(el of $elem){$ul=$(el).closest("ul")
expandUl($ul)
$ulChild=$(el).children("ul")
expandUl($ulChild)
$p=$ul.prev()
if($p.is(".caption, .collapsible-parent")){$p.find("i").removeClass("fa-chevron-down").addClass("fa-chevron-up")}}
$(".collapsible-parent>i, .caption.collapsible-parent").on("click",function(e){e.stopPropagation()
$i=$(this)
$collapsibleParent=$i.closest(".collapsible-parent")
if($p.is(".caption, .collapsible-parent")){$ul.find("i").removeClass("fa-chevron-down").addClass("fa-chevron-up")
$ul.find("button").attr("aria-expanded","true")}}
$(".collapsible-parent>button, .caption.collapsible-parent").on("click",function(e){e.stopPropagation()
$button=$(this)
$i=$button.find("i")
$collapsibleParent=$button.closest(".collapsible-parent")
if($collapsibleParent.prop("tagName")=="P"){$ul=$collapsibleParent.next("ul")}else{$ul=$collapsibleParent.find("ul:first")}
$ul.toggle(0,function(){if(!$i.is(".fas")){$i=$i.find("i")}
$ul.toggle(0,function(){if(!$i.is(".fas")){$i=$i.find("i")
$button=$i.closest("button")}
if($i.hasClass("fa-chevron-up")){$i.removeClass("fa-chevron-up")
$i.addClass("fa-chevron-down")}else{$i.removeClass("fa-chevron-down")
$i.addClass("fa-chevron-up")}})})}
$i.addClass("fa-chevron-down")
$button.attr("aria-expanded","true")}else{$i.removeClass("fa-chevron-down")
$i.addClass("fa-chevron-up")
$button.attr("aria-expanded","false")}})})}
var initThebeSBT=()=>{var title=$("div.section h1")[0]
if(!$(title).next().hasClass("thebe-launch-button")){$("<button class='thebe-launch-button'></button>").insertAfter($(title))}
initThebe();}
Expand Down
2 changes: 1 addition & 1 deletion sphinx_book_theme/theme.conf
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
inherit = pydata_sphinx_theme
pygments_style = tango
sidebars = sidebar-search-bs.html, sbt-sidebar-nav.html, sbt-sidebar-footer.html
stylesheet = sphinx-book-theme.e7340bb3dbd8dde6db86f25597f54a1b.css
stylesheet = sphinx-book-theme.4ff1fef338556deea8228fdbb4ce9b58.css

[options]
single_page = False
Expand Down
16 changes: 11 additions & 5 deletions src/js/sphinx-book-theme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,8 @@ var collapsibleListener = () => {
let expandUl = ($ul) => {
if ($ul.hasClass("collapse-ul")) {
$ul.removeClass("collapse-ul")
$ul.next("i").removeClass("fa-chevron-down").addClass("fa-chevron-up")
$ul.find("i").removeClass("fa-chevron-down").addClass("fa-chevron-up")
$ul.find("button").attr("aria-expanded", "true")
}
}
$elem = $("li.active")
Expand All @@ -115,14 +116,16 @@ var collapsibleListener = () => {
expandUl($ulChild)
$p = $ul.prev()
if ($p.is(".caption, .collapsible-parent")) {
$p.find("i").removeClass("fa-chevron-down").addClass("fa-chevron-up")
$ul.find("i").removeClass("fa-chevron-down").addClass("fa-chevron-up")
$ul.find("button").attr("aria-expanded", "true")
}
}
// click handler
$(".collapsible-parent>i, .caption.collapsible-parent").on("click", function(e) {
$(".collapsible-parent>button, .caption.collapsible-parent").on("click", function(e) {
e.stopPropagation()
$i = $(this)
$collapsibleParent = $i.closest(".collapsible-parent")
$button = $(this)
$i = $button.find("i")
$collapsibleParent = $button.closest(".collapsible-parent")
if ($collapsibleParent.prop("tagName") == "P") {
$ul = $collapsibleParent.next("ul")
} else {
Expand All @@ -131,13 +134,16 @@ var collapsibleListener = () => {
$ul.toggle(0, function() {
if (!$i.is(".fas")) {
$i = $i.find("i")
$button = $i.closest("button")
}
if ($i.hasClass("fa-chevron-up")) {
$i.removeClass("fa-chevron-up")
$i.addClass("fa-chevron-down")
$button.attr("aria-expanded","true")
} else {
$i.removeClass("fa-chevron-down")
$i.addClass("fa-chevron-up")
$button.attr("aria-expanded","false")
}
})
})
Expand Down
10 changes: 7 additions & 3 deletions src/scss/_leftbar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,14 +164,18 @@ nav.bd-links {
width: 100%;
}

.fa-chevron-up, .fa-chevron-down {
.chevron-button {
position: absolute;
font-size: 0.75em;
right: 0.5em;
top: 0;
padding: 0.5em;
border: none;
background: none;
cursor: pointer;
&:hover {

&:hover,
&:focus {
color: #007bff;
}
}
Expand All @@ -182,7 +186,7 @@ nav.bd-links {
}
font-size: 1em;
position: relative;
.fa-chevron-up, .fa-chevron-down {
.chevron-button {
right: 0.35em;
}
}
Expand Down
4 changes: 3 additions & 1 deletion tests/test_build.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -285,7 +285,9 @@ def test_show_navbar_depth(sphinx_build_factory):
attrs={"class": "bd-sidebar"}
)[0]
collapsed_uls = sidebar.findAll("ul", {"class": "collapse-ul"})
assert len(collapsed_uls) == 3
assert len(collapsed_uls) == 2
all_uls = sidebar.findAll("ul")
assert len(all_uls) == 3


def test_topbar_download_button_off(sphinx_build_factory, file_regression):
Expand Down
14 changes: 9 additions & 5 deletions tests/test_build/test_build_book.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ <h1 class="site-logo" id="site-title">
<input aria-label="Search the docs ..." autocomplete="off" class="form-control" id="search-input" name="q" placeholder="Search the docs ..." type="search"/>
</form>
<nav aria-label="Main navigation" class="bd-links" id="bd-docs-nav">
<p class="caption collapsible-parent">
<p>
<span class="caption-text">
My caption
</span>
Expand All @@ -32,6 +32,10 @@ <h1 class="site-logo" id="site-title">
<a class="reference internal" href="section1/index.html">
3. Section 1 index
</a>
<button aria-expanded="false" aria-label="3. Section 1 index sub menu" class="chevron-button" type="button">
<i class="fas fa-chevron-down">
</i>
</button>
<ul class="collapse-ul">
<li class="toctree-l2">
<a class="reference internal" href="section1/page1.html">
Expand Down Expand Up @@ -59,13 +63,15 @@ <h1 class="site-logo" id="site-title">
</a>
</li>
</ul>
<i class="fas fa-chevron-down">
</i>
</li>
<li class="toctree-l1 collapsible-parent">
<a class="reference internal" href="titles/index.html">
4. Testing titles and TOCtree
</a>
<button aria-expanded="false" aria-label="4. Testing titles and TOCtree sub menu" class="chevron-button" type="button">
<i class="fas fa-chevron-down">
</i>
</button>
<ul class="collapse-ul">
<li class="toctree-l2">
<a class="reference internal" href="titles/page-multipletitles.html">
Expand All @@ -88,8 +94,6 @@ <h1 class="site-logo" id="site-title">
</a>
</li>
</ul>
<i class="fas fa-chevron-down">
</i>
</li>
<li class="toctree-l1">
<a class="reference external" href="https://google.com">
Expand Down