Skip to content

Commit 102b2ef

Browse files
ymrlymrl
authored
Merge pull request #40 from ymrl/a11y_check_practice_2024
👍 accessibility check practice 2024
2 parents 94ec05a + 0322730 commit 102b2ef

File tree

3 files changed

+76
-65
lines changed

3 files changed

+76
-65
lines changed

‎src/components/Layout.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -63,9 +63,11 @@ export const LayoutFunc: React.ForwardRefRenderFunction<
6363
HTMLElement,
6464
{ pathname: string; children: ReactNode }
6565
> = ({ children, pathname }, ref) => {
66-
const mainAs = pathname.match(/^\/?landmark\/no-main\/?/)
67-
? 'section'
68-
: 'main';
66+
const mainAs =
67+
pathname.match(/^\/?landmark\/no-main\/?/) ||
68+
pathname.match(/^\/?practice\/?$/)
69+
? 'section'
70+
: 'main';
6971
return (
7072
<>
7173
<Head>

‎src/components/examples/ErrorField.tsx‎

Lines changed: 28 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react';
22
import { TextField, FormItem, FormLabel, Button, P } from '../parts';
3-
import styled from 'styled-components';
3+
import { styled } from 'styled-components';
44

55
const ErrorMessage = styled(P)`
66
color: #dc1e32;
@@ -14,39 +14,32 @@ export const FieldWithBadErrorMessage = ({
1414
const [message, setMessage] = React.useState('');
1515

1616
return (
17-
<form
18-
onSubmit={(e) => {
19-
/* no-op */
20-
e.preventDefault();
21-
}}
22-
>
23-
<FormItem style={{ marginTop: '1rem' }}>
24-
{/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
25-
<label>
26-
<FormLabel>郵便番号</FormLabel>
27-
<TextField
28-
type="text"
29-
value={value}
30-
onChange={(e) => setValue(e.target.value)}
31-
placeholder="１４１-００３２"
32-
aria-label={fieldAriaLabel}
33-
/>
34-
</label>
35-
<Button
36-
type="button"
37-
style={{ marginLeft: '1rem' }}
38-
onClick={() =>
39-
setMessage(
40-
!value.match(/^[０-９]{3}-[０-９]{4}$/)
41-
? '入力形式が正しくありません'
42-
: ''
43-
)
44-
}
45-
>
46-
入力内容の確認
47-
</Button>
48-
{message && <ErrorMessage>{message}</ErrorMessage>}
49-
</FormItem>
50-
</form>
17+
<FormItem style={{ marginTop: '1rem' }}>
18+
{/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
19+
<label>
20+
<FormLabel>郵便番号</FormLabel>
21+
<TextField
22+
type="text"
23+
value={value}
24+
onChange={(e) => setValue(e.target.value)}
25+
placeholder="１４１-００３２"
26+
aria-label={fieldAriaLabel}
27+
/>
28+
</label>
29+
<Button
30+
type="button"
31+
style={{ marginLeft: '1rem' }}
32+
onClick={() =>
33+
setMessage(
34+
!value.match(/^[０-９]{3}-[０-９]{4}$/)
35+
? '入力形式が正しくありません'
36+
: ''
37+
)
38+
}
39+
>
40+
入力内容の確認
41+
</Button>
42+
{message && <ErrorMessage>{message}</ErrorMessage>}
43+
</FormItem>
5144
);
5245
};

‎src/pages/practice/index.tsx‎

Lines changed: 43 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,20 @@ import * as React from 'react';
22
import { Title } from '../../components/Title';
33
import {
44
Button,
5+
CheckBox,
56
FormItem,
7+
FormLabel,
68
H2,
79
H3,
810
H4,
911
IconButton,
1012
Li,
11-
ModalDialog,
1213
P,
1314
RadioButton,
15+
TextField,
1416
TextLink,
1517
Ul,
1618
} from '../../components/parts';
17-
import { NoLabel } from '../../components/examples/form';
1819
import { publicPath } from '../../utils/publicPath';
1920
import {
2021
MdAdd,
@@ -28,9 +29,7 @@ import {
2829
ExampleContainer,
2930
FieldWithBadErrorMessage,
3031
} from '../../components/examples';
31-
import styled from 'styled-components';
32-
33-
const modalDelay = 5;
32+
import { styled } from 'styled-components';
3433

3534
const SmallButton = styled.button`
3635
width: 1rem;
@@ -59,6 +58,10 @@ const SmallButton = styled.button`
5958
}
6059
`;
6160

61+
const GrayText = styled.p`
62+
color: #999;
63+
`;
64+
6265
const Practice = (): JSX.Element => {
6366
React.useEffect(() => {
6467
const html = document.getElementsByTagName('html')[0];
@@ -84,28 +87,10 @@ const Practice = (): JSX.Element => {
8487
| 'overseas'
8588
>();
8689
const [counter, setCounter] = React.useState(12345);
87-
const [modalOpen, setModalOpen] = React.useState(false);
88-
const intervalRef = React.useRef<NodeJS.Timeout | null>(null);
89-
React.useEffect(() => {
90-
if (!intervalRef.current) {
91-
intervalRef.current = setTimeout(() => {
92-
setModalOpen(true);
93-
}, modalDelay * 1000);
94-
}
95-
return () => {
96-
if (intervalRef.current) {
97-
clearTimeout(intervalRef.current);
98-
}
99-
};
100-
}, []);
10190

10291
return (
10392
<>
10493
<Title>アクセシビリティチェックの練習ページ</Title>
105-
<ModalDialog open={modalOpen} onClose={() => setModalOpen(false)}>
106-
<H2>見てくれてありがとう</H2>
107-
<P>閲覧しはじめて{modalDelay}秒経ちました</P>
108-
</ModalDialog>
10994

11095
<H2>アクセシビリティチェックの練習ページ</H2>
11196
<P>
@@ -197,11 +182,34 @@ const Practice = (): JSX.Element => {
197182
</ExampleContainer>
198183

199184
<H3 as="h4">フォーム</H3>
200-
<NoLabel />
201-
<ExampleContainer>
202-
<FieldWithBadErrorMessage fieldAriaLabel="ご住所" />
203-
</ExampleContainer>
204185
<ExampleContainer>
186+
<FormItem>
187+
<label htmlFor="name">
188+
<FormLabel>氏名</FormLabel>
189+
</label>
190+
<TextField type="text" />
191+
<GrayText>姓と名の間には全角スペースを入れてください</GrayText>
192+
</FormItem>
193+
<FormItem>
194+
<FormLabel>メールアドレス</FormLabel>
195+
<TextField type="email" id="name" />
196+
</FormItem>
197+
<FormItem>
198+
<fieldset>
199+
<legend>
200+
<FormLabel>性別</FormLabel>
201+
</legend>
202+
<RadioButton name="sex" value="1">
203+
男性
204+
</RadioButton>
205+
<RadioButton name="sex" value="2">
206+
女性
207+
</RadioButton>
208+
<RadioButton name="sex" value="9">
209+
その他
210+
</RadioButton>
211+
</fieldset>
212+
</FormItem>
205213
<FormItem>
206214
<fieldset>
207215
<legend>年代</legend>
@@ -372,6 +380,14 @@ const Practice = (): JSX.Element => {
372380
</RadioButton>
373381
</fieldset>
374382
</FormItem>
383+
<FormItem>
384+
<CheckBox name="toc" value="agree">
385+
利用規約に同意する
386+
</CheckBox>
387+
</FormItem>
388+
</ExampleContainer>
389+
<ExampleContainer>
390+
<FieldWithBadErrorMessage fieldAriaLabel="postal-code" />
375391
</ExampleContainer>
376392
<div style={{ marginTop: '1rem' }}>
377393
<Button

0 commit comments

Comments
 (0)