Skip to content

Commit f56a348

Browse files
SamBarkerSamBarker
authored
Merge pull request #100 from gracegrimwood/accessibility-fixes
Accessibility Fixes
2 parents 27c8d49 + fcf42a6 commit f56a348

File tree

17 files changed

+126
-81
lines changed

17 files changed

+126
-81
lines changed

‎_includes/footer.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<footer class="pt-4 pt-md-5 pb-0 mt-md-auto mt-5 bg-body-tertiary">
1+
<footer class="pt-4 pt-md-5 pb-0 mt-md-auto mt-5 bg-body-tertiary" role="contentinfo" aria-label="Site navigation, contact, and copyright information">
22
<div class="container py-3 py-md-5 px-4 px-md-3 text-body-secondary">
33
<div class="row krx-footer-links justify-content-between">
44
<div class="col-lg-4 mb-3">
@@ -29,14 +29,14 @@
2929
</div>
3030
<div class="w-100 my-2">
3131
<a class="icon-link me-1" href="https://github.com/kroxylicious/kroxylicious">
32-
<img class="img-fluid krx-icon" src="{{ '/assets/theme/images/github-mark.svg' | absolute_url }}"/>
32+
<img class="img-fluid krx-icon" src="{{ '/assets/theme/images/github-mark.svg' | absolute_url }}" alt="GitHub logo"/>
3333
</a>
3434
</div>
3535
</li>
3636
</ul>
3737
</div>
3838
<div class="col-6 col-lg-2 offset-lg-2 mb-3 text-lg-end">
39-
<h5>Links</h5>
39+
<h1 class="fs-5">Links</h1>
4040
<ul class="list-unstyled">
4141
<li class="mb-2">
4242
<a class="text-body link-underline-dark link-underline-opacity-0 link-underline-opacity-10-hover" href="{{ '/' | absolute_url }}">
@@ -61,7 +61,7 @@ <h5>Links</h5>
6161
</ul>
6262
</div>
6363
<div class="col-6 col-lg-2 mb-3 text-lg-end">
64-
<h5>Projects</h5>
64+
<h1 class="fs-5">Projects</h1>
6565
<ul class="list-unstyled">
6666
<li class="mb-2">
6767
<a class="text-body link-underline-dark link-underline-opacity-0 link-underline-opacity-10-hover" href="https://github.com/kroxylicious/kroxylicious">
@@ -76,7 +76,7 @@ <h5>Projects</h5>
7676
</ul>
7777
</div>
7878
<div class="col-6 col-lg-2 mb-3 text-lg-end">
79-
<h5>Community</h5>
79+
<h1 class="fs-5">Community</h1>
8080
<ul class="list-unstyled">
8181
<li class="mb-2">
8282
<a class="text-body link-underline-dark link-underline-opacity-0 link-underline-opacity-10-hover" href="https://kroxylicious.slack.com" target="_blank" rel="noopener">

‎_includes/nav.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
99
<i class="bi bi-three-dots" aria-hidden="true"></i>
1010
</button>
11-
<div class="offcanvas-lg offcanvas-end flex-grow-1" id="navbarContent" aria-labelledby="navbarContentOffcanvasLabel">
11+
<div class="offcanvas-lg offcanvas-end flex-grow-1" id="navbarContent">
1212
<div class="offcanvas-header px-4 pb-0">
1313
<a class="navbar-brand p-0 me-0 me-lg-2" href="{{ '/' | absolute_url }}" aria-label="Kroxylicious">
1414
<img src="{{ '/assets/theme/images//kroxylicious_logo_rgb_hori_reverse_bright.svg' | absolute_url }}"

‎_includes/nested-card-tabbed/tab.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<button class="nav-link krx-card-nav-link {% if include.is_active_tab %}active{% endif %}"
33
id="{{ include.htmlid }}" data-bs-toggle="tab"
44
data-bs-target="#{{ include.htmlid }}-tab-pane" type="button"
5-
role="tab" aria-controls="{{ include.htmlid }}-tab-pane"
5+
aria-controls="{{ include.htmlid }}-tab-pane"
66
{% if include.is_active_tab %}aria-current="true"{% endif %}
77
aria-selected="{{ include.is_active_tab }}">
88
{{ include.tab_title | markdownify }}

