Skip to content

Commit f7f2dec

Browse files
BrianMitchLBrianMitchL
committed
Accessibility improvements
1 parent 8ca5ac1 commit f7f2dec

File tree

6 files changed

+45
-29
lines changed

6 files changed

+45
-29
lines changed

‎src/includes/_logo.svg‎

Lines changed: 2 additions & 0 deletions
Loading

‎src/includes/base.js‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,24 @@
77
console.info('%c❤️', 'font-size: 5rem; color: red;');
88

99
window.onload = function () {
10-
document
11-
.querySelector('#ope-let-me-get-this-for-ya')
12-
.addEventListener('click', function () {
13-
const menu = document.querySelector('[data-menu-button]');
14-
const close = document.querySelector('[data-close-button]');
15-
const mobileMenu = document.querySelector('[data-mobile-menu]');
10+
const menuToggle = document.getElementById('ope-let-me-get-this-for-ya');
11+
menuToggle.addEventListener('click', function () {
12+
const menu = document.querySelector('[data-menu-button]');
13+
const close = document.querySelector('[data-close-button]');
14+
const mobileMenu = document.querySelector('[data-mobile-menu]');
1615

17-
menu.classList.toggle('block');
18-
menu.classList.toggle('hidden');
16+
menu.classList.toggle('block');
17+
menu.classList.toggle('hidden');
1918

20-
close.classList.toggle('hidden');
21-
close.classList.toggle('block');
19+
close.classList.toggle('hidden');
20+
close.classList.toggle('block');
2221

23-
mobileMenu.classList.toggle('hidden');
24-
mobileMenu.classList.toggle('block');
25-
});
22+
mobileMenu.classList.toggle('hidden');
23+
mobileMenu.classList.toggle('block');
24+
25+
const newExpandedState =
26+
menuToggle.getAttribute('aria-expanded') === 'false';
27+
menuToggle.setAttribute('aria-expanded', newExpandedState.toString());
28+
});
2629
};
2730
})();

‎src/includes/header.njk‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
fill="none"
1616
viewBox="0 0 24 24"
1717
stroke="currentColor"
18+
aria-label="menu"
1819
>
1920
<path
2021
stroke-linecap="round"
@@ -30,6 +31,7 @@
3031
fill="none"
3132
viewBox="0 0 24 24"
3233
stroke="currentColor"
34+
aria-label="close"
3335
>
3436
<path
3537
stroke-linecap="round"

‎src/index.njk‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ title: JavaScriptMN
7878
<div class="container mx-auto px-2 mb-10">
7979
<div class="x-h-screen flex justify-center items-center">
8080
<div class="w-full">
81-
<div class="mb-8">
81+
<section class="mb-8">
8282
<h2
8383
class="inline-block bg-black text-white text-2xl font-bold px-4 mb-2 transform -rotate-1"
8484
>
@@ -105,10 +105,10 @@ title: JavaScriptMN
105105
</address>
106106
</div>
107107
</div>
108-
</div>
108+
</section>
109109

110110
{# speaking #}
111-
<div class="mb-8">
111+
<section class="mb-8">
112112
<div class="flex justify-start items-center mb-2">
113113
<h2
114114
class="inline-block bg-black text-white text-2xl font-bold px-4 transform -rotate-1"
@@ -126,18 +126,18 @@ title: JavaScriptMN
126126
for more details.
127127
</p>
128128
</div>
129-
<div className="w-full sm:w-auto">
129+
<div class="w-full sm:w-auto">
130130
<a
131131
class="block text-xl font-semibold border-2 border-black p-4 hover:bg-jsmn-yellow transition-all duration-100"
132132
href="{{ '/speak/' | url }}"
133133
>Learn More</a
134134
>
135135
</div>
136136
</div>
137-
</div>
137+
</section>
138138

139139
{# promoted sponsors #}
140-
<div class="mb-8">
140+
<section class="mb-8">
141141
<div class="flex justify-between items-center mb-2">
142142
<h2
143143
class="inline-block bg-black text-white text-2xl font-bold px-4 transform -rotate-1"
@@ -178,7 +178,7 @@ title: JavaScriptMN
178178
{% endif %}
179179
{% endfor %}
180180
</div>
181-
</div>
181+
</section>
182182
</div>
183183
</div>
184184
</div>

‎src/sponsorship-opportunities.njk‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,10 @@ layout: base
2424
class="flex flex-wrap sm:flex-no-wrap space-x-0 sm:space-x-4 space-y-8 sm:space-y-0"
2525
>
2626
{# first option #}
27-
<div class="w-full sm:w-1/3">
27+
<section class="w-full sm:w-1/3">
2828
<div class="border-4 border-jsmn-yellow shadow-lg">
2929
<div class="px-2 text-center my-4">
30-
<p class="text-8xl">🥈</p>
30+
<p role="presentation" class="text-8xl">🥈</p>
3131
<h2 class="text-3xl">Silver</h2>
3232
<p class="text-xl">$250 / year</p>
3333
</div>
@@ -48,13 +48,13 @@ layout: base
4848
</div>
4949
</div>
5050
</div>
51-
</div>
51+
</section>
5252

5353
{# second option #}
54-
<div class="w-full sm:w-1/3">
54+
<section class="w-full sm:w-1/3">
5555
<div class="border-4 border-jsmn-yellow shadow-lg">
5656
<div class="px-2 text-center my-4">
57-
<p class="text-8xl">🥇</p>
57+
<p role="presentation" class="text-8xl">🥇</p>
5858
<h2 class="text-3xl">Gold</h2>
5959
<p class="text-xl">$1,000 / year</p>
6060
</div>
@@ -81,10 +81,10 @@ layout: base
8181
</div>
8282
</div>
8383
</div>
84-
</div>
84+
</section>
8585

8686
{# third option #}
87-
<div class="w-full sm:w-1/3">
87+
<setcion class="w-full sm:w-1/3">
8888
<div class="border-4 border-jsmn-yellow shadow-lg">
8989
<div class="relative flex justify-center">
9090
<div
@@ -95,7 +95,7 @@ layout: base
9595
</div>
9696
</div>
9797
<div class="px-2 text-center my-4">
98-
<p class="text-8xl transform duration-200 hover:-rotate-25">💎</p>
98+
<p role="presentation" class="text-8xl transform duration-200 hover:-rotate-25">💎</p>
9999
<h2 class="text-3xl">Diamond</h2>
100100
<p class="text-xl">$2,500 / year</p>
101101
</div>
@@ -124,6 +124,6 @@ layout: base
124124
</div>
125125
</div>
126126
</div>
127-
</div>
127+
</setcion>
128128
</div>
129129
</div>

‎tailwind.config.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -702,6 +702,15 @@ module.exports = {
702702
},
703703
},
704704
},
705+
typography: {
706+
default: {
707+
css: {
708+
'ol > li::before': {
709+
color: 'currentColor',
710+
},
711+
},
712+
},
713+
},
705714
},
706715
variants: {
707716
accessibility: ['responsive', 'focus'],

0 commit comments

Comments
 (0)