paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-10-24 00:23:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: Make tabbed sections accessible from keyboard.

Browse Source 
Part of #15948.
This commit is contained in:
Gittenburg
2020-07-29 12:54:39 +02:00
committed by Tim Abbott
parent ccaab2d471
commit 0706de2305
3 changed files with 12 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
static/js/portico/help.js
View File

@@ -16,6 +16,12 @@ function registerCodeSection($codeSection) {
$blocks.removeClass("active"); $blocks.removeClass("active");
$blocks.filter("[data-language=" + language + "]").addClass("active"); $blocks.filter("[data-language=" + language + "]").addClass("active");
}); });
$li.on("keydown", (e) => {
if (e.key === "Enter") {
e.target.click();
}
});
} }
function highlight_current_article() { function highlight_current_article() {

2
zerver/lib/markdown/tabbed_sections.py
View File

@@ -25,7 +25,7 @@ NAV_BAR_TEMPLATE = """
""".strip() """.strip()
NAV_LIST_ITEM_TEMPLATE = """ NAV_LIST_ITEM_TEMPLATE = """
<li data-language="{data_language}">{name}</li> <li data-language="{data_language}" tabindex="0">{name}</li>
""".strip() """.strip()
DIV_TAB_CONTENT_TEMPLATE = """ DIV_TAB_CONTENT_TEMPLATE = """

10
zerver/tests/test_templates.py
View File

@@ -38,8 +38,8 @@ header
<p> <p>
<div class="code-section has-tabs" markdown="1"> <div class="code-section has-tabs" markdown="1">
<ul class="nav"> <ul class="nav">
<li data-language="ios">iOS</li> <li data-language="ios" tabindex="0">iOS</li>
<li data-language="desktop-web">Desktop/Web</li> <li data-language="desktop-web" tabindex="0">Desktop/Web</li>
</ul> </ul>
<div class="blocks"> <div class="blocks">
<div data-language="ios" markdown="1"></p> <div data-language="ios" markdown="1"></p>
@@ -56,8 +56,8 @@ header
<p> <p>
<div class="code-section has-tabs" markdown="1"> <div class="code-section has-tabs" markdown="1">
<ul class="nav"> <ul class="nav">
<li data-language="desktop-web">Desktop/Web</li> <li data-language="desktop-web" tabindex="0">Desktop/Web</li>
<li data-language="android">Android</li> <li data-language="android" tabindex="0">Android</li>
</ul> </ul>
<div class="blocks"> <div class="blocks">
<div data-language="desktop-web" markdown="1"></p> <div data-language="desktop-web" markdown="1"></p>
@@ -74,7 +74,7 @@ header
<p> <p>
<div class="code-section no-tabs" markdown="1"> <div class="code-section no-tabs" markdown="1">
<ul class="nav"> <ul class="nav">
<li data-language="null_tab">None</li> <li data-language="null_tab" tabindex="0">None</li>
</ul> </ul>
<div class="blocks"> <div class="blocks">
<div data-language="null_tab" markdown="1"></p> <div data-language="null_tab" markdown="1"></p>