Skip to content

Commit 697357b

Browse files
RoyalIcingRoyalIcing
committed
Add more accessibility content
1 parent 27ac720 commit 697357b

File tree

9 files changed

+352
-89
lines changed

9 files changed

+352
-89
lines changed

‎apps/components_guide_web/lib/components_guide_web/controllers/accessibility_first_controller.ex

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ defmodule ComponentsGuideWeb.AccessibilityFirstController do
66
render(conn, "index.html")
77
end
88

9-
@spec show(Plug.Conn.t(), map) :: Plug.Conn.t()
109
def show(conn, %{"id" => "landmarks"}) do
1110
render(conn, "landmarks.html")
1211
end
@@ -19,6 +18,12 @@ defmodule ComponentsGuideWeb.AccessibilityFirstController do
1918
render(conn, "properties-cheatsheet.html")
2019
end
2120

21+
@articles ["navigation", "forms"]
22+
23+
def show(conn, %{"id" => article}) when article in @articles do
24+
render(conn, "index.html", article: article)
25+
end
26+
2227
def show(conn, _params) do
2328
raise Phoenix.Router.NoRouteError, conn: conn, router: ComponentsGuideWeb.Router
2429
end

‎apps/components_guide_web/lib/components_guide_web/templates/accessibility_first/_nav.html.eex

Lines changed: 8 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,9 @@
1-
<%
2-
topics = [
3-
"Landmarks",
4-
{"Widgets", "/accessibility-first/widgets-cheatsheet"},
5-
{"Properties", "/accessibility-first/properties-cheatsheet"},
6-
"Forms",
7-
"Tables",
8-
"ARIA",
9-
"Keyboard Navigation",
10-
"TDD",
11-
"BDD with Jest",
12-
"Integration Testing",
13-
"Atomic Design",
14-
]
15-
link_class = "inline-block mx-1 mb-2 px-4 py-2 text-white rounded shadow-xl"
16-
link_style = "background-color: rgba(255,255,255,0.1)"
17-
%>
18-
<nav class="py-2 text-xl text-center">
19-
<%= for topic <- topics do
20-
case topic do
21-
{text, url} ->
22-
link(text, to: url, class: link_class, style: link_style)
23-
text ->
24-
link(text, to: "#", class: link_class, style: link_style)
25-
end
26-
end %>
1+
<nav class="pt-6 pb-4">
2+
<ul class="list-none row font-bold" style="--link-padding: 0.75em">
3+
<li><%= link("Intro", to: '/accessibility-first') %>
4+
<li><%= link("Navigation", to: '/accessibility-first/navigation') %>
5+
<li><%= link("Content", to: '/accessibility-first/content') %>
6+
<li><%= link("Forms", to: '/accessibility-first/forms') %>
7+
<li><%= link("Properties", to: '/accessibility-first/properties-cheatsheet') %>
8+
</ul>
279
</nav>

