Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings
This repository was archived by the owner on Mar 30, 2022. It is now read-only.

Commit 58b00e8

Browse files
committed
improve accessibility and style
1 parent cc5d916 commit 58b00e8

File tree

5 files changed

+55
-36
lines changed

5 files changed

+55
-36
lines changed

‎src/features/count/CountDiv.tsx

Lines changed: 24 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ const numDivStyles = css`
1717
& > * {
1818
margin: 0 ${rem(5)};
1919
}
20-
& > input {
20+
& label input {
21+
margin-left: ${rem(5 * 2)};
2122
max-width: ${rem(50)};
2223
width: 100%;
2324
height: ${rem(15)};
@@ -34,26 +35,34 @@ const CountDiv: FC = () => {
3435
return (
3536
<div>
3637
<div css={numDivStyles}>
37-
<input
38-
type="number"
39-
onChange={(e) => {
40-
changeAdd1(parseInt(e.target.value, 10));
41-
}}
42-
value={add1}
43-
/>
38+
<label htmlFor="add1">
39+
number1:
40+
<input
41+
type="number"
42+
id="add1"
43+
onChange={(e) => {
44+
changeAdd1(parseInt(e.target.value, 10));
45+
}}
46+
value={add1}
47+
/>
48+
</label>
4449
<button type="button" onClick={() => dispatch(incrementFirst(add1))}>
4550
add first number
4651
</button>
4752
<p>{num1}</p>
4853
</div>
4954
<div css={numDivStyles}>
50-
<input
51-
type="number"
52-
onChange={(e) => {
53-
changeAdd2(parseInt(e.target.value, 10));
54-
}}
55-
value={add2}
56-
/>
55+
<label htmlFor="add2">
56+
number2:
57+
<input
58+
type="number"
59+
id="add2"
60+
onChange={(e) => {
61+
changeAdd2(parseInt(e.target.value, 10));
62+
}}
63+
value={add2}
64+
/>
65+
</label>
5766
<button type="button" onClick={() => dispatch(incrementSecond(add2))}>
5867
add second number
5968
</button>

‎src/features/text/TextDiv.tsx

Lines changed: 25 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ const strDivStyles = css`
1717
& > * {
1818
margin: 0 ${rem(5)};
1919
}
20-
& > input {
20+
& label input {
21+
margin-left: ${rem(5 * 2)};
2122
max-width: ${rem(50)};
2223
width: 100%;
2324
height: ${rem(15)};
@@ -34,26 +35,35 @@ const TextDiv: FC = () => {
3435
return (
3536
<div>
3637
<div css={strDivStyles}>
37-
<input
38-
type="text"
39-
onChange={(e) => {
40-
changeInput1(e.target.value);
41-
}}
42-
value={input1}
43-
/>
38+
<label htmlFor="input1">
39+
text1:
40+
<input
41+
type="text"
42+
id="input1"
43+
onChange={(e) => {
44+
changeInput1(e.target.value);
45+
}}
46+
value={input1}
47+
/>
48+
</label>
49+
4450
<button type="button" onClick={() => dispatch(updateFirst(input1))}>
4551
change first text
4652
</button>
4753
<p>{text1}</p>
4854
</div>
4955
<div css={strDivStyles}>
50-
<input
51-
type="text"
52-
onChange={(e) => {
53-
changeInput2(e.target.value);
54-
}}
55-
value={input2}
56-
/>
56+
<label htmlFor="input2">
57+
text2:
58+
<input
59+
type="text"
60+
id="input2"
61+
onChange={(e) => {
62+
changeInput2(e.target.value);
63+
}}
64+
value={input2}
65+
/>
66+
</label>
5767
<button type="button" onClick={() => dispatch(updateSecond(input2))}>
5868
change second text
5969
</button>

‎src/pages/db.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@ import Link from 'features/link/Link';
55
import DbComponent from 'features/db/DbTest';
66

77
const IndexPage: NextPage<{ [key in string]?: string }> = () => (
8-
<div>
8+
<main>
99
<ManifestHead title="github_pwa static-path" hrefCanonical="/db" />
1010
<DbComponent />
1111
<Link href="/index/1">
1212
<a>index/1</a>
1313
</Link>
14-
</div>
14+
</main>
1515
);
1616

1717
export default IndexPage;

‎src/pages/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,15 @@ import ManifestHead from 'features/head/ManifestHead';
55
import Link from 'features/link/Link';
66

77
const IndexPage: NextPage<{ [key in string]?: string }> = ({ ...appProps }) => (
8-
<div>
8+
<main>
99
<ManifestHead title="github_pwa static-path" hrefCanonical="/" />
1010
<p>{`Props from _app.tsx: ${JSON.stringify(appProps)}`}</p>
1111
<p>{`page process env: ${process.env.TEST_PAGE_VAR}`}</p>
1212
<CountDiv />
1313
<Link href="/index/1">
1414
<a>index/1</a>
1515
</Link>
16-
</div>
16+
</main>
1717
);
1818

1919
export default IndexPage;

‎src/pages/index/[id].tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export interface Props {
1212
const IndexPage: NextPage<Props> = ({ id, ...appProps }) => {
1313
const router = useRouter();
1414
return (
15-
<div>
15+
<main>
1616
<ManifestHead
1717
title="github_pwa dynamic-path"
1818
hrefCanonical={`/index/${id}`}
@@ -24,7 +24,7 @@ const IndexPage: NextPage<Props> = ({ id, ...appProps }) => {
2424
<Link href="/">
2525
<a>index</a>
2626
</Link>
27-
</div>
27+
</main>
2828
);
2929
};
3030

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /