Skip to content

Commit bcd3bd3

Browse files
RoyalIcingRoyalIcing
committed
Improve cheatsheet
1 parent 5f2fc8c commit bcd3bd3

File tree

3 files changed

+151
-55
lines changed

3 files changed

+151
-55
lines changed

‎apps/components_guide_web/lib/components_guide_web/templates/accessibility_first/roles-cheatsheet.html.eex

Lines changed: 136 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<%
22
theme = %Theme{text_color: "blue"}
3+
[h2, h3] = Theme.headings(theme)
34
%>
45
<header class="text-white" style="background: <%= header_background %>;">
56
<section class="container px-6 pt-6 pb-6">
@@ -12,21 +13,24 @@
1213
</section>
1314
</header>
1415

15-
<div class="flex items-stretch bg-white">
16-
<nav class="w-64 p-4 pl-6 text-xl bg-gray-100 border-r border-gray-200">
17-
<ul class="fixed list-none leading-loose">
16+
<div class="text-base lg:text-xl flex items-stretch bg-gray-900">
17+
<nav class="w-48 lg:w-64 bg-gray-100 border-r border-gray-200">
18+
<ul class="sticky top-0 p-4 pl-6 list-none leading-loose">
1819
<li><%= link "Link", to: "#link" %>
1920
<li><%= link "Button", to: "#button" %>
2021
<li><%= link "Checkbox", to: "#checkbox" %>
22+
<li><%= link "Textbox", to: "#textbox" %>
2123
<li><%= link "Radio", to: "#radio" %>
22-
<li><%= link "Tab", to: "#tab" %>
24+
<li><%= link "Tabs", to: "#tabs" %>
2325
<li><%= link("List of roles 🔗", to: "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques") %>
26+
<li><%= link("Queries 🔗", to: "https://testing-library.com/docs/dom-testing-library/api-queries") %>
27+
<li><%= link("Matchers 🔗", to: "https://github.com/testing-library/jest-dom") %>
2428
</ul>
2529
</nav>
26-
<div class="ml-64">
27-
<section aria-label="Roles Cheatsheet" class="px-4 pt-8 pb-16 text-xl">
30+
<div class="mx-auto flex-shrink">
31+
<section aria-label="Roles Cheatsheet" class="max-w-xl lg:max-w-3xl px-4 pt-8 pb-16 text-white">
2832
<article>
29-
<%= theme |> Theme.h2("Link", id: "link") %>
33+
<%= h2.("Link", id: "link") %>
3034