‎apps/components_guide_web/lib/components_guide_web/templates/accessibility_first/forms.html.md

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
## Form
2+
3+
```html
4+
<form aria-labelledby=sign-up-heading>
5+
<h1 id=sign-up-heading>Sign Up</h1>
6+
…
7+
</form>
8+
```
9+
10+
```js
11+
getByRole('form', { name: 'Sign up' });
12+
```
13+
14+
## Button
15+
16+
```html
17+
<button>Save</button>
18+
```
19+
20+
```js
21+
getByRole('button', { name: 'Save' });
22+
```
23+
24+
### Disabled
25+
26+
```html
27+
<button disabled>Save</button>
28+
```
29+
30+
```js
31+
expect(getByRole('button', { name: 'Save' })).toBeDisabled();
32+
```
33+
34+
## Textbox
35+
36+
```html
37+
<label>Name <input type=text></label>
38+
```
39+
40+
```js
41+
getByRole('textbox', { name: 'Name' });
42+
```
43+
44+
### Multilined
45+
46+
```html
47+
<label>Bio <textarea></textarea></label>
48+
```
49+
50+
```js
51+
getByRole('textbox', { name: 'Bio' });
52+
```
53+
54+
### Specific types
55+
56+
```html
57+
<label>Email <input type=email></label>
58+
<label>Website <input type=url></label>
59+
<label>Phone <input type=tel></label>
60+
```
61+
62+
```js
63+
const emailTextbox = getByRole('textbox', { name: 'Email' });
64+
const websiteTextbox = getByRole('textbox', { name: 'Website' });
65+
const phoneTextbox = getByRole('textbox', { name: 'Phone' });
66+
```
67+
68+
### Expect value to match
69+
70+
```html
71+
<label>Bio <textarea>Some bio</textarea></label>
72+
```
73+
74+
```js
75+
expect(
76+
getByRole('textbox', { name: 'Bio' })
77+
).toHaveValue("Some bio");
78+
```
79+
80+
## Searchbox
81+
82+
```html
83+
<label>Search <input type=search></label>
84+
```
85+
86+
```js
87+
getByRole('searchbox', { name: 'Search' });
88+
```
89+
90+
## Checkbox
91+
92+
```html
93+
<label><input type=checkbox> Receive email alerts</label>
94+
```
95+
96+
```js
97+
getByRole('checkbox', { name: 'Receive email alerts' });
98+
```
99+
100+
### Expect to be checked
101+
102+
```html
103+
<label><input type=checkbox checked> Receive email alerts</label>
104+
```
105+
106+
```js
107+
expect(
108+
getByRole('checkbox', { name: 'Receive email alerts' })
109+
).toBeChecked();
110+
```
111+
112+
113+
## Radio
114+
115+
```html
116+
<fieldset role=radiogroup>
117+
<legend>Favorite color</legend>
118+
<label><input type=radio name=fave-color value=green> Green</label>
119+
<label><input type=radio name=fave-color value=red checked> Red</label>
120+
<label><input type=radio name=fave-color value=yellow> Yellow</label>
121+
<label><input type=radio name=fave-color value=blue> Blue</label>
122+
</fieldset>
123+
```
124+
125+
```js
126+
getByRole('radiogroup', { name: 'Favorite color' });
127+
```
128+
129+
```js
130+
expect(getByRole('radio', { name: 'Red' })).toBeChecked();
131+
```
132+
133+
```js
134+
expect(
135+
getByRole('radiogroup', { name: 'Favorite color' })
136+
).toHaveFormValues({ 'fave-color': 'red' });
137+
```

‎apps/components_guide_web/lib/components_guide_web/templates/accessibility_first/index-old.html.eex

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<div class="text-white" style="<%= header_styles() %>">
2+
<header class="mx-auto max-w-4xl">
3+
<h1 class="pt-8 row space-x-4 text-4xl text-center font-bold leading-tight text-shadow">
4+
<div class="row">
5+
<span class="mr-2 text-4xl">💁🏼‍♀️🥇</span>
6+
</div>
7+
<span><%= "Accessibility-First Development" %></span>
8+
</h1>
9+
<nav class="pt-6 pb-4">
10+
<ul class="list-none row font-bold" style="--link-padding: 0.75em">
11+
<li><%= link("Landmarks", to: '/accessibility-first/widgets-cheatsheet') %>
12+
<li><%= link("Widgets", to: '/accessibility-first/widgets-cheatsheet') %>
13+
<li><%= link("Properties", to: '/accessibility-first/properties-cheatsheet') %>
14+
<li><%= link("Forms", to: '/accessibility-first/properties-cheatsheet') %>
15+
<li><%= link("Keyboard Navigation", to: '/accessibility-first/properties-cheatsheet') %>
16+
</ul>
17+
</nav>
18+
</header>
19+
</div>
20+
21+
<header class="text-white" style="background: <%= header_background() %>;">
22+
<div class="container px-6 pt-12 pb-12">
23+
<h1 class="mx-auto max-w-4xl text-5xl text-center font-bold leading-tight text-shadow">
24+
<%= "🥇 Accessibility-First Development" %>
25+
</h1>
26+
<p class="my-8 mx-auto max-w-3xl text-4xl text-center leading-snug italic text-shadow">
27+
<%#= "Write simpler, more robust tests using accessibility affordances." %>
28+
<%= "Write simpler, more robust tests via user-friendly accessibility affordances." %>
29+
</p>
30+
<%= render @view_module, "_nav.html" %>
31+
</div>
32+
</header>
33+
34+
<div class="bg-white">
35+
<%= section "Topics", class: "container pt-8 pb-16 text-2xl" do %>
36+
<%= topic_article(title: "Landmarks", link: Routes.accessibility_first_path(@conn, :show, "landmarks")) do %>
37+
<ul>
38+
<li><%= link("Orienting web visitors using landmarks", to: "#") %>
39+
</ul>
40+
<p>Define what your elements are using a clear standard. Let your users quickly jump around the key parts of your page (better UX), and leverage those in your tests (better DX).</p>
41+
<% end %>
42+
<%= topic_article(title: "Widgets, Attributes & States", link: Routes.accessibility_first_path(@conn, :show, "properties-cheatsheet")) do %>
43+
<p>Learn the standards for interactive widgets usable by touch, mouse, and keyboard. Let users know which page is current or which sub-control is selected.</p>
44+
<% end %>
45+
<%= topic_article(title: "BDD with Jest & React Testing Library") do %>
46+
<p>Learn a consistent pattern to write your component tests in Jest. Use @testing-library to find elements in a realistic way. Describe your contexts and scenarios with plain language.</p>
47+
<% end %>
48+
<%= topic_article(title: "Atomic Design") do %>
49+
<p>Organize your components into distict folders. Break them up at the right level, then compose them. Test them differently. Incorporate ARIA roles into the atomic design approach.</p>
50+
<% end %>
51+
<% end %>
52+
</div>

