Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Over-translation in ja #25469

Merged
merged 4 commits into from
Jan 17, 2025
Merged

Over-translation in ja #25469

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9daa7d6
Over-translation
ogasawara-k Jan 16, 2025
9c1a86a
Merge branch 'main' into patch-1
ogasawara-k Jan 16, 2025
5d7871a
Merge branch 'main' into patch-1
ogasawara-k Jan 16, 2025
4fb744d
Merge branch 'main' into patch-1
ogasawara-k Jan 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions ...ja/learn_web_development/core/frameworks_libraries/react_accessibility/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ import { useRef, useState } from "react";

`useRef()` は、単一のプロパティ `current` を持つオブジェクトを作成します。参照には任意の値を格納でき、後でその値を見ていくことができます。 さらに、 DOM 要素への参照を格納することもでき、まさにこれから行うのがそれです。

次に、`Todo()` 関数内の `useState()` フックの下に、 2 つの新しい定数を作成します。それぞれの定数は参照であるべきです。 1 つはビューテンプレートの「編集」ボタン用、もう 1 つは編集テンプレートの編集フィールド用です。
次に、`Todo()` 関数内の `useState()` フックの下に、 2 つの新しい定数を作成します。それぞれの定数は参照であるべきです。 1 つはビューテンプレートの "Edit" ボタン用、もう 1 つは編集テンプレートの編集フィールド用です。

```jsx
const editFieldRef = useRef(null);
Expand Down Expand Up @@ -170,9 +170,9 @@ useEffect(() => {

これらの変更により、`isEditing` が true の場合、React は `editFieldRef` の現在の値を読み取り、ブラウザーのフォーカスがそこに移されるようになります。また、 2 つ目の引数として配列を `useEffect()` に渡します。 この配列は、`useEffect()` が依存すべき値のリストです。 これらの値が含まれている場合、 `useEffect()` はそれらの値のいずれかが変更された場合にのみ実行されます。 私たちは、 `isEditing` の値が変更された場合にのみフォーカスを変更したいのです。

試してみましょう。 <kbd>Tab</kbd> キーを使用して「編集」ボタンのいずれかに移動し、<kbd>Enter</kbd> キーを押します。 `<Todo />` 部分が編集テンプレートに切り替わり、ブラウザーのフォーカスインジケーターが `<input>` 要素の周りに現れるはずです。
試してみましょう。 <kbd>Tab</kbd> キーを使用して "Edit" ボタンのいずれかに移動し、<kbd>Enter</kbd> キーを押します。 `<Todo />` 部分が編集テンプレートに切り替わり、ブラウザーのフォーカスインジケーターが `<input>` 要素の周りに現れるはずです。

### フォーカスを編集ボタンに戻す
### フォーカスを "Edit" ボタンに戻す

一見すると、編集が保存されたり取り消されたりした際に、 React が "Edit" ボタンにフォーカスを戻すようにするのは、簡単そうに見えます。確かに、 `isEditing` が `false` の場合に、 `useEffect` に条件を追加して編集ボタンにフォーカスを当てることはできますか？ それでは、これで試してみましょう。 `useEffect()` の呼び出しを次のように更新してください。

Expand Down Expand Up @@ -258,7 +258,7 @@ useEffect(() => {

これで `useEffect()` のロジックが `wasEditing` に依存することになるので、依存性の配列にそれを指定しました。

キーボードを使用して、`<Todo />` 部分の「編集」と「取り消される可能性」ボタンをアクティブにしてみてください。この章の始めに説明した問題がなく、ブラウザーのフォーカスインジケーターが適切に移されるのがわかるでしょう。
キーボードを使用して、`<Todo />` 部分の "Edit" と "Cancel" ボタンをアクティブにしてみてください。この章の始めに説明した問題がなく、ブラウザーのフォーカスインジケーターが適切に移されるのがわかるでしょう。

## ユーザーがタスクを削除する際にフォーカス

Expand Down
Loading