Skip to content

Commit 7431bbc

Browse files
sarahboycesarahboyce
committed
Made the language and documentation version switcher accessible by keyboard.
1 parent e81dd71 commit 7431bbc

File tree

2 files changed

+96
-70
lines changed

2 files changed

+96
-70
lines changed

‎djangoproject/scss/_style.scss‎

Lines changed: 86 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -2286,88 +2286,122 @@ h2+.list-link-soup {
22862286
z-index: 1;
22872287
pointer-events: none;
22882288

2289-
list-style: none;
2290-
2291-
.icon {
2292-
margin-right: 4px;
2293-
}
2289+
display: flex;
2290+
flex-direction: column;
2291+
align-items: flex-end;
2292+
gap: 0.6em;
22942293

22952294
ul {
22962295
text-align: right;
2296+
margin: 0;
2297+
padding: 0;
2298+
list-style: none;
2299+
display: inline-flex;
2300+
align-items: center;
2301+
justify-content: flex-end;
2302+
gap: 3px;
2303+
@include sans-serif;
2304+
font-size: 12px;
22972305
}
22982306
}
22992307

2300-
#doc-versions,
2301-
#doc-languages,
2302-
#faq-link,
2303-
#backtotop-link {
2304-
margin: 0;
2305-
padding-top: 0.25em;
2306-
padding-bottom: 0.25em;
2308+
#faq-link li,
2309+
#backtotop-link li {
2310+
margin: 0 3px;
2311+
background: var(--body-bg);
2312+
border: 1px solid var(--hairline-color);
2313+
border-radius: 4px;
2314+
cursor: pointer;
2315+
pointer-events: auto;
23072316

2308-
&.open {
2309-
li {
2310-
display: inline-block;
2317+
a {
2318+
display: inline-block;
2319+
padding: 8px 15px;
2320+
border-radius: 4px;
2321+
font-weight: 700;
2322+
color: var(--primary);
2323+
text-decoration: none;
2324+
}
23112325

2312-
&.current {
2313-
border: 1px solid $green-light;
2314-
}
2326+
&:hover,
2327+
&:focus-within {
2328+
border-color: $green-light;
2329+
a {
2330+
color: var(--secondary);
23152331
}
23162332
}
2333+
}
2334+
2335+
#doc-languages,
2336+
#doc-versions {
2337+
position: relative;
2338+
pointer-events: auto;
23172339

23182340
li {
2319-
display: none;
2341+
display: inline-block;
23202342
margin: 0 3px;
2321-
@include sans-serif;
2322-
color: var(--body-fg);
2323-
@include font-size(12);
2324-
pointer-events: auto;
2343+
background: var(--body-bg);
2344+
border: 1px solid var(--hairline-color);
2345+
border-radius: 4px;
2346+
padding: 0;
2347+
cursor: pointer;
2348+
position: relative;
23252349

2326-
&.current {
2350+
> a,
2351+
> span {
23272352
display: inline-block;
2328-
background: var(--body-bg);
23292353
padding: 8px 15px;
2330-
border: 1px solid var(--hairline-color);
23312354
border-radius: 4px;
2332-
cursor: pointer;
2355+
color: var(--primary);
2356+
text-decoration: none;
2357+
font-weight: 700;
23332358
}
23342359

2335-
&.current-link {
2336-
display: inline-block;
2360+
&.current {
2361+
> a,
2362+
> span {
2363+
color: var(--body-fg);
2364+
font-weight: normal;
2365+
}
2366+
2367+
span strong {
2368+
font-weight: 700;
2369+
}
2370+
2371+
&::after {
2372+
content: "";
2373+
position: absolute;
2374+
top: 0;
2375+
left: -8px;
2376+
width: 8px;
2377+
height: 100%;
2378+
}
23372379
}
23382380

2339-
a {
2340-
display: inline-block;
2341-
background: var(--body-bg);
2342-
color: var(--primary);
2343-
text-decoration: none;
2344-
font-weight: 700;
2345-
padding: 8px 15px;
2346-
border: 1px solid var(--hairline-color);
2347-
border-radius: 4px;
2381+
&:hover,
2382+
&:focus-within {
2383+
border-color: $green-light;
23482384

2349-
&:hover {
2385+
> a {
23502386
color: var(--secondary);
2351-
border: 1px solid $green-light;
23522387
}
23532388
}
23542389

2355-
a.icon-chevron-up-align {
2356-
// Should be removed when icon-chevron-up image have the same black space on both sides.
2357-
padding-right: 11px;
2390+
&.other {
2391+
display: none;
2392+
position: absolute;
2393+
right: 100%;
2394+
top: 0;
2395+
margin-right: 2px;
2396+
white-space: nowrap;
2397+
z-index: 2;
23582398
}
23592399
}
23602400

2361-
&:hover {
2362-
pointer-events: auto;
2363-
padding: 2em 0;
2364-
margin: -1.75em 0;
2365-
2366-
li {
2367-
display: inline-block;
2368-
}
2401+
&:hover li.other,
2402+
&:focus-within li.other {
2403+
display: inline-block;
23692404
}
2370-
23712405
}
23722406

23732407
#dev-warning,

‎docs/templates/docs/doc.html‎

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -56,12 +56,15 @@
5656
<div id="version-switcher">
5757
<ul id="faq-link">
5858
<li class="current-link">
59-
<a href="{% url 'document-detail' lang=lang version=version url='faq/help' host 'docs' %}">
59+
<a tabindex="0" href="{% url 'document-detail' lang=lang version=version url='faq/help' host 'docs' %}">
6060
<span>{% trans "Getting Help" %}</span>
6161
</a>
6262
</li>
6363
</ul>
6464
<ul id="doc-languages" class="language-switcher doc-switcher">
65+
<li class="current" tabindex="0">
66+
<span>{% trans "Language:" %} <strong>{{ lang }}</strong></span>
67+
</li>
6568
{% for available_lang in available_languages %}
6669
{% if lang != available_lang %}
6770
<li class="other">
@@ -74,14 +77,15 @@
7477
</li>
7578
{% endif %}
7679
{% endfor %}
77-
<li class="current"
78-
title="{% blocktrans %}Click on the links on the left to switch to another language.{% endblocktrans %}">
79-
<span>{% trans "Language:" %} <strong>{{ lang }}</strong></span>
80-
</li>
8180
</ul>
8281

8382
{% get_all_doc_versions docurl as other_versions %}
8483
<ul id="doc-versions" class="version-switcher doc-switcher">
84+
<li class="current {% if release.is_dev %}dev{% endif %}" tabindex="0">
85+
<span>{% trans "Documentation version:" %}
86+
<strong>{% if release.is_dev %}development{% else %}{{ version }}{% endif %}</strong>
87+
</span>
88+
</li>
8589
{% for other_version in other_versions %}
8690
{% if version != other_version %}
8791
<li class="other">
@@ -94,22 +98,10 @@
9498
</li>
9599
{% endif %}
96100
{% endfor %}
97-
<li class="current{% if release.is_dev %} dev{% endif %}"
98-
title="{% if release.is_dev %}{% blocktrans trimmed %}
99-
This document is for Django's development version, which can be significantly different from previous releases.
100-
{% endblocktrans %}{% else %}{% blocktrans trimmed %}
101-
This document describes Django {{ version }}.
102-
{% endblocktrans %}{% endif %} {% blocktrans trimmed %}
103-
Click on the links on the left to see other versions.
104-
{% endblocktrans %}">
105-
<span>{% trans "Documentation version:" %}
106-
<strong>{% if release.is_dev %}development{% else %}{{ version }}{% endif %}</strong>
107-
</span>
108-
</li>
109101
</ul>
110102
<ul id="backtotop-link">
111103
<li class="current-link">
112-
<a href="#top" aria-label="Back to top" class="icon-chevron-up-align"><i class="icon icon-chevron-up"></i></a>
104+
<a tabindex="0" href="#top" aria-label="Back to top" class="icon-chevron-up-align"><i class="icon icon-chevron-up"></i></a>
113105
</li>
114106
</ul>
115107
</div>

0 commit comments

Comments
 (0)