‎apps/components_guide_web/lib/components_guide_web/templates/accessibility_first/index.html.eex

Lines changed: 80 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,90 @@
1-
<div class="text-white" style="<%= header_styles() %>">
2-
<header class="mx-auto max-w-4xl">
1+
<header class="text-white" style="<%= header_styles() %>">
2+
<div class="mx-auto max-w-4xl">
33
<h1 class="pt-8 row space-x-4 text-4xl text-center font-bold leading-tight text-shadow">
44
<div class="row">
55
<span class="mr-2 text-4xl">💁🏼‍♀️🥇</span>
66
</div>
7-
<span><%= "Accessibility-First Development" %></span>
7+
<span><%= "Accessibility-First" %></span>
88
</h1>
9-
<nav class="pt-6 pb-4">
10-
<ul class="list-none row font-bold" style="--link-padding: 0.75em">
11-
<li><%= link("Landmarks", to: '/accessibility-first/widgets-cheatsheet') %>
12-
<li><%= link("Widgets", to: '/accessibility-first/widgets-cheatsheet') %>
13-
<li><%= link("Properties", to: '/accessibility-first/properties-cheatsheet') %>
14-
<li><%= link("Forms", to: '/accessibility-first/properties-cheatsheet') %>
15-
<li><%= link("Keyboard Navigation", to: '/accessibility-first/properties-cheatsheet') %>
16-
</ul>
17-
</nav>
18-
</header>
19-
</div>
20-
21-
<header class="text-white" style="background: <%= header_background() %>;">
22-
<div class="container px-6 pt-12 pb-12">
23-
<h1 class="mx-auto max-w-4xl text-5xl text-center font-bold leading-tight text-shadow">
24-
<%= "🥇 Accessibility-First Development" %>
25-
</h1>
26-
<p class="my-8 mx-auto max-w-3xl text-4xl text-center leading-snug italic text-shadow">
27-
<%#= "Write simpler, more robust tests using accessibility affordances." %>
28-
<%= "Write simpler, more robust tests via user-friendly accessibility affordances." %>
29-
</p>
309
<%= render @view_module, "_nav.html" %>
3110
</div>
3211
</header>
3312