3135
<%=
3236
"""
@@ -41,103 +45,183 @@
4145
</article>
4246

4347
<article>
44-
<h2 id="button" class="mb-2 text-4xl leading-normal text-teal-800">Button</h2>
48+
<%= h2.("Button", id: "button") %>
4549
<%=
46-
"""
47-
getByRole('button', { name: 'Click me' });
48-
""" |> code_block(:js)
50+
[
51+
"""
52+
const saveButton = getByRole('button', { name: 'Save' });
53+
""" |> code_block(:js),
54+
"<button>Save</button>" |> code_block(:html)
55+
]
4956
%>
57+
58+
<%= h3.("It is focused", []) %>
5059
<%=
51-
"""
52-
<button>Click me</button>
53-
""" |> code_block(:html)
60+
[
61+
"""
62+
expect(saveButton).toHaveFocus();
63+
""" |> code_block(:js)
64+
]
5465
%>
55-
</article>
5666

57-
<article>
58-
<h2 id="checkbox" class="mb-2 text-4xl leading-normal text-teal-800">Checkbox</h2>
67+
<%= h3.("It changes text to ‘Saving’", []) %>
5968
<%=
60-
"""
61-
getByRole('checkbox', { name: 'Remember me' });
62-
63-
const rememberMe = getByRole('checkbox', { name: 'Remember me' });
64-
expect(rememberMe).toBeChecked();
65-
""" |> code_block(:js)
69+
[
70+
"expect(saveButton).toHaveTextContent('Saving');" |> code_block(:js),
71+
"<button>Saving</button>" |> code_block(:html)
72+
]
6673
%>
6774

68-
<h3>HTML example</h3>
75+
<%= h3.("When save is clicked", []) %>
6976
<%=
70-
"""
71-
<label><input type="checkbox">Remember me</label>
72-
""" |> code_block(:html)
77+
[
78+
"""
79+
beforeEach(() => {
80+
userEvent.click(saveButton);
81+
});
82+
""" |> code_block(:js)
83+
]
7384
%>
7485
</article>
7586

7687
<article>
77-
<%= theme |> Theme.h2("Textbox", id: "textbox") %>
88+
<%= h2.("Checkbox", id: "checkbox") %>
7889

79-
<h3>It has Bio text field</h3>
8090
<%=
81-
"""
82-
getByLabelText('Bio');
83-
""" |> code_block(:js)
91+
[
92+
"""
93+
const rememberMe = getByRole('checkbox', { name: 'Remember me' });
94+
""" |> code_block(:js),
95+
"""
96+
<label>
97+
<input type="checkbox">
98+
Remember me
99+
</label>
100+
""" |> code_block(:html)
101+
]
84102
%>
103+
104+
<%= h3.("It is checked", []) %>
85105
<%=
86-
"""
87-
<label>Bio<input></label>
88-
""" |> code_block(:html)
106+
[
107+
"""
108+
expect(rememberMe).toBeChecked();
109+
""" |> code_block(:js),
110+
"""
111+
<label><input type="checkbox">Remember me</label>
112+
""" |> code_block(:html)
113+
]
89114
%>
115+
</article>
90116

91-
<h3>It has Bio text field</h3>
117+
<article>
118+
<%= h2.("Textbox", id: "textbox") %>
119+
120+
<%= h3.("It has Bio text field", []) %>
92121
<%=
93122
"""
94123
getByLabelText('Bio');
95124
""" |> code_block(:js)
96125
%>
97126
<%=
98127
"""
99-
<label>Bio<textarea></textarea></label>
128+
<label>
129+
Bio
130+
<input>
131+
</label>
100132
""" |> code_block(:html)
101133
%>
102134

103-
<h3>It is valid</h3>
135+
<%= h3.("It has Bio text field", []) %>
136+
<%=
137+
[
138+
"""
139+
getByLabelText('Bio');
140+
""" |> code_block(:js),
141+
"""
142+
<label>
143+
Bio
144+
<textarea></textarea>
145+
</label>
146+
""" |> code_block(:html)
147+
]
148+
%>
149+
150+
<%= h3.("It is valid", []) %>
104151
<%=
105152
"""
106153
expect(getByLabelText('Bio')).toBeValid();
107154
""" |> code_block(:js)
108155
%>
109156
<%=
110157
"""
111-
<label>Bio<textarea aria-invalid=false></textarea></label>
158+
<label>
159+
Bio
160+
<input aria-invalid="false">
161+
</label>
112162
""" |> code_block(:html)
113163
%>
114164

115-
<h3>It is invalid</h3>
165+
<%= h3.("It is invalid", []) %>
116166
<%=
117167
"""
118168
expect(getByLabelText('Bio')).toBeInvalid();
119169
""" |> code_block(:js)
120170
%>
121171
<%=
122172
"""
123-
<label>Bio<textarea aria-invalid=true></textarea></label>
173+
<label>
174+
Bio
175+
<input aria-invalid="true">
176+
</label>
124177
""" |> code_block(:html)
125178
%>
179+
180+
<%= h3.("When ‘Painter’ is typed", []) %>
181+
<%=
182+
[
183+
"""
184+
beforeEach(() => {
185+
userEvent.type(getByLabelText('Bio'), 'Painter');
186+
});
187+
""" |> code_block(:js)
188+
]
189+
%>
126190
</article>
127191

128192
<article>
129-
<h2 id="radio" class="mb-2 text-4xl leading-normal text-teal-800">Radio</h2>
130-
<%=
131-
"""
132-
getByRole('radio', { name: 'Blue' });
133-
""" |> code_block(:js)
193+
<%= h2.("Radio", id: "radio") %>
194+
195+
<%= h3.("It is checked", []) %>
196+
<%=
197+
[
198+
"""
199+
expect(getByRole('radio', { name: 'Blue' })).toBeChecked();
200+
""" |> code_block(:js),
201+
"""
202+
<label><input type="radio">Purple</label>
203+
<label><input type="radio" checked>Blue</label>
204+
<label><input type="radio">Orange</label>
205+
""" |> code_block(:html)
206+
]
134207
%>
135-
<%=
136-
"""
137-
<label><input type="radio">Purple</label>
138-
<label><input type="radio">Blue</label>
139-
<label><input type="radio">Orange</label>
140-
""" |> code_block(:html)
208+
</article>
209+
210+
<article>
211+
<%= h2.("Tabs", id: "tabs") %>
212+
213+
<%= h3.("It is checked", []) %>
214+
<%=
215+
[
216+
"""
217+
expect(getByRole('radio', { name: 'Blue' })).toBeChecked();
218+
""" |> code_block(:js),
219+
"""
220+
<label><input type="radio">Purple</label>
221+
<label><input type="radio" checked>Blue</label>
222+
<label><input type="radio">Orange</label>
223+
""" |> code_block(:html)
224+
]
141225
%>
142226
</article>
143227

‎apps/components_guide_web/lib/components_guide_web/views/accessibility_first_view.ex

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,20 @@ defmodule ComponentsGuideWeb.AccessibilityFirstView do
3737
defstruct text_color: "blue"
3838

3939
def h2(theme = %Theme{}, content, attrs) do
40-
class = "mb-2 text-4xl leading-normal text-#{theme.text_color}-800"
41-
content_tag(:h2, content, [ {:class, class} | attrs ])
40+
class = "mt-8 mb-2 text-4xl leading-normal text-#{theme.text_color}-300"
41+
content_tag(:h2, content, [{:class, class} | attrs])
42+
end
43+
44+
def h3(theme = %Theme{}, content, attrs) do
45+
class = "mt-4 mb-2 text-2xl leading-normal text-#{theme.text_color}-300"
46+
content_tag(:h3, content, [{:class, class} | attrs])
47+
end
48+
49+
def headings(theme = %Theme{}) do
50+
[
51+
fn content, attrs -> h2(theme, content, attrs) end,
52+
fn content, attrs -> h3(theme, content, attrs) end
53+
]
4254
end
4355
end
4456
end

‎apps/components_guide_web/lib/components_guide_web/views/layout_view.ex

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ defmodule ComponentsGuideWeb.LayoutView do
2929
end
3030

3131
~E"""
32-
<li><a href="<%= @to %>" aria-current="<%= current %>" class="flex h-full items-center px-4 py-3 md:py-4 font-bold border-b-4 border-transparent hover:bg-gray-800 hover:border-red-400"><%= @title %></a>
32+
<li><a href="<%= @to %>" aria-current="<%= current %>" class="flex h-full px-4 py-2 md:py-4 font-bold border-b-4 border-transparent hover:bg-gray-800 hover:border-red-400"><%= @title %></a>
3333
"""
3434
end
3535
end

0 commit comments

Comments
 (0)