Merge pull request #40 from ymrl/a11y_check_practice_2024

👍 accessibility check practice 2024
freee · Jun 5, 2024 · 102b2ef · 102b2ef
2 parents 94ec05a + 0322730
commit 102b2ef
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 65 deletions.
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -63,9 +63,11 @@ export const LayoutFunc: React.ForwardRefRenderFunction<
   HTMLElement,
   { pathname: string; children: ReactNode }
 > = ({ children, pathname }, ref) => {
-  const mainAs = pathname.match(/^\/?landmark\/no-main\/?/)
-    ? 'section'
-    : 'main';
+  const mainAs =
+    pathname.match(/^\/?landmark\/no-main\/?/) ||
+    pathname.match(/^\/?practice\/?$/)
+      ? 'section'
+      : 'main';
   return (
     <>
       <Head>

diff --git a/src/components/examples/ErrorField.tsx b/src/components/examples/ErrorField.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { TextField, FormItem, FormLabel, Button, P } from '../parts';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 const ErrorMessage = styled(P)`
   color: #dc1e32;
@@ -14,39 +14,32 @@ export const FieldWithBadErrorMessage = ({
   const [message, setMessage] = React.useState('');
 
   return (
-    <form
-      onSubmit={(e) => {
-        /* no-op */
-        e.preventDefault();
-      }}
-    >
-      <FormItem style={{ marginTop: '1rem' }}>
-        {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-        <label>
-          <FormLabel>郵便番号</FormLabel>
-          <TextField
-            type="text"
-            value={value}
-            onChange={(e) => setValue(e.target.value)}
-            placeholder="１４１-００３２"
-            aria-label={fieldAriaLabel}
-          />
-        </label>
-        <Button
-          type="button"
-          style={{ marginLeft: '1rem' }}
-          onClick={() =>
-            setMessage(
-              !value.match(/^[０-９]{3}-[０-９]{4}$/)
-                ? '入力形式が正しくありません'
-                : ''
-            )
-          }
-        >
-          入力内容の確認
-        </Button>
-        {message && <ErrorMessage>{message}</ErrorMessage>}
-      </FormItem>
-    </form>
+    <FormItem style={{ marginTop: '1rem' }}>
+      {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+      <label>
+        <FormLabel>郵便番号</FormLabel>
+        <TextField
+          type="text"
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          placeholder="１４１-００３２"
+          aria-label={fieldAriaLabel}
+        />
+      </label>
+      <Button
+        type="button"
+        style={{ marginLeft: '1rem' }}
+        onClick={() =>
+          setMessage(
+            !value.match(/^[０-９]{3}-[０-９]{4}$/)
+              ? '入力形式が正しくありません'
+              : ''
+          )
+        }
+      >
+        入力内容の確認
+      </Button>
+      {message && <ErrorMessage>{message}</ErrorMessage>}
+    </FormItem>
   );
 };
diff --git a/src/pages/practice/index.tsx b/src/pages/practice/index.tsx
@@ -2,19 +2,20 @@ import * as React from 'react';
 import { Title } from '../../components/Title';
 import {
   Button,
+  CheckBox,
   FormItem,
+  FormLabel,
   H2,
   H3,
   H4,
   IconButton,
   Li,
-  ModalDialog,
   P,
   RadioButton,
+  TextField,
   TextLink,
   Ul,
 } from '../../components/parts';
-import { NoLabel } from '../../components/examples/form';
 import { publicPath } from '../../utils/publicPath';
 import {
   MdAdd,
@@ -28,9 +29,7 @@ import {
   ExampleContainer,
   FieldWithBadErrorMessage,
 } from '../../components/examples';
-import styled from 'styled-components';
-
-const modalDelay = 5;
+import { styled } from 'styled-components';
 
 const SmallButton = styled.button`
   width: 1rem;
@@ -59,6 +58,10 @@ const SmallButton = styled.button`
   }
 `;
 
+const GrayText = styled.p`
+  color: #999;
+`;
+
 const Practice = (): JSX.Element => {
   React.useEffect(() => {
     const html = document.getElementsByTagName('html')[0];
@@ -84,28 +87,10 @@ const Practice = (): JSX.Element => {
     | 'overseas'
   >();
   const [counter, setCounter] = React.useState(12345);
-  const [modalOpen, setModalOpen] = React.useState(false);
-  const intervalRef = React.useRef<NodeJS.Timeout | null>(null);
-  React.useEffect(() => {
-    if (!intervalRef.current) {
-      intervalRef.current = setTimeout(() => {
-        setModalOpen(true);
-      }, modalDelay * 1000);
-    }
-    return () => {
-      if (intervalRef.current) {
-        clearTimeout(intervalRef.current);
-      }
-    };
-  }, []);
 
   return (
     <>
       <Title>アクセシビリティチェックの練習ページ</Title>
-      <ModalDialog open={modalOpen} onClose={() => setModalOpen(false)}>
-        <H2>見てくれてありがとう</H2>
-        <P>閲覧しはじめて{modalDelay}秒経ちました</P>
-      </ModalDialog>
 
       <H2>アクセシビリティチェックの練習ページ</H2>
       <P>
@@ -197,11 +182,34 @@ const Practice = (): JSX.Element => {
       </ExampleContainer>
 
       <H3 as="h4">フォーム</H3>
-      <NoLabel />
-      <ExampleContainer>
-        <FieldWithBadErrorMessage fieldAriaLabel="ご住所" />
-      </ExampleContainer>
       <ExampleContainer>
+        <FormItem>
+          <label htmlFor="name">
+            <FormLabel>氏名</FormLabel>
+          </label>
+          <TextField type="text" />
+          <GrayText>姓と名の間には全角スペースを入れてください</GrayText>
+        </FormItem>
+        <FormItem>
+          <FormLabel>メールアドレス</FormLabel>
+          <TextField type="email" id="name" />
+        </FormItem>
+        <FormItem>
+          <fieldset>
+            <legend>
+              <FormLabel>性別</FormLabel>
+            </legend>
+            <RadioButton name="sex" value="1">
+              男性
+            </RadioButton>
+            <RadioButton name="sex" value="2">
+              女性
+            </RadioButton>
+            <RadioButton name="sex" value="9">
+              その他
+            </RadioButton>
+          </fieldset>
+        </FormItem>
         <FormItem>
           <fieldset>
             <legend>年代</legend>
@@ -372,6 +380,14 @@ const Practice = (): JSX.Element => {
             </RadioButton>
           </fieldset>
         </FormItem>
+        <FormItem>
+          <CheckBox name="toc" value="agree">
+            利用規約に同意する
+          </CheckBox>
+        </FormItem>
+      </ExampleContainer>
+      <ExampleContainer>
+        <FieldWithBadErrorMessage fieldAriaLabel="postal-code" />
       </ExampleContainer>
       <div style={{ marginTop: '1rem' }}>
         <Button