Skip to content

Commit 8f1d9ac

Browse files
nishimotznishimotz
authored
Merge pull request #272 from waic/add-test-0089-01
0089-01のテストを追加
2 parents 73f07a1 + c75ef62 commit 8f1d9ac

File tree

2 files changed

+253
-0
lines changed

2 files changed

+253
-0
lines changed

‎WAIC-CODE/WAIC-CODE-0089-01.html‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
<!doctype html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width,
6+
initial-scale=1, shrink-to-fit=no">
7+
<title>WAIC-CODE-0089-01</title>
8+
<style>
9+
*, *::after, *::before {
10+
box-sizing: inherit;
11+
}
12+
13+
body {
14+
background:#fff;
15+
color:#000;
16+
font:1rem/1.5 system-ui, Helvetica, Roboto, sans-serif;
17+
}
18+
19+
*:focus-visible {
20+
outline:1px solid #0054AE;
21+
outline-offset:1px;
22+
}
23+
24+
dialog {
25+
border:1px solid #000;
26+
padding:2rem;
27+
position:relative;
28+
}
29+
30+
dialog::backdrop {
31+
background-color:hsla(0, 0%, 0%, .5);
32+
}
33+
34+
.close-modal {
35+
inset-block-start:1.5rem;
36+
inset-inline-end:1.5rem;
37+
line-height:1.3;
38+
padding:0.25em 0.5em;
39+
position:absolute;
40+
}
41+
42+
.sign-up {
43+
background:#000;
44+
color:#fff;
45+
padding:0.25em;
46+
}
47+
48+
dialog h1 {
49+
display:inline-block;
50+
line-height:1.3333;
51+
margin:0 1.25em 0 0;
52+
max-inline-size:95%;
53+
}
54+
55+
form {
56+
display:grid;
57+
grid-gap:20px;
58+
grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
59+
}
60+
61+
.req-note, .sign-up {
62+
grid-column:1 / -1;
63+
}
64+
65+
label {
66+
display:block;
67+
}
68+
69+
input {
70+
border:1px solid hsl(0, 0%, 50%);
71+
font:inherit;
72+
inline-size:calc(100% - 4px);
73+
}
74+
75+
button {
76+
background:#fff;
77+
border:1px solid hsl(0, 0%, 50%);
78+
border-radius:3px;
79+
color:inherit;
80+
font:inherit;
81+
margin:0;
82+
}
83+
</style>
84+
<script>
85+
document.addEventListener("DOMContentLoaded", function(e){
86+
const d = document.querySelector("dialog");
87+
const btnOpen = document.querySelector(".open-modal");
88+
89+
btnOpen.addEventListener("click", function(){
90+
d.showModal();
91+
}, false);
92+
});
93+
</script>
94+
</head>
95+
<body>
96+
<main>
97+
<h1>ターボ・エンカビュレーター ニュース</h1>
98+
<p><button class="open-modal" type="button">メーリングリストに登録してください！</button></p>
99+
<p><a href="https://waic.jp/">ウェブアクセシビリティ基盤委員会</a></p>
100+
</main>
101+
<dialog aria-labelledby="dialog-heading" id="mailing-list-dialog">
102+
<h1 id="dialog-heading" tabindex="-1">メーリングリストに登録</h1>
103+
<form>
104+
<p class="req-note">すべての入力欄は必須です</p>
105+
<div>
106+
<label for="fname">名前(姓)</label>
107+
<input aria-required="true" autocomplete="given-name" id="fname" type="text">
108+
</div>
109+
<div>
110+
<label for="lname">名前(名)</label>
111+
<input aria-required="true" autocomplete="family-name" id="lname" type="text">
112+
</div>
113+
<div>
114+
<label for="email">メールアドレス</label>
115+
<input aria-required="true" autocomplete="email" id="email" type="text">
116+
</div>
117+
<button class="sign-up" type="submit">登録</button>
118+
</form>
119+
<form method="dialog">
120+
<button aria-label="閉じる" class="close-modal">&times;</button>
121+
</form>
122+
</dialog>
123+
</body>
124+
</html>

