Skip to content

Commit 521f7b8

Browse files
mplattsmplatts
authored
Merge pull request #326 from petalframework/tyler/accessibility
2 parents b77e512 + 80701ee commit 521f7b8

File tree

10 files changed

+318
-11
lines changed

10 files changed

+318
-11
lines changed

‎lib/petal_components/avatar.ex

+2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ defmodule PetalComponents.Avatar do
22
use Phoenix.Component
33

44
attr(:src, :string, default: nil, doc: "hosted avatar URL")
5+
attr(:alt, :string, default: nil, doc: "alt text for avatar image")
56
attr(:size, :string, default: "md", values: ["xs", "sm", "md", "lg", "xl"])
67
attr(:class, :string, default: "", doc: "CSS class")
78
attr(:name, :string, default: nil, doc: "name for placeholder initials")
@@ -43,6 +44,7 @@ defmodule PetalComponents.Avatar do
4344
<img
4445
{@rest}
4546
src={@src}
47+
alt={@alt || @src}
4648
class={[
4749
"pc-avatar--with-image",
4850
"pc-avatar--#{@size}",

‎lib/petal_components/modal.ex

+7-2
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,12 @@ defmodule PetalComponents.Modal do
5454
class="hidden pc-modal"
5555
>
5656
<div class="pc-modal__overlay" aria-hidden="true"></div>
57-
<div class="pc-modal__wrapper" role="dialog" aria-modal="true">
57+
<div
58+
class="pc-modal__wrapper"
59+
aria-labelledby={"pc-modal__header__text-#{@id}"}
60+
role="dialog"
61+
aria-modal="true"
62+
>
5863
<div
5964
class={@classes}
6065
phx-click-away={@close_on_click_away && JS.exec("data-cancel", to: "##{@id}")}
@@ -64,7 +69,7 @@ defmodule PetalComponents.Modal do
6469
<!-- Header -->
6570
<div class="pc-modal__header">
6671
<div class="pc-modal__header__container">
67-
<div class="pc-modal__header__text">
72+
<div id={"pc-modal__header__text-#{@id}"} class="pc-modal__header__text">
6873
<%= @title %>
6974
</div>
7075
<%= unless @hide_close_button do %>

‎lib/petal_components/slide_over.ex

+1
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ defmodule PetalComponents.SlideOver do
5151
<div
5252
class={["pc-slideover__wrapper", get_margin_classes(@origin), @class]}
5353
role="dialog"
54+
aria-label="slide-over-content-wrapper"
5455
aria-modal="true"
5556
>
5657
<div

‎lib/petal_components_web/a11y_live.ex

+192
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
defmodule PetalComponentsWeb.A11yLive do
2+
@moduledoc """
3+
A LiveView to test the accessibility of Petal Components using `:a11y_audit`.
4+
"""
5+
use Phoenix.LiveView
6+
use PetalComponents
7+
8+
def mount(_params, _session, socket) do
9+
{:ok,
10+
assign(socket,
11+
count: 0,
12+
form: to_form(%{}, as: :user),
13+
main_menu_items: [
14+
%{
15+
name: :sign_in,
16+
label: "Path",
17+
path: "/path",
18+
icon: :key
19+
}
20+
],
21+
current_page: :current_page,
22+
sidebar_title: "blah",
23+
posts: [
24+
%{
25+
id: 1,
26+
name: "Some post"
27+
},
28+
%{
29+
id: 2,
30+
name: "Another post"
31+
}
32+
],
33+
user_menu_items: [%{path: "/path", icon: :home, label: "blah"}],
34+
avatar_src: "blah.img",
35+
current_user_name: nil
36+
)}
37+
end
38+
39+
def render(assigns) do
40+
~H"""
41+
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js">
42+
</script>
43+
<main role="main">
44+
<.h1>Petal Components A11y Audit</.h1>
45+
<.h2>Heading 2</.h2>
46+
<.h3>Heading 3</.h3>
47+
<.h4>Heading 4</.h4>
48+
<.h5>Heading 5</.h5>
49+
50+
<.ul class="mb-5" random-attribute="lol">
51+
<li>Item 1</li>
52+
<li>Item 2</li>
53+
</.ul>
54+
55+
<.ol class="mb-5" random-attribute="lol">
56+
<li>Item 1</li>
57+
<li>Item 2</li>
58+
</.ol>
59+
60+
<.prose class="md:prose-lg" random-attribute="lol">
61+
<p>A paragraph</p>
62+
</.prose>
63+
64+
<.p x-text="input">Paragraph</.p>
65+
66+
<.accordion>
67+
<:item heading="Accordion">
68+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis. Ut enim ad minim veniam quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
69+
</:item>
70+
</.accordion>
71+
72+
<.alert with_icon color="info" label="Info alert" />
73+
74+
<.avatar src="image.png" />
75+
76+
<.badge color="primary" label="Primary" />
77+
78+
<.breadcrumbs
79+
class="text-md"
80+
links={[
81+
%{label: "Link 1", to: "/", icon: :home}
82+
]}
83+
/>
84+
85+
<.button label="Press me" phx-click="click_event" />
86+
87+
<.card>
88+
<.card_content category="Article" heading="Enhance your Phoenix development">
89+
<div class="mt-4 font-light text-gray-500 text-md">
90+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget leo interdum, feugiat ligula eu, facilisis massa. Nunc sollicitudin massa a elit laoreet.
91+
</div>
92+
</.card_content>
93+
</.card>
94+
95+
<.container max_width="full"></.container>
96+
97+
<.dropdown
98+
class="dropdown_class"
99+
menu_items_wrapper_class="menu_items_wrapper_class"
100+
label="Dropdown"
101+
>
102+
<.dropdown_menu_item class="dropdown_menu_item_class" type="button">
103+
<Heroicons.home class="w-5 h-5 text-gray-500" /> Button item with icon
104+
</.dropdown_menu_item>
105+
</.dropdown>
106+
107+
<.form for={@form}>
108+
<.field
109+
field={@form[:name]}
110+
placeholder="eg. Sally"
111+
class="!w-max"
112+
itemid="something"
113+
value="John"
114+
help_text="Help text"
115+
label_class="label-class"
116+
/>
117+
</.form>
118+
119+
<.icon name={:arrow_right} class="text-gray-300" />
120+
121+
<.form for={@form}>
122+
<.input field={@form[:name]} type="text" />
123+
<.input field={@form[:name]} type="color" />
124+
<.input field={@form[:name]} type="date" />
125+
<.input field={@form[:name]} type="datetime-local" />
126+
<.input field={@form[:name]} type="email" />
127+
<.input field={@form[:name]} type="file" />
128+
<.input field={@form[:name]} type="hidden" />
129+
<.input field={@form[:name]} type="month" />
130+
<.input field={@form[:name]} type="number" />
131+
<.input field={@form[:name]} type="password" />
132+
<.input field={@form[:name]} type="range" />
133+
<.input field={@form[:name]} type="search" />
134+
<.input field={@form[:name]} type="tel" />
135+
<.input field={@form[:name]} type="text" />
136+
<.input field={@form[:name]} type="time" />
137+
<.input field={@form[:name]} type="url" />
138+
<.input field={@form[:name]} type="week" />
139+
</.form>
140+
141+
<PetalComponents.Link.a link_type="a" to="/" label="Press me" phx-click="click_event" />
142+
143+
<.spinner show={true} />
144+
145+
<.vertical_menu
146+
menu_items={@main_menu_items}
147+
current_page={@current_page}
148+
title={@sidebar_title}
149+
/>
150+
151+
<.modal max_width="sm" title="Modal">
152+
<div class="gap-5 text-sm">
153+
<.form_label label="Add some text here." />
154+
<div class="flex justify-end">
155+
<.button label="close" phx-click={PetalComponents.Modal.hide_modal()} />
156+
</div>
157+
</div>
158+
</.modal>
159+
160+
<.progress size="xl" value={10} max={100} label="15%" />
161+
162+
<.rating include_label rating={3.3} total={5} />
163+
164+
<.skeleton />
165+
166+
<.slide_over title="SlideOver" origin="left">
167+
<div class="gap-5 text-sm">
168+
<.form_label label="Add some text here." />
169+
<div class="flex justify-end">
170+
<.button label="close" phx-click={PetalComponents.SlideOver.hide_slide_over("left")} />
171+
</div>
172+
</div>
173+
</.slide_over>
174+
175+
<.table class="my-class" id="posts" row_id={fn post -> "row_#{post.id}" end} rows={@posts}>
176+
<:col :let={post} label="Name" class="col-class" row_class="row-class"><%= post.name %></:col>
177+
</.table>
178+
179+
<.tabs class="flex-col sm:flex-row space-x">
180+
<.tab is_active to="/">Home</.tab>
181+
<.tab link_type="a" to="/" label="Press me" phx-click="click_event" />
182+
</.tabs>
183+
184+
<.user_dropdown_menu
185+
user_menu_items={@user_menu_items}
186+
avatar_src={@avatar_src}
187+
current_user_name={@current_user_name}
188+
/>
189+
</main>
190+
"""
191+
end
192+
end

‎mix.exs

+5
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ defmodule PetalComponents.MixProject do
2020
],
2121
test_coverage: [tool: ExCoveralls],
2222
preferred_cli_env: [
23+
wallaby: :test,
2324
coveralls: :test,
2425
"coveralls.detail": :test,
2526
"coveralls.post": :test,
@@ -42,6 +43,10 @@ defmodule PetalComponents.MixProject do
4243
# Run "mix help deps" to learn about dependencies.
4344
defp deps do
4445
[
46+
{:a11y_audit, "~> 0.1.0", only: :test},
47+
{:phoenix_playground, "~> 0.1.4", only: [:dev, :test]},
48+
{:websock_adapter, "~> 0.5.6"},
49+
{:wallaby, "~> 0.30.9", runtime: false, only: :test},
4550
{:phoenix, "~> 1.7"},
4651
{:phoenix_live_view, "~> 0.20"},
4752
{:phoenix_html, "~> 4.0"},

0 commit comments

Comments
 (0)