Skip to content

Commit

Permalink
improve focus util
Browse files Browse the repository at this point in the history
  • Loading branch information
@kentcdodds
kentcdodds committed Jul 25, 2023
1 parent cc7f2b2 commit 6d7c504
Show file tree
Hide file tree
Showing 18 changed files with 54 additions and 138 deletions.
5 changes: 3 additions & 2 deletions ...s/02.accessibility/03.problem.focus/app/routes/users+/$username_+/notes.$noteId_.edit.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,9 +131,10 @@ export default function NoteEdit() {
// - the formRef.current is truthy
// - the actionData is in an error status
// 🐨 if the formRef.current matches the query [aria-invalid="true"] then
// focus on the form otherwise, check formRef.current.elements and focus on
// the first element that matches the query [aria-invalid="true"]
// focus on the form otherwise, run formRef.current.querySelector to find the
// first [aria-invalid="true"] HTMLElement and focus that one instead.
// 📜 https://mdn.io/element.matches
// 🦺 You may need to add an instanceof HTMLElement check to be able to focus it.

return (
<div className="absolute inset-0">
Expand Down
11 changes: 3 additions & 8 deletions .../02.accessibility/03.solution.focus/app/routes/users+/$username_+/notes.$noteId_.edit.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,14 +132,9 @@ export default function NoteEdit() {
if (formEl.matches('[aria-invalid="true"]')) {
formEl.focus()
} else {
for (const formElement of formEl.elements) {
if (
formElement.matches('[aria-invalid="true"]') &&
formElement instanceof HTMLElement
) {
formElement.focus()
break
}
const firstInvalid = formEl.querySelector('[aria-invalid="true"]')
if (firstInvalid instanceof HTMLElement) {
firstInvalid.focus()
}
}
}, [actionData])
Expand Down
11 changes: 3 additions & 8 deletions exercises/03.schema-validation/01.problem.zod/app/utils/misc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,14 +93,9 @@ export function useFocusInvalid(
if (formEl.matches('[aria-invalid="true"]')) {
formEl.focus()
} else {
for (const formElement of formEl.elements) {
if (
formElement.matches('[aria-invalid="true"]') &&
formElement instanceof HTMLElement
) {
formElement.focus()
break
}
const firstInvalid = formEl.querySelector('[aria-invalid="true"]')
if (firstInvalid instanceof HTMLElement) {
firstInvalid.focus()
}
}
}, [formEl, hasErrors])
Expand Down
11 changes: 3 additions & 8 deletions exercises/03.schema-validation/01.solution.zod/app/utils/misc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,14 +93,9 @@ export function useFocusInvalid(
if (formEl.matches('[aria-invalid="true"]')) {
formEl.focus()
} else {
for (const formElement of formEl.elements) {
if (
formElement.matches('[aria-invalid="true"]') &&
formElement instanceof HTMLElement
) {
formElement.focus()
break
}
const firstInvalid = formEl.querySelector('[aria-invalid="true"]')
if (firstInvalid instanceof HTMLElement) {
firstInvalid.focus()
}
}
}, [formEl, hasErrors])
Expand Down
11 changes: 3 additions & 8 deletions exercises/03.schema-validation/02.problem.conform-action/app/utils/misc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,14 +93,9 @@ export function useFocusInvalid(
if (formEl.matches('[aria-invalid="true"]')) {
formEl.focus()
} else {
for (const formElement of formEl.elements) {
if (
formElement.matches('[aria-invalid="true"]') &&
formElement instanceof HTMLElement
) {
formElement.focus()
break
}
const firstInvalid = formEl.querySelector('[aria-invalid="true"]')
if (firstInvalid instanceof HTMLElement) {
firstInvalid.focus()
}
}
}, [formEl, hasErrors])
Expand Down
11 changes: 3 additions & 8 deletions exercises/03.schema-validation/02.solution.conform-action/app/utils/misc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,14 +93,9 @@ export function useFocusInvalid(
if (formEl.matches('[aria-invalid="true"]')) {
formEl.focus()
} else {
for (const formElement of formEl.elements) {
if (
formElement.matches('[aria-invalid="true"]') &&
formElement instanceof HTMLElement
) {
formElement.focus()
break
}
const firstInvalid = formEl.querySelector('[aria-invalid="true"]')
if (firstInvalid instanceof HTMLElement) {
firstInvalid.focus()
}
}
}, [formEl, hasErrors])
Expand Down
11 changes: 3 additions & 8 deletions exercises/03.schema-validation/03.problem.conform-form/app/utils/misc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,14 +93,9 @@ export function useFocusInvalid(
if (formEl.matches('[aria-invalid="true"]')) {
formEl.focus()
} else {
for (const formElement of formEl.elements) {
if (
formElement.matches('[aria-invalid="true"]') &&
formElement instanceof HTMLElement
) {
formElement.focus()
break
}
const firstInvalid = formEl.querySelector('[aria-invalid="true"]')
if (firstInvalid instanceof HTMLElement) {
firstInvalid.focus()
}
}
}, [formEl, hasErrors])
Expand Down
11 changes: 3 additions & 8 deletions exercises/03.schema-validation/03.solution.conform-form/app/utils/misc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,14 +93,9 @@ export function useFocusInvalid(
if (formEl.matches('[aria-invalid="true"]')) {
formEl.focus()
} else {
for (const formElement of formEl.elements) {
if (
formElement.matches('[aria-invalid="true"]') &&
formElement instanceof HTMLElement
) {
formElement.focus()
break
}
const firstInvalid = formEl.querySelector('[aria-invalid="true"]')
if (firstInvalid instanceof HTMLElement) {
firstInvalid.focus()
}
}
}, [formEl, hasErrors])
Expand Down
11 changes: 3 additions & 8 deletions exercises/04.file-upload/01.problem.multi-part/app/utils/misc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,14 +93,9 @@ export function useFocusInvalid(
if (formEl.matches('[aria-invalid="true"]')) {
formEl.focus()
} else {
for (const formElement of formEl.elements) {
if (
formElement.matches('[aria-invalid="true"]') &&
formElement instanceof HTMLElement
) {
formElement.focus()
break
}
const firstInvalid = formEl.querySelector('[aria-invalid="true"]')
if (firstInvalid instanceof HTMLElement) {
firstInvalid.focus()
}
}
}, [formEl, hasErrors])
Expand Down
11 changes: 3 additions & 8 deletions exercises/04.file-upload/01.solution.multi-part/app/utils/misc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,14 +93,9 @@ export function useFocusInvalid(
if (formEl.matches('[aria-invalid="true"]')) {
formEl.focus()
} else {
for (const formElement of formEl.elements) {
if (
formElement.matches('[aria-invalid="true"]') &&
formElement instanceof HTMLElement
) {
formElement.focus()
break
}
const firstInvalid = formEl.querySelector('[aria-invalid="true"]')
if (firstInvalid instanceof HTMLElement) {
firstInvalid.focus()
}
}
}, [formEl, hasErrors])
Expand Down
11 changes: 3 additions & 8 deletions exercises/04.file-upload/02.problem.file-validation/app/utils/misc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,14 +93,9 @@ export function useFocusInvalid(
if (formEl.matches('[aria-invalid="true"]')) {
formEl.focus()
} else {
for (const formElement of formEl.elements) {
if (
formElement.matches('[aria-invalid="true"]') &&
formElement instanceof HTMLElement
) {
formElement.focus()
break
}
const firstInvalid = formEl.querySelector('[aria-invalid="true"]')
if (firstInvalid instanceof HTMLElement) {
firstInvalid.focus()
}
}
}, [formEl, hasErrors])
Expand Down
11 changes: 3 additions & 8 deletions exercises/04.file-upload/02.solution.file-validation/app/utils/misc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,14 +93,9 @@ export function useFocusInvalid(
if (formEl.matches('[aria-invalid="true"]')) {
formEl.focus()
} else {
for (const formElement of formEl.elements) {
if (
formElement.matches('[aria-invalid="true"]') &&
formElement instanceof HTMLElement
) {
formElement.focus()
break
}
const firstInvalid = formEl.querySelector('[aria-invalid="true"]')
if (firstInvalid instanceof HTMLElement) {
firstInvalid.focus()
}
}
}, [formEl, hasErrors])
Expand Down
11 changes: 3 additions & 8 deletions exercises/05.complex-structures/01.problem.nested/app/utils/misc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,14 +93,9 @@ export function useFocusInvalid(
if (formEl.matches('[aria-invalid="true"]')) {
formEl.focus()
} else {
for (const formElement of formEl.elements) {
if (
formElement.matches('[aria-invalid="true"]') &&
formElement instanceof HTMLElement
) {
formElement.focus()
break
}
const firstInvalid = formEl.querySelector('[aria-invalid="true"]')
if (firstInvalid instanceof HTMLElement) {
firstInvalid.focus()
}
}
}, [formEl, hasErrors])
Expand Down
11 changes: 3 additions & 8 deletions exercises/05.complex-structures/01.solution.nested/app/utils/misc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,14 +93,9 @@ export function useFocusInvalid(
if (formEl.matches('[aria-invalid="true"]')) {
formEl.focus()
} else {
for (const formElement of formEl.elements) {
if (
formElement.matches('[aria-invalid="true"]') &&
formElement instanceof HTMLElement
) {
formElement.focus()
break
}
const firstInvalid = formEl.querySelector('[aria-invalid="true"]')
if (firstInvalid instanceof HTMLElement) {
firstInvalid.focus()
}
}
}, [formEl, hasErrors])
Expand Down
11 changes: 3 additions & 8 deletions exercises/05.complex-structures/02.problem.lists/app/utils/misc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,14 +93,9 @@ export function useFocusInvalid(
if (formEl.matches('[aria-invalid="true"]')) {
formEl.focus()
} else {
for (const formElement of formEl.elements) {
if (
formElement.matches('[aria-invalid="true"]') &&
formElement instanceof HTMLElement
) {
formElement.focus()
break
}
const firstInvalid = formEl.querySelector('[aria-invalid="true"]')
if (firstInvalid instanceof HTMLElement) {
firstInvalid.focus()
}
}
}, [formEl, hasErrors])
Expand Down
11 changes: 3 additions & 8 deletions exercises/05.complex-structures/02.solution.lists/app/utils/misc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,14 +93,9 @@ export function useFocusInvalid(
if (formEl.matches('[aria-invalid="true"]')) {
formEl.focus()
} else {
for (const formElement of formEl.elements) {
if (
formElement.matches('[aria-invalid="true"]') &&
formElement instanceof HTMLElement
) {
formElement.focus()
break
}
const firstInvalid = formEl.querySelector('[aria-invalid="true"]')
if (firstInvalid instanceof HTMLElement) {
firstInvalid.focus()
}
}
}, [formEl, hasErrors])
Expand Down
11 changes: 3 additions & 8 deletions exercises/05.complex-structures/03.problem.add-remove/app/utils/misc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,14 +93,9 @@ export function useFocusInvalid(
if (formEl.matches('[aria-invalid="true"]')) {
formEl.focus()
} else {
for (const formElement of formEl.elements) {
if (
formElement.matches('[aria-invalid="true"]') &&
formElement instanceof HTMLElement
) {
formElement.focus()
break
}
const firstInvalid = formEl.querySelector('[aria-invalid="true"]')
if (firstInvalid instanceof HTMLElement) {
firstInvalid.focus()
}
}
}, [formEl, hasErrors])
Expand Down
11 changes: 3 additions & 8 deletions exercises/05.complex-structures/03.solution.add-remove/app/utils/misc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,14 +93,9 @@ export function useFocusInvalid(
if (formEl.matches('[aria-invalid="true"]')) {
formEl.focus()
} else {
for (const formElement of formEl.elements) {
if (
formElement.matches('[aria-invalid="true"]') &&
formElement instanceof HTMLElement
) {
formElement.focus()
break
}
const firstInvalid = formEl.querySelector('[aria-invalid="true"]')
if (firstInvalid instanceof HTMLElement) {
firstInvalid.focus()
}
}
}, [formEl, hasErrors])
Expand Down

0 comments on commit 6d7c504

Please sign in to comment.