‎WAIC-TEST/HTML/WAIC-TEST-0089-01.md‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
# テスト ID
2+
3+
WAIC-TEST-0089-01
4+
5+
# テストのタイトル
6+
7+
HTMLのdialog要素を使用してモーダルダイアログを作成する
8+
9+
# テストの目的
10+
11+
HTMLのdialog要素で作られたモーダルダイアログが機能するかどうかを確認する
12+
13+
# テストの対象となる達成基準 (複数)
14+
15+
2.4.3
16+
17+
# 関連する達成方法 (複数)
18+
19+
H102
20+
21+
# テストコード (テストファイルへのリンク)
22+
23+
[WAIC-CODE-0089-01](https://waic.github.io/as_test/WAIC-CODE/WAIC-CODE-0089-01.html)
24+
25+
# テストコードのソース (抜粋)
26+
27+
```HTML
28+
<body>
29+
<main>
30+
<h1>ターボ・エンカビュレーター ニュース</h1>
31+
<p><button class="open-modal" type="button">メーリングリストに登録してください！</button></p>
32+
<p><a href="https://waic.jp/">ウェブアクセシビリティ基盤委員会</a></p>
33+
</main>
34+
<dialog aria-labelledby="dialog-heading" id="mailing-list-dialog">
35+
<h1 id="dialog-heading" tabindex="-1">メーリングリストに登録</h1>
36+
<form>
37+
<p class="req-note">すべての入力欄は必須です</p>
38+
<div>
39+
<label for="fname">名前(姓)</label>
40+
<input aria-required="true" autocomplete="given-name" id="fname" type="text">
41+
</div>
42+
<div>
43+
<label for="lname">名前(名)</label>
44+
<input aria-required="true" autocomplete="family-name" id="lname" type="text">
45+
</div>
46+
<div>
47+
<label for="email">メールアドレス</label>
48+
<input aria-required="true" autocomplete="email" id="email" type="text">
49+
</div>
50+
<button class="sign-up" type="submit">登録</button>
51+
</form>
52+
<form method="dialog">
53+
<button aria-label="閉じる" class="close-modal">&times;</button>
54+
</form>
55+
</dialog>
56+
</body>
57+
```
58+
59+
# テスト手順と期待される結果 (視覚閲覧環境)
60+
61+
## テスト手順 1
62+
63+
キーボード操作で「メーリングリストに登録してください！」ボタンを押す
64+
65+
## 期待される結果 1
66+
67+
「メーリングリストに登録」というモーダルダイアログが開き、フォーカスがモーダルダイアログ内に移動する
68+
69+
## テスト手順 2
70+
71+
キーボード操作で、モーダルダイアログ上でフォーカスを移動する。それを繰り返す
72+
73+
## 期待される結果 2
74+
75+
フォーカスはモーダルダイアログ内の入力欄やボタンに移るが、モーダルダイアログの外には出ない (「メーリングリストに登録してください！」ボタンや「ウェブアクセシビリティ基盤委員会」というリンクにフォーカスが移らない)
76+
77+
## テスト手順 3
78+
79+
キーボード操作で、モーダルダイアログ内の「閉じる」ボタン (見た目は「×」と表示されているボタン) を押す
80+
81+
## 期待される結果 3
82+
83+
ダイアログが閉じ、フォーカスが「メーリングリストに登録してください！」ボタンに移る
84+
85+
# テスト実施時の注意点 (視覚閲覧環境)
86+
87+
ダイアログ内のフォーム送信は機能せず、「登録」ボタンを押しても何も起こらないのが正しい (送信のテストは不要である)
88+
89+
# テスト手順と期待される結果 (音声閲覧環境)
90+
91+
## テスト手順 1
92+
93+
「メーリングリストに登録してください！」ボタンを押す
94+
95+
## 期待される結果 1
96+
97+
「メーリングリストに登録」というモーダルダイアログが開き、フォーカスがモーダルダイアログ内に移動する
98+
99+
## テスト手順 2
100+
101+
モーダルダイアログ上でフォーカスを移動する。それを繰り返す
102+
103+
## 期待される結果 2
104+
105+
フォーカスはモーダルダイアログ内の入力欄やボタンに移るが、モーダルダイアログの外には出ない (「メーリングリストに登録してください！」ボタンや「ウェブアクセシビリティ基盤委員会」というリンクにフォーカスが移らない)
106+
107+
## テスト手順 3
108+
109+
モーダルダイアログ内の「閉じる」ボタンを押す
110+
111+
## 期待される結果 3
112+
113+
ダイアログが閉じ、フォーカスが「メーリングリストに登録してください！」ボタンに移る
114+
115+
## テスト手順 4
116+
117+
フォーカスを移動する
118+
119+
## 期待される結果 4
120+
121+
「ウェブアクセシビリティ基盤委員会」というリンクにフォーカスが移る (ダイアログ内にフォーカスが移らない)
122+
123+
# テスト実施時の注意点 (音声閲覧環境)
124+
125+
ダイアログ内のフォーム送信は機能せず、「登録」ボタンを押しても何も起こらないのが正しい (送信のテストは不要である)
126+
127+
# 関連する要素や属性
128+
129+
dialog要素、aria-labelledby属性、aria-label属性

0 commit comments

Comments
 (0)