‎_includes/redhat-footer.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<div class="license">
44
&copy; Kroxylicious authors {{ 'now' | date: "%Y" }} | Kroxylicious licensed <a href="https://github.com/kroxylicious/kroxylicious/blob/main/LICENSE" target="_blank" rel="license noopener">Apache-2.0</a> | Documentation <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="license noopener">CC-BY-4.0</a> | Apache and Apache Kafka are trademarks of the <a href="https://www.apache.org/" target="_blank" rel="license noopener">Apache Software Foundation</a>.
55
</div>
6-
<div class="redhat-logo"><a href="https://www.redhat.com/" target="_blank"><img src="{{site.baseurl}}/assets/theme/images/Logo-Red_Hat-Sponsored_By-A-Reverse-RGB.svg"></a>
6+
<div class="redhat-logo"><a href="https://www.redhat.com/" target="_blank"><img src="{{site.baseurl}}/assets/theme/images/Logo-Red_Hat-Sponsored_By-A-Reverse-RGB.svg" alt="Sponsored By Red Hat logo"></a>
77
</div>
88
</div>
99
</div>

‎_layouts/blog.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
layout: default
33
---
44
<div class="row align-items-start justify-content-center my-5">
5-
<div class="col-lg-3 mb-5">
5+
<div class="col-lg-3 mb-5" role="complementary" aria-labelledby="page-title">
66
<div class="card px-2 mx-2">
77
<div class="card-body">
8-
<h3 class="card-title">{{ page.title }}</h3>
8+
<h1 class="fs-3" class="card-title" id="page-title">{{ page.title }}</h1>
99
<div class="container g-0 mt-4">
1010
<p class="card-text">
1111
{{ content }}
@@ -14,7 +14,7 @@ <h3 class="card-title">{{ page.title }}</h3>
1414
</div>
1515
</div>
1616
</div>
17-
<div class="col-lg-6">
17+
<div class="col-lg-6" role="main">
1818
{% if site.paginate %}
1919
{% assign posts = paginator.posts %}
2020
{% else %}
@@ -35,13 +35,13 @@ <h3 class="card-title">{{ page.title }}</h3>
3535
<div class="col-md align-self-center">
3636
{% endif %}
3737
<div class="card-body mx-3 my-2">
38-
<h4 class="card-title">
38+
<h2 class="card-title fs-4">
3939
<a class="page-link" href="{{ post.url | absolute_url }}">
4040
{{ post.title | escape }}
4141
</a>
42-
</h4>
42+
</h2>
4343
<p class="card-text">{{ post.excerpt | markdownify }}</p>
44-
<p class="card-text text-end"><small class="text-primary">{{ post.date | date: date_format }}</small></p>
44+
<p class="card-text text-end"><small class="text-secondary">{{ post.date | date: date_format }}</small></p>
4545
</div>
4646
</div>
4747
</div>
@@ -51,7 +51,7 @@ <h4 class="card-title">
5151
</div>
5252
</div>
5353
{% if site.paginate %}
54-
<nav aria-label="Blog post list navigation">
54+
<nav role="navigation" aria-label="Blog post list navigation">
5555
<ul class="pagination">
5656
{%- if paginator.previous_page %}
5757
<li class="page-item">

