Skip to content

Commit d13e6e4

Browse files
RoyalIcingRoyalIcing
committed
Steady improvements
1 parent 4ca875c commit d13e6e4

File tree

11 files changed

+313
-16
lines changed

11 files changed

+313
-16
lines changed

‎apps/components_guide_web/assets/css/app.css

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,13 +52,18 @@ a:hover {
5252
text-decoration: var(--hover\:links-decoration);
5353
}
5454

55-
h2, h3, p, li, table {
55+
h1, h2, h3, p, li, table {
5656
margin-left: var(--item-spacing-left);
5757
margin-right: var(--item-spacing-right);
5858
}
5959
table {
6060
width: calc(100% - var(--item-spacing-left) - var(--item-spacing-right));
6161
}
62+
h1 {
63+
font-size: var(--heading-1-size);
64+
padding: var(--heading-1-spacing);
65+
text-align: var(--heading-1-align);
66+
}
6267
h2 {
6368
font-size: var(--heading-2-size);
6469
padding: var(--heading-2-spacing);
@@ -99,6 +104,9 @@ input {
99104
.content {
100105
--item-spacing-left: 1rem;
101106
--item-spacing-right: 1rem;
107+
--heading-1-size: var(--size-5xl);
108+
--heading-1-spacing: var(--size-base) 0;
109+
--heading-1-align: center;
102110
--heading-2-size: var(--size-3xl);
103111
--heading-2-spacing: var(--size-base) 0;
104112
--heading-3-size: var(--size-2xl);

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ defmodule ComponentsGuideWeb.AccessibilityFirstController do
33
require Logger
44

55
def index(conn, _params) do
6-
render(conn, "index.html")
6+
render(conn, "index.html", article: "intro")
77
end
88

99
def show(conn, %{"id" => "landmarks"}) do
@@ -18,7 +18,7 @@ defmodule ComponentsGuideWeb.AccessibilityFirstController do
1818
render(conn, "properties-cheatsheet.html")
1919
end
2020

21-
@articles ["navigation", "forms", "content"]
21+
@articles ["navigation", "roles", "accessible-name", "forms", "content"]
2222

2323
def show(conn, %{"id" => article}) when article in @articles do
2424
render(conn, "index.html", article: article)

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,10 @@
22
<ul y-y x-x=md class="text-lg font-bold text-shadow" style="--link-padding: 0.75em">
33
<li><%= link("Intro", to: '/accessibility-first') %>
44
<li><%= link("Navigation", to: '/accessibility-first/navigation') %>
5-
<li><%= link("Content", to: '/accessibility-first/content') %>
5+
<li><%= link("Roles", to: '/accessibility-first/roles') %>
6+
<li><%= link("Accessible Name", to: '/accessibility-first/accessible-name') %>
67
<li><%= link("Forms", to: '/accessibility-first/forms') %>
78
<li><%= link("Properties", to: '/accessibility-first/properties-cheatsheet') %>
9+
<li><%= link("Content", to: '/accessibility-first/content') %>
810
</ul>
911
</nav>

‎apps/components_guide_web/lib/components_guide_web/templates/accessibility_first/accessible-name.html.md

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
# Accessible names
2+
3+
Accessible elements don’t just have a role. They can have a ‘name’ too, which helps the user tell elements with the same role apart.
4+
5+
These names are provided by HTML in a number of ways:
6+
7+
- `<label>` relationship
8+
- `aria-labelledby` attribute
9+
- `aria-label` attribute
10+
- The displayed value
11+
- The text content
12+
13+
The algorithm is specified in [W3C’s Accessible Name and Description Computation](https://www.w3.org/TR/accname-1.1/#mapping_additional_nd_te).
14+
15+
### Examples of accessible names
16+
17+
```html
18+
<button>Save</button>
19+
```
20+
21+
```html
22+
<label>Email: <input type=email></label>
23+
```
24+
25+
```html
26+
<label><input type=checkbox> Receive email alerts</label>
27+
```
28+
29+
```html
30+
<fieldset>
31+
<legend>Alert settings</legend>
32+
<label><input type=checkbox> Receive push notifications</label>
33+
<label><input type=checkbox> Receive email alerts</label>
34+
<label><input type=checkbox> Receive text messages</label>
35+
</fieldset>
36+
```
37+
38+
```html
39+
<article aria-labelledby="faq-heading">
40+
<h2 id="faq-heading">Frequently Asked Questions</h2>
41+
</article>
42+
```
43+
44+
```html
45+
<nav aria-label="Primary">
46+
…
47+
</nav>
48+
```
49+
50+
```html
51+
<svg role="img">
52+
<title>New document</title>
53+
…
54+
</svg>
55+
```
56+
57+
You could query these elements using Testing Library:
58+
59+
```ts
60+
getByRole('button', { name: 'Save' });
61+
getByRole('textbox', { name: /Email/ });
62+
getByRole('checkbox', { name: /Receive email alerts/i });
63+
getByRole('fieldset', { name: /Alert settings/i });
64+
getByRole('article', { name: /Frequently asked questions/i });
65+
getByRole('navigation', { name: 'Primary' });
66+
getByRole('img', { name: 'New document' });
67+
```

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
# Content
2+
3+
Coming soon…
4+
15
## Headings
26

37
## Lists

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# Why Consider Accessibility First?
2+
3+
A mobile-first approach ensures that a phone experience, which many users now prefer and use regularly, is prioritised and is great. It helps combat the natural tendency for the mobile experience to be left behind.
4+
5+
Similarly, an accessibility-first experience that the accessible experience, using screen readers and other assistive tech, is prioritised and is great.
6+
7+
But the benefit goes further. Developers can use the accessibility affordances to write automated tests. And if they ensure it’s accessible right away, it provides predictable ways to write the tests upfront.
8+
9+
## Consider your HTML, no matter your framework
10+
11+
HTML is not an after-thought, it’s not a ‘solved problem’, it’s not something you learn once and never have to study again. Especially in the world of web apps, it’s worth surveying the capabilities of today’s HTML and the affordances it can bring to every user.
12+
13+
## Accessibility Checklist for HTML
14+
15+
1. **Landmarks:** provide familiar touch points that users can jump to
16+
2. **Semantics & Roles:** give every element semantic meaning
17+
3. **Widgets:** allow everyone to use your controls
18+
4. **Attributes:** sometimes sprinkling aria- attributes everywhere makes things less accessible

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
# Navigation elements
2+
13
## Link
24

35
```html

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

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
## Available Roles
2+
3+
<table class="text-left table-fixed">
4+
<thead>
5+
<tr>
6+
<th style="width: 12em">Role name</th>
7+
<th>HTML element</th>
8+
</tr>
9+
</thead>
10+
<tbody class="text-white bg-purple-900 border border-purple-700">
11+
<%= table_rows([
12+
["**link**", "`<a href=…>`"],
13+
["_none_", "`<a>`"],
14+
["**button**", "`<button>`"],
15+
["**button**", "`<input type=button>`"],
16+
["**textbox**", "`<textarea>`"],
17+
["**textbox**", "`<input type=text>`"],
18+
["**radio**", "`<input type=radio>`"],
19+
["**heading**", "`<h1>`"],
20+
["**heading**", "`<h2>`"],
21+
["**heading**", "`<h3>`"],
22+
["**document**", "`<body>`"],
23+
]) %>
24+
</tbody>
25+
</table>
26+
27+
<table class="text-left table-fixed">
28+
<caption class="text-2xl">Landmarks</caption>
29+
<thead>
30+
<tr>
31+
<th style="width: 12em">Role name</th>
32+
<th>HTML element</th>
33+
</tr>
34+
</thead>
35+
<tbody class="text-white bg-purple-900 border border-purple-700">
36+
<%= table_rows([
37+
["**main**", "`<main>`"],
38+
["**navigation**", "`<nav>`"],
39+
["**banner**", "`<header role=banner>`"],
40+
["**contentinfo**", "`<footer role=contentinfo>`"],
41+
["**search**", "`<form role=search>`"],
42+
["**form**", "`<form>`"],
43+
["**complementary**", "`<aside>`"],
44+
["**region**", "`<section>`"],
45+
]) %>
46+
</tbody>
47+
</table>
48+
49+
<table class="text-left table-fixed">
50+
<caption class="text-2xl">Content</caption>
51+
<thead>
52+
<tr>
53+
<th style="width: 12em">Role name</th>
54+
<th>HTML element</th>
55+
</tr>
56+
</thead>
57+
<tbody class="text-white bg-purple-900 border border-purple-700">
58+
<%= table_rows([
59+
["**link**", "`<a href=…>`"],
60+
["_none_", "`<a>`"],
61+
["**heading**", "`<h1>`, `<h2>`, `<h3>`, etc"],
62+
["**list**", "`<ul>`, `<ol>`"],
63+
["**listitem**", "`<li>`"],
64+
["**term**", "`<dt>`"],
65+
["**definition**", "`<dd>`"],
66+
["**img**", "`<img alt=\"Some description\">`"],
67+
["_none_", "`<img alt=\"\">`"],
68+
["**figure**", "`<figure>`"],
69+
["**separator**", "`<hr>`, `<li role=separator>`"],
70+
["_none_", "`<p>`"],
71+
["_none_", "`<div>`"],
72+
["_none_", "`<span>`"],
73+
["**group**", "`<details>`"],
74+
["**button**", "`<summary>`"],
75+
]) %>
76+
</tbody>
77+
</table>
78+
79+
<table class="text-left table-fixed">
80+
<caption class="text-2xl">Forms</caption>
81+
<thead>
82+
<tr>
83+
<th style="width: 12em">Role name</th>
84+
<th>HTML element</th>
85+
</tr>
86+
</thead>
87+
<tbody class="text-white bg-purple-900 border border-purple-700">
88+
<%= table_rows([
89+
["**form**", "`<form>`"],
90+
["**group**", "`<fieldset>`"],
91+
["**search**", "`<form role=search>`"],
92+
["**button**", "`<button>`"],
93+
["**button**", "`<input type=button>`"],
94+
["**button**", "`<button type=submit>`, `<input type=submit>`"],
95+
["**textbox**", "`<textarea>`"],
96+
["**textbox**", "`<input type=text>`"],
97+
["**textbox**", "`<input type=email>`"],
98+
["**textbox**", "`<input type=tel>`"],
99+
["**textbox**", "`<input type=url>`"],
100+
["**searchbox**", "`<input type=search>` without `list` attribute"],
101+
["**radiogroup**", "`<fieldset role=radiogroup>`"],
102+
["**radio**", "`<input type=radio>`"],
103+
["**checkbox**", "`<input type=checkbox>`"],
104+
["**combobox**", "`<select>` without `multiple` attribute"],
105+
["**listbox**", "`<select>` with `multiple` attribute"],
106+
["**option**", "`<option>`"],
107+
["**slider**", "`<input type=range>`"],
108+
["_none_", "`<input type=password>`"],
109+
["progressbar", "`<progress>`"],
110+
["status", "`<output>`"],
111+
]) %>
112+
</tbody>
113+
</table>
114+
115+
<table class="text-left table-fixed">
116+
<caption class="text-2xl">Tables</caption>
117+
<thead>
118+
<tr>
119+
<th style="width: 12em">Role name</th>
120+
<th>HTML element</th>
121+
</tr>
122+
</thead>
123+
<tbody class="text-white bg-purple-900 border border-purple-700">
124+
<%= table_rows([
125+
["**table**", "`<table>`"],
126+
["**rowgroup**", "`<tbody>`, `<thead>`, `<tfoot>`"],
127+
["**rowheader**", "`<th>`"],
128+
["**columnheader**", "`<th>`"],
129+
["**row**", "`<tr>`"],
130+
["**cell**", "`<td>`"],
131+
]) %>
132+
</tbody>
133+
</table>
134+
135+
<table class="text-left table-fixed">
136+
<caption class="text-2xl">Tabs</caption>
137+
<thead>
138+
<tr>
139+
<th style="width: 12em">Role name</th>
140+
<th>HTML element</th>
141+
</tr>
142+
</thead>
143+
<tbody class="text-white bg-purple-900 border border-purple-700">
144+
<%= table_rows([
145+
["**tablist**", "`<ul role=tablist>`"],
146+
["**tab**", "`<button role=tab>`"],
147+
["**tabpanel**", "`<section role=tabpanel>`"],
148+
]) %>
149+
</tbody>
150+
<tfoot class="text-purple-100 bg-purple-900 border border-purple-700">
151+
<tr>
152+
<td colspan=2 class="px-3 py-1"><em>Should</em> manage focus with JavaScript.</td>
153+
</tr>
154+
</tfoot>
155+
</table>
156+
157+
<table class="text-left table-fixed">
158+
<caption class="text-2xl">Menus</caption>
159+
<thead>
160+
<tr>
161+
<th style="width: 12em">Role name</th>
162+
<th>HTML element</th>
163+
</tr>
164+
</thead>
165+
<tbody class="text-white bg-purple-900 border border-purple-700">
166+
<%= table_rows([
167+
["**menu**", "`<ul role=menu>`"],
168+
["**menuitem**", "`<button role=menuitem>`"],
169+
["**menuitemcheckbox**", "`<button role=menuitemcheckbox>`"],
170+
["**menuitemradio**", "`<button role=menuitemradio>`"],
171+
["**menubar**", "`<nav role=menubar>`"],
172+
]) %>
173+
</tbody>
174+
<tfoot class="text-purple-100 bg-purple-900 border border-purple-700">
175+
<tr>
176+
<td colspan=2 class="px-3 py-1"><em>Should</em> manage focus with JavaScript.</td>
177+
</tr>
178+
</tfoot>
179+
</table>

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

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,10 @@ subhead = "Guides to accessibility, TDD, BDD, naming, performance, and the lates
1010

1111
<div class="text-white" style="<%= header_styles(3) %>">
1212
<section class="container px-6 pt-12 pb-8">
13-
<h1 class="mx-auto max-w-4xl px-2 text-3xl sm:text-4xl md:text-6xl text-center leading-tight font-bold text-shadow">
13+
<h1 class="mx-auto max-w-4xl px-2 text-3xl sm:text-4xl md:text-5xl text-center leading-tight font-bold text-shadow">
1414
<%= heading %>
1515
</h1>
16-
<p class="mt-6 mb-8 mx-auto max-w-3xl text-2xl sm:text-3xl md:text-4xl text-center leading-snug italic text-gray-100 text-shadow">
16+
<p class="mt-6 mb-8 mx-auto max-w-3xl text-2xl sm:text-3xl md:text-3xl text-center leading-snug italic text-gray-100 text-shadow">
1717
<%= subhead %>
1818
</p>
1919
<p hidden class="mx-auto py-2 max-w-4xl text-base md:text-xl text-center">
@@ -45,11 +45,11 @@ subhead = "Guides to accessibility, TDD, BDD, naming, performance, and the lates
4545
</section>
4646
</div>
4747

48-
<article class="text-white py-4" style="<%= sections_styles(:blue) %>">
48+
<article class="text-white py-6" style="<%= sections_styles(:blue) %>">
4949
<%= render ComponentsGuideWeb.ReactTypescriptView, "_top.html" %>
5050
</article>
5151

52-
<article class="text-white" style="<%= sections_styles(:warm) %>">
52+
<article class="text-white py-6" style="<%= sections_styles(:warm) %>">
5353
<%= render ComponentsGuideWeb.AccessibilityFirstView, "_top.html" %>
5454
</article>
5555

@@ -165,6 +165,10 @@ subhead = "Guides to accessibility, TDD, BDD, naming, performance, and the lates
165165

166166
</div>
167167

168+
<div x-x class="py-8 bg-purple-300">
169+
<script async data-uid="cdeda516d7" src="https://components-guide.ck.page/cdeda516d7/index.js"></script>
170+
</div>
171+
168172
<div class="text-white">
169173
<aside class="py-20">
170174
<div class="container space-y-6 text-2xl md:text-3xl rounded">

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,18 @@ defmodule ComponentsGuideWeb.AccessibilityFirstView do
44
use ComponentsGuideWeb.Snippets
55
use Phoenix.HTML
66

7+
def table_rows(rows_content) do
8+
Enum.map(rows_content, &table_row/1)
9+
end
10+
11+
def table_row(items) do
12+
content_tag(:tr, Enum.map(items, &table_cell/1))
13+
end
14+
15+
def table_cell(content) do
16+
content_tag(:td, content |> line(), class: "px-3 py-1")
17+
end
18+
719
def header_background do
820
Styling.linear_gradient("150grad", [
921
{:lab, 70, 40, -50},

0 commit comments

Comments
 (0)