34-
<div class="bg-white">
35-
<%= section "Topics", class: "container pt-8 pb-16 text-2xl" do %>
36-
<%= topic_article(title: "Landmarks", link: Routes.accessibility_first_path(@conn, :show, "landmarks")) do %>
37-
<ul>
38-
<li><%= link("Orienting web visitors using landmarks", to: "#") %>
39-
</ul>
40-
<p>Define what your elements are using a clear standard. Let your users quickly jump around the key parts of your page (better UX), and leverage those in your tests (better DX).</p>
41-
<% end %>
42-
<%= topic_article(title: "Widgets, Attributes & States", link: Routes.accessibility_first_path(@conn, :show, "properties-cheatsheet")) do %>
43-
<p>Learn the standards for interactive widgets usable by touch, mouse, and keyboard. Let users know which page is current or which sub-control is selected.</p>
44-
<% end %>
45-
<%= topic_article(title: "BDD with Jest & React Testing Library") do %>
46-
<p>Learn a consistent pattern to write your component tests in Jest. Use @testing-library to find elements in a realistic way. Describe your contexts and scenarios with plain language.</p>
47-
<% end %>
48-
<%= topic_article(title: "Atomic Design") do %>
49-
<p>Organize your components into distict folders. Break them up at the right level, then compose them. Test them differently. Incorporate ARIA roles into the atomic design approach.</p>
50-
<% end %>
51-
<% end %>
13+
<article>
14+
<div class="text-white bg-gray-900">
15+
<div class="content max-w-4xl mx-auto py-8 text-xl">
16+
<%= render(@view_module, @article <> ".html", conn: @conn) %>
17+
</div>
18+
</div>
19+
</article>
20+
21+
<div class="bg-white" hidden>
22+
<section class="container pt-8 pb-16 text-2xl">
23+
<article class="mb-8">
24+
<h2 class="mb-2 text-4xl leading-normal text-teal-800">Atomic design</h2>
25+
<p>
26+
Learn how to name components. Apply the single responsibility principle. Find the indivisible component units, and compose them together into larger molecules.
27+
</p>
28+
</article>
29+
<article class="mb-8">
30+
<h2 class="mb-2 text-4xl leading-normal text-teal-800">Styling approaches</h2>
31+
<p>
32+
Extract common styles. Define a style guide. How do you keep styles consistent?
33+
</p>
34+
</article>
35+
<article class="mb-8">
36+
<h2 class="mb-2 text-4xl leading-normal text-teal-800">Reusability trade-offs</h2>
37+
<p>
38+
What sort of components should be resuable? How granular should you go?
39+
</p>
40+
</article>
41+
<article class="mb-8">
42+
<h2 class="mb-2 text-4xl leading-normal text-teal-800">Pattern libraries</h2>
43+
<p>
44+
When do you need a pattern library? Who are they for? How should you manage them?
45+
</p>
46+
</article>
47+
<article class="mb-8">
48+
<h2 class="mb-2 text-4xl leading-normal text-teal-800">Testing components</h2>
49+
<p>
50+
Unit test components. Test the behaviours that matter first. Use type-safety to remove impossible states.
51+
</p>
52+
</article>
53+
<article class="mb-8">
54+
<h2 class="mb-2 text-4xl leading-normal text-teal-800">Testing data flow</h2>
55+
<p>
56+
Test your data flow in isolation. Use test-driven design. Mock APIs and other sources.
57+
</p>
58+
</article>
59+
<article class="mb-8">
60+
<h2 class="mb-2 text-4xl leading-normal text-teal-800">Composable component patterns</h2>
61+
<p>
62+
Components are <em>really</em> composable. Can we reduce boilerplate? What useful component utilities can we make?
63+
</p>
64+
</article>
65+
<article class="mb-8">
66+
<h2 class="mb-2 text-4xl leading-normal text-teal-800">Handling errors</h2>
67+
<p>
68+
Handle errors from publishers. What and when should you show users?
69+
</p>
70+
</article>
71+
<article class="mb-8">
72+
<h2 class="mb-2 text-4xl leading-normal text-teal-800">Caching data</h2>
73+
<p>
74+
Learn how to name components. Apply the single responsibility principle. Find the atomic units, and compose them together.
75+
</p>
76+
</article>
77+
<article class="mb-8">
78+
<h2 class="mb-2 text-4xl leading-normal text-teal-800">Improving performance in the right areas</h2>
79+
<p>
80+
Learn when you should focus on performance. Measure to be informed. Apply optimization techniques.
81+
</p>
82+
</article>
83+
<article class="mb-8">
84+
<h2 class="mb-2 text-4xl leading-normal text-teal-800">Automating repetitive tasks</h2>
85+
<p>
86+
Produce screenshots across many devices.
87+
</p>
88+
</article>
89+
</section>
5290
</div>

0 commit comments

Comments
 (0)