‎_layouts/docs.html‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,23 @@
55
<div class="row justify-content-center gx-0">
66
<div class="col-lg-3">
77
<div class="card shadow my-lg-5 ms-lg-5 me-1">
8-
<div class="card-body mx-2">
9-
<h3 class="card-title">
8+
<div class="card-body mx-2" role="navigation" aria-label="{{ page.title }} page navigation">
9+
<h1 class="card-title fs-3">
1010
{{ page.title }}
11-
</h3>
11+
</h1>
1212
<div class="card-text g-0">
1313
<p><em>This documentation is for a stable release version of Kroxylicious. For the documentation from the latest development version of Kroxylicious, <a href="{{ '/kroxylicious' | relative_url }}">click here</a>.</small></em></p>
1414
{{ page.document | tocify_asciidoc }}
1515
</div>
1616
</div>
1717
</div>
1818
</div>
19-
<div class="col-lg-9">
19+
<div class="col-lg-9" role="main">
2020
<div class="card shadow my-lg-5 me-lg-5 ms-1">
2121
<div class="card-body mx-2">
2222
<div class="row g-0">
2323
<div class="col-auto">
24-
<div class="card-text m-2">
24+
<div class="card-text ms-3 m-2">
2525
{% if page.version_warning %}
2626
{% include bs-alert.html type="warning" content=page.version_warning %}
2727
{% endif %}
@@ -33,3 +33,16 @@ <h3 class="card-title">
3333
</div>
3434
</div>
3535
</div>
36+
<!-- The following script fixes an accessibility issue with the sectanchors injected by AsciiDoc not containing any content. -->
37+
<!-- The script adds a span which the anchor CSS applies to, then moves the header text inside the anchor element. -->
38+
<script>
39+
document.addEventListener("DOMContentLoaded", function () {
40+
document.querySelectorAll("a.anchor").forEach((anchorElem) => {
41+
var anchorSpan = document.createElement('span');
42+
anchorSpan.setAttribute("class", "anchor-icon");
43+
anchorElem.appendChild(anchorSpan);
44+
anchorElem.appendChild(anchorElem.nextSibling);
45+
anchorElem.setAttribute("class", anchorElem.getAttribute("class") + " text-decoration-none text-reset")
46+
})
47+
})
48+
</script>

‎_layouts/index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@
44

55
<!-- Hero -->
66

7-
<div class="krx-hero">
7+
<div class="krx-hero" role="complementary" aria-labelledby="krx-hero-title">
88
<div class="container col-xxl-8 px-4 py-5">
99
<div class="row flex-lg-row-reverse align-items-center g-5 py-5">
1010
<div class="col-10 col-sm-8 col-lg-6">
1111
<img src="{{ '/assets/theme/images/kroxylicious_logo_rgb_no_text.svg' | absolute_url}}" class="d-block mx-lg-auto img-fluid" alt="Kroxylicious Mascot" width="700" height="500" loading="lazy">
1212
</div>
1313
<div class="col-lg-6">
14-
<h1 class="fw-bold text-body-emphasis lh-1 mb-3">Kroxylicious, the snappy open source proxy for Apache Kafka<sup>&#174;</sup></h1>
14+
<h1 class="fw-bold text-body-emphasis lh-1 mb-3" id="krx-hero-title">Kroxylicious, the snappy open source proxy for Apache Kafka<sup>&#174;</sup></h1>
1515
<p class="lead">Topic encryption, policy-enforcement, multi-tenancy, audit and much more.</p>
1616
<div class="d-grid gap-2 d-md-flex justify-content-md-start">
1717
<a href="{{site.baseurl}}/overview/" alt="What Kroxylicious is and how does it work?" type="button" class="btn btn-light btn-lg px-4 gap-3">What is it?</a>
@@ -24,7 +24,7 @@ <h1 class="fw-bold text-body-emphasis lh-1 mb-3">Kroxylicious, the snappy open s
2424

2525
<!-- Hero -->
2626

27-
<div class="row justify-content-center">
27+
<div class="row justify-content-center" role="main">
2828
<div class="col-11 col-lg-8 gx-5 gy-5 m-lg-5">
2929
<div class="row g-0">
3030
<div class="col-auto">

‎_layouts/overview.html‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,19 @@
77
<div class="row g-0">
88
<div class="col-auto">
99
<div class="card-body">
10-
<div class="card-text m-2">
10+
<div class="card-text m-2" role="main" aria-label="Overview of Kroxylicious">
1111
{{ content | markdownify | inject_anchors }}
1212
</div>
1313
</div>
1414
</div>
1515
</div>
1616
</div>
1717
</div>
18+
19+
<script>
20+
document.addEventListener("DOMContentLoaded", function () {
21+
document.querySelectorAll("a.anchor").forEach((anchorElem) => {
22+
anchorElem.setAttribute("style", "display: none; visibility: hidden;");
23+
})
24+
})
25+
</script>

‎_layouts/quickstart.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
---
22
layout: default
33
---
4-
<div class="card gx-5 gy-5 m-lg-5">
4+
<div class="card gx-5 gy-5 m-lg-5" role="navigation" aria-label="Quickstart navigation">
55
<div class="card-header">
66
<div class="card-title display-6 mx-2 mt-3 mb-4"><i class="bi bi-stopwatch me-4"></i>Quick Start Guide</div>
77
<ul class="nav nav-tabs nav-justified fs-5 card-header-tabs" id="quickstart" role="tablist">
88
{% for quickstart in site.quickstarts %}
99
{% if quickstart.htmlid and quickstart.tab_title %}
1010
<li class="nav-item">
11-
<button class="nav-link {% if forloop.first %}active{% endif %}"
11+
<button class="nav-link krx-card-nav-link {% if forloop.first %}active{% endif %}"
1212
id="{{ quickstart.htmlid }}" data-bs-toggle="tab"
1313
data-bs-target="#{{ quickstart.htmlid }}-tab-pane" type="button"
1414
role="tab" aria-controls="{{ quickstart.htmlid }}-tab-pane"
@@ -20,7 +20,7 @@
2020
{% endfor %}
2121
</ul>
2222
</div>
23-
<div class="card-body tab-content p-4 p-lg-5" id="quickstartContent">
23+
<div class="card-body tab-content p-4 p-lg-5" id="quickstartContent" role="main" aria-labelledby="{{ quickstart.htmlid }}">
2424
{% for quickstart in site.quickstarts %}
2525
{% if quickstart.htmlid and quickstart.tab_title %}
2626
<div class="tab-pane fade show {% if forloop.first %}active{% endif %}"

‎_layouts/use-cases.html‎

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,34 @@
55

66
<div class="row justify-content-center">
77
<div class="col-11 col-lg-8 card shadow gx-5 gy-5 m-lg-5">
8-
<div class="card-body mx-2">
9-
<div class="card-title display-6 mt-3 mb-4">Use Cases</div>
8+
<div class="card-body mx-2" role="main" aria-labelledby="page-title">
9+
<div class="card-title display-6 mt-3 mb-4">
10+
<h1 id="page-title">Use Cases</h1>
11+
</div>
1012
<div class="row g-0">
1113
<div class="col-auto">
12-
{% for use_case in site.use_cases %}
13-
<div class="card-text">{{ use_case.content | toc_only }}</div>
14-
{% endfor %}
15-
{% for use_case in site.use_cases %}
16-
<div class="card-text">{{ use_case.content | markdownify | inject_anchors}}</div>
17-
{% endfor %}
14+
<div class="card-text">
15+
{% for use_case in site.use_cases %}
16+
<div id="{{ use_case.name | slugify }}-toc">{{ use_case.content | toc_only }}</div>
17+
{% endfor %}
18+
{% for use_case in site.use_cases %}
19+
<div id="{{ use_case.name | slugify }}-content">{{ use_case.content | markdownify | inject_anchors}}</div>
20+
{% endfor %}
21+
</div>
1822
</div>
1923
</div>
2024
</div>
2125
</div>
2226
</div>
2327

28+
<script>
29+
document.addEventListener("DOMContentLoaded", function () {
30+
document.querySelectorAll("#toc").forEach((tocElem) => {
31+
var parentID = tocElem.parentElement.getAttribute("id");
32+
tocElem.setAttribute("id", parentID + "-container");
33+
})
34+
document.querySelectorAll("a.anchor").forEach((anchorElem) => {
35+
anchorElem.setAttribute("style", "display: none; visibility: hidden;");
36+
})
37+
})
38+
</script>

0 commit comments

Comments
 (0)