How to Master CSS :focus-visible in Punggol Tuition

When a learner can reproduce a familiar example but a small variation causes confusion, the problem is usually an incomplete model rather than a lack of effort. The fastest useful response is to expose the hidden state and test one boundary at a time.

CSS :focus-visible matches the focused element when the user agent determines that a visible focus indicator should be presented. Unlike :focus, it is deliberately tied to browser heuristics and user needs rather than to one input-device label. Keyboard navigation commonly produces a match; text-entry controls may need an indicator even after pointer focus; scripted focus can inherit the previous indication state; user preferences and newly opened interfaces also matter. The selector helps authors style the indicator, but it does not excuse removing a usable default or ignoring WCAG’s requirement that keyboard-operable interfaces provide a visible focus mode. Mastery means testing complete interaction routes, preserving an obvious indicator across backgrounds and forced-colour settings, and choosing :focus, :focus-visible or :focus-within according to the state the design actually needs. This guide begins with that mechanism, then develops it through worked traces, deliberate mistakes, explained practice and transfer decisions.

The aim is independent reasoning. A learner should be able to predict behaviour, locate the earliest wrong assumption, use a safe diagnostic procedure and defend a design choice in a new project.

Punggol families can use the guide in short sessions around homework, CCAs and rest. The activities are proposed learning exercises, not claims about a physical branch, timetable, class size, fee, school relationship or guaranteed result.

Use disposable data and repositories, preserve backups, and check version-sensitive details against the official source. Current documentation settles a technical contract; observation and explanation turn that contract into usable knowledge.

Find your next learning step

Choose the route that matches the present difficulty. Use the complete index for a systematic course.

Build the model

Chapters 1-4 . Begin here, then continue after the learner can predict, verify and explain.

Use the core tools

Chapters 5-8 . Begin here, then continue after the learner can predict, verify and explain.

Handle boundaries

Chapters 9-12 . Begin here, then continue after the learner can predict, verify and explain.

Debug and verify

Chapters 13-16 . Begin here, then continue after the learner can predict, verify and explain.

Transfer with judgment

Chapters 17-20 . Begin here, then continue after the learner can predict, verify and explain.

Open the full chapter index . Jump to capstone practice . Use the How Studying Works hub . Read the official documentation

Complete chapter index

Chapters 1-4 . Build the model

focus-visible is focus plus an indication decision
focus matches more broadly
Keyboard navigation commonly triggers visible focus
Pointer focus can legitimately differ

Chapters 5-8 . Use the core tools

Text-entry controls may still need indication
User preferences take priority
Scripted movement can carry indicated focus forward
Scripted movement can also remain unindicated

Chapters 9-12 . Handle boundaries

Newly displayed auto-focused controls should be indicated
Keep a real indicator when removing defaults
Outline offset separates the ring from the component
Two-colour indicators survive varied backgrounds

Chapters 13-16 . Debug and verify

Colour alone may be too weak
Forced-colour modes deserve an explicit check
Do not cover the focused element
focus-within styles the containing region

Chapters 17-20 . Transfer with judgment

Disabled controls are not a focus route
Roving tabindex needs one clear active target
Progressive enhancement should preserve a fallback
Choose selectors by the state the component must communicate

CHAPTER 1 OF 20 . Build the model

1. focus-visible is focus plus an indication decision

Back to contents

:focus-visible matches a focused element only when the user agent decides a focus indicator should be shown. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is describing it as a pure keyboard-input detector. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for focus-visible is focus plus an indication decision, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the focus-visible is focus plus an indication decision chapter on CSS :focus-visible, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on describing it as a pure keyboard-input detector. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

button:focus-visible{outline:3px solid #165dff;outline-offset:3px}

Explained result. The rule styles indicated focus; the browser still owns the matching heuristic. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.

Four purposeful transfer cases

Case 1: homework portal. Predict the rule using tabbing through lesson links keeps the current action obvious. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “:focus-visible matches a focused element only when the user agent decides a focus indicator should be shown.” Apply this procedure: State the contract for focus-visible is focus plus an indication decision, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The rule styles indicated focus; the browser still owns the matching heuristic. For the homework portal, add one near-miss that exposes describing it as a pure keyboard-input detector. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 2: reading tracker. Contrast the rule using text fields remain visibly focused when typing is expected. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “:focus-visible matches a focused element only when the user agent decides a focus indicator should be shown.” Apply this procedure: State the contract for focus-visible is focus plus an indication decision, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The rule styles indicated focus; the browser still owns the matching heuristic. For the reading tracker, add one near-miss that exposes describing it as a pure keyboard-input detector. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 3: science quiz. Stress-test the rule using validation moves focus to an error without losing orientation. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “:focus-visible matches a focused element only when the user agent decides a focus indicator should be shown.” Apply this procedure: State the contract for focus-visible is focus plus an indication decision, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The rule styles indicated focus; the browser still owns the matching heuristic. For the science quiz, add one near-miss that exposes describing it as a pure keyboard-input detector. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 4: CCA menu. Explain the rule using roving tabindex exposes one clear keyboard target at a time. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “:focus-visible matches a focused element only when the user agent decides a focus indicator should be shown.” Apply this procedure: State the contract for focus-visible is focus plus an indication decision, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The rule styles indicated focus; the browser still owns the matching heuristic. For the CCA menu, add one near-miss that exposes describing it as a pure keyboard-input detector. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Diagnostic route

Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
Boundary check: create the smallest input that triggers describing it as a pure keyboard-input detector.
Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
Repair check: use the reversible procedure “State the contract for focus-visible is focus plus an indication decision, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS :focus-visible syntax. For this chapter, useful prompts are: “What did you expect from focus-visible is focus plus an indication decision?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing describing it as a pure keyboard-input detector be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny library search with pointer and keyboard routes are compared rather than inferred. Include one ordinary case, one boundary and one deliberate failure caused by describing it as a pure keyboard-input detector. Predict each result before using a tool, then report the first point where observation differs from prediction.

Answer guide. A strong response starts with the rule: :focus-visible matches a focused element only when the user agent decides a focus indicator should be shown. It shows a trace, not only a final value. The ordinary case should demonstrate “The rule styles indicated focus; the browser still owns the matching heuristic.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for focus-visible is focus plus an indication decision, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.

Decision and transfer

For focus-visible is focus plus an indication decision, separate the documented CSS :focus-visible mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

CHAPTER 2 OF 20 . Build the model

2. focus matches more broadly

Back to contents

:focus matches the currently focused element whether the focus arrived through keyboard, pointer, script or another supported route. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is swapping :focus and :focus-visible without considering pointer and text-entry behaviour. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for focus matches more broadly, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the focus matches more broadly chapter on CSS :focus-visible, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on swapping :focus and :focus-visible without considering pointer and text-entry behaviour. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

button:focus{box-shadow:0 0 0 2px transparent}
button:focus-visible{outline:3px solid currentColor}

Explained result. The first rule tracks focus generally; the second supplies the visible focus treatment when indicated. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.

Four purposeful transfer cases

Case 1: science quiz. Contrast the rule using validation moves focus to an error without losing orientation. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “:focus matches the currently focused element whether the focus arrived through keyboard, pointer, script or another supported route.” Apply this procedure: State the contract for focus matches more broadly, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The first rule tracks focus generally; the second supplies the visible focus treatment when indicated. For the science quiz, add one near-miss that exposes swapping :focus and :focus-visible without considering pointer and text-entry behaviour. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 2: CCA menu. Stress-test the rule using roving tabindex exposes one clear keyboard target at a time. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “:focus matches the currently focused element whether the focus arrived through keyboard, pointer, script or another supported route.” Apply this procedure: State the contract for focus matches more broadly, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The first rule tracks focus generally; the second supplies the visible focus treatment when indicated. For the CCA menu, add one near-miss that exposes swapping :focus and :focus-visible without considering pointer and text-entry behaviour. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 3: family form. Explain the rule using custom focus rings survive light, dark and forced-colour contexts. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “:focus matches the currently focused element whether the focus arrived through keyboard, pointer, script or another supported route.” Apply this procedure: State the contract for focus matches more broadly, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The first rule tracks focus generally; the second supplies the visible focus treatment when indicated. For the family form, add one near-miss that exposes swapping :focus and :focus-visible without considering pointer and text-entry behaviour. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 4: library search. Transfer the rule using pointer and keyboard routes are compared rather than inferred. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “:focus matches the currently focused element whether the focus arrived through keyboard, pointer, script or another supported route.” Apply this procedure: State the contract for focus matches more broadly, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The first rule tracks focus generally; the second supplies the visible focus treatment when indicated. For the library search, add one near-miss that exposes swapping :focus and :focus-visible without considering pointer and text-entry behaviour. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Diagnostic route

Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
Boundary check: create the smallest input that triggers swapping :focus and :focus-visible without considering pointer and text-entry behaviour.
Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
Repair check: use the reversible procedure “State the contract for focus matches more broadly, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS :focus-visible syntax. For this chapter, useful prompts are: “What did you expect from focus matches more broadly?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing swapping :focus and :focus-visible without considering pointer and text-entry behaviour be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny test laboratory with dialogs, script focus, disabled controls and nested containers expose boundaries. Include one ordinary case, one boundary and one deliberate failure caused by swapping :focus and :focus-visible without considering pointer and text-entry behaviour. Predict each result before using a tool, then report the first point where observation differs from prediction.

Answer guide. A strong response starts with the rule: :focus matches the currently focused element whether the focus arrived through keyboard, pointer, script or another supported route. It shows a trace, not only a final value. The ordinary case should demonstrate “The first rule tracks focus generally; the second supplies the visible focus treatment when indicated.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for focus matches more broadly, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.

Decision and transfer

For focus matches more broadly, separate the documented CSS :focus-visible mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

After interaction through Tab or another non-pointing input, user-agent guidance recommends indicating the focused element. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is testing only mouse clicks and declaring the ring unnecessary. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Keyboard navigation commonly triggers visible focus, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the Keyboard navigation commonly triggers visible focus chapter on CSS :focus-visible, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on testing only mouse clicks and declaring the ring unnecessary. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

:focus-visible{outline:3px solid #0b6b3a;outline-offset:.2em}

Explained result. A keyboard route should expose an obvious ring on the element that receives focus. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.

Four purposeful transfer cases

Case 1: family form. Stress-test the rule using custom focus rings survive light, dark and forced-colour contexts. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “After interaction through Tab or another non-pointing input, user-agent guidance recommends indicating the focused element.” Apply this procedure: State the contract for Keyboard navigation commonly triggers visible focus, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: A keyboard route should expose an obvious ring on the element that receives focus. For the family form, add one near-miss that exposes testing only mouse clicks and declaring the ring unnecessary. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 2: library search. Explain the rule using pointer and keyboard routes are compared rather than inferred. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “After interaction through Tab or another non-pointing input, user-agent guidance recommends indicating the focused element.” Apply this procedure: State the contract for Keyboard navigation commonly triggers visible focus, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: A keyboard route should expose an obvious ring on the element that receives focus. For the library search, add one near-miss that exposes testing only mouse clicks and declaring the ring unnecessary. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 3: test laboratory. Transfer the rule using dialogs, script focus, disabled controls and nested containers expose boundaries. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “After interaction through Tab or another non-pointing input, user-agent guidance recommends indicating the focused element.” Apply this procedure: State the contract for Keyboard navigation commonly triggers visible focus, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: A keyboard route should expose an obvious ring on the element that receives focus. For the test laboratory, add one near-miss that exposes testing only mouse clicks and declaring the ring unnecessary. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 4: design decision. Predict the rule using :focus-visible is compared with :focus, :focus-within and default user-agent styles. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “After interaction through Tab or another non-pointing input, user-agent guidance recommends indicating the focused element.” Apply this procedure: State the contract for Keyboard navigation commonly triggers visible focus, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: A keyboard route should expose an obvious ring on the element that receives focus. For the design decision, add one near-miss that exposes testing only mouse clicks and declaring the ring unnecessary. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Diagnostic route

Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
Boundary check: create the smallest input that triggers testing only mouse clicks and declaring the ring unnecessary.
Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
Repair check: use the reversible procedure “State the contract for Keyboard navigation commonly triggers visible focus, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS :focus-visible syntax. For this chapter, useful prompts are: “What did you expect from Keyboard navigation commonly triggers visible focus?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing testing only mouse clicks and declaring the ring unnecessary be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny design decision with :focus-visible is compared with :focus, :focus-within and default user-agent styles. Include one ordinary case, one boundary and one deliberate failure caused by testing only mouse clicks and declaring the ring unnecessary. Predict each result before using a tool, then report the first point where observation differs from prediction.

Answer guide. A strong response starts with the rule: After interaction through Tab or another non-pointing input, user-agent guidance recommends indicating the focused element. It shows a trace, not only a final value. The ordinary case should demonstrate “A keyboard route should expose an obvious ring on the element that receives focus.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for Keyboard navigation commonly triggers visible focus, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.

Decision and transfer

For Keyboard navigation commonly triggers visible focus, separate the documented CSS :focus-visible mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

CHAPTER 4 OF 20 . Build the model

4. Pointer focus can legitimately differ

Back to contents

For a pointer-focused element that does not accept keyboard input, a user agent may decide not to indicate focus. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is forcing a universal rule that every click must or must not draw a ring. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Pointer focus can legitimately differ, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the Pointer focus can legitimately differ chapter on CSS :focus-visible, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on forcing a universal rule that every click must or must not draw a ring. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

button:focus-visible{outline:3px solid #7a3e00}

Explained result. A clicked button may not match, while the same button reached by keyboard can match. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.

Four purposeful transfer cases

Case 1: test laboratory. Explain the rule using dialogs, script focus, disabled controls and nested containers expose boundaries. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “For a pointer-focused element that does not accept keyboard input, a user agent may decide not to indicate focus.” Apply this procedure: State the contract for Pointer focus can legitimately differ, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: A clicked button may not match, while the same button reached by keyboard can match. For the test laboratory, add one near-miss that exposes forcing a universal rule that every click must or must not draw a ring. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 2: design decision. Transfer the rule using :focus-visible is compared with :focus, :focus-within and default user-agent styles. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “For a pointer-focused element that does not accept keyboard input, a user agent may decide not to indicate focus.” Apply this procedure: State the contract for Pointer focus can legitimately differ, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: A clicked button may not match, while the same button reached by keyboard can match. For the design decision, add one near-miss that exposes forcing a universal rule that every click must or must not draw a ring. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 3: homework portal. Predict the rule using tabbing through lesson links keeps the current action obvious. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “For a pointer-focused element that does not accept keyboard input, a user agent may decide not to indicate focus.” Apply this procedure: State the contract for Pointer focus can legitimately differ, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: A clicked button may not match, while the same button reached by keyboard can match. For the homework portal, add one near-miss that exposes forcing a universal rule that every click must or must not draw a ring. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 4: reading tracker. Contrast the rule using text fields remain visibly focused when typing is expected. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “For a pointer-focused element that does not accept keyboard input, a user agent may decide not to indicate focus.” Apply this procedure: State the contract for Pointer focus can legitimately differ, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: A clicked button may not match, while the same button reached by keyboard can match. For the reading tracker, add one near-miss that exposes forcing a universal rule that every click must or must not draw a ring. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Diagnostic route

Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
Boundary check: create the smallest input that triggers forcing a universal rule that every click must or must not draw a ring.
Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
Repair check: use the reversible procedure “State the contract for Pointer focus can legitimately differ, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS :focus-visible syntax. For this chapter, useful prompts are: “What did you expect from Pointer focus can legitimately differ?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing forcing a universal rule that every click must or must not draw a ring be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny homework portal with tabbing through lesson links keeps the current action obvious. Include one ordinary case, one boundary and one deliberate failure caused by forcing a universal rule that every click must or must not draw a ring. Predict each result before using a tool, then report the first point where observation differs from prediction.

Answer guide. A strong response starts with the rule: For a pointer-focused element that does not accept keyboard input, a user agent may decide not to indicate focus. It shows a trace, not only a final value. The ordinary case should demonstrate “A clicked button may not match, while the same button reached by keyboard can match.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for Pointer focus can legitimately differ, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.

Decision and transfer

For Pointer focus can legitimately differ, separate the documented CSS :focus-visible mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

CHAPTER 5 OF 20 . Use the core tools

5. Text-entry controls may still need indication

Back to contents

User-agent guidance recommends indicating focus for controls that support keyboard input or would summon a virtual keyboard. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is assuming pointer focus always suppresses :focus-visible. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Text-entry controls may still need indication, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the Text-entry controls may still need indication chapter on CSS :focus-visible, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on assuming pointer focus always suppresses :focus-visible. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

input:focus-visible,textarea:focus-visible{outline:3px solid #165dff;outline-offset:2px}

Explained result. A text field can match after a pointer action because typing location still needs to be clear. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.

Four purposeful transfer cases

Case 1: homework portal. Transfer the rule using tabbing through lesson links keeps the current action obvious. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “User-agent guidance recommends indicating focus for controls that support keyboard input or would summon a virtual keyboard.” Apply this procedure: State the contract for Text-entry controls may still need indication, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: A text field can match after a pointer action because typing location still needs to be clear. For the homework portal, add one near-miss that exposes assuming pointer focus always suppresses :focus-visible. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 2: reading tracker. Predict the rule using text fields remain visibly focused when typing is expected. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “User-agent guidance recommends indicating focus for controls that support keyboard input or would summon a virtual keyboard.” Apply this procedure: State the contract for Text-entry controls may still need indication, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: A text field can match after a pointer action because typing location still needs to be clear. For the reading tracker, add one near-miss that exposes assuming pointer focus always suppresses :focus-visible. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 3: science quiz. Contrast the rule using validation moves focus to an error without losing orientation. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “User-agent guidance recommends indicating focus for controls that support keyboard input or would summon a virtual keyboard.” Apply this procedure: State the contract for Text-entry controls may still need indication, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: A text field can match after a pointer action because typing location still needs to be clear. For the science quiz, add one near-miss that exposes assuming pointer focus always suppresses :focus-visible. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 4: CCA menu. Stress-test the rule using roving tabindex exposes one clear keyboard target at a time. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “User-agent guidance recommends indicating focus for controls that support keyboard input or would summon a virtual keyboard.” Apply this procedure: State the contract for Text-entry controls may still need indication, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: A text field can match after a pointer action because typing location still needs to be clear. For the CCA menu, add one near-miss that exposes assuming pointer focus always suppresses :focus-visible. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Diagnostic route

Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
Boundary check: create the smallest input that triggers assuming pointer focus always suppresses :focus-visible.
Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
Repair check: use the reversible procedure “State the contract for Text-entry controls may still need indication, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS :focus-visible syntax. For this chapter, useful prompts are: “What did you expect from Text-entry controls may still need indication?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing assuming pointer focus always suppresses :focus-visible be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny reading tracker with text fields remain visibly focused when typing is expected. Include one ordinary case, one boundary and one deliberate failure caused by assuming pointer focus always suppresses :focus-visible. Predict each result before using a tool, then report the first point where observation differs from prediction.

Answer guide. A strong response starts with the rule: User-agent guidance recommends indicating focus for controls that support keyboard input or would summon a virtual keyboard. It shows a trace, not only a final value. The ordinary case should demonstrate “A text field can match after a pointer action because typing location still needs to be clear.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for Text-entry controls may still need indication, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.

Decision and transfer

For Text-entry controls may still need indication, separate the documented CSS :focus-visible mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

CHAPTER 6 OF 20 . Use the core tools

6. User preferences take priority

Back to contents

If a user asks to always see visible focus, the user agent may indicate focus regardless of other factors. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is designing around one developer machine’s default heuristic as a universal rule. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for User preferences take priority, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the User preferences take priority chapter on CSS :focus-visible, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on designing around one developer machine’s default heuristic as a universal rule. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

:focus-visible{outline:3px solid CanvasText;outline-offset:3px}

Explained result. The authored style remains compatible with a user agent that indicates focus more often. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.

Four purposeful transfer cases

Case 1: science quiz. Predict the rule using validation moves focus to an error without losing orientation. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “If a user asks to always see visible focus, the user agent may indicate focus regardless of other factors.” Apply this procedure: State the contract for User preferences take priority, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The authored style remains compatible with a user agent that indicates focus more often. For the science quiz, add one near-miss that exposes designing around one developer machine’s default heuristic as a universal rule. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 2: CCA menu. Contrast the rule using roving tabindex exposes one clear keyboard target at a time. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “If a user asks to always see visible focus, the user agent may indicate focus regardless of other factors.” Apply this procedure: State the contract for User preferences take priority, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The authored style remains compatible with a user agent that indicates focus more often. For the CCA menu, add one near-miss that exposes designing around one developer machine’s default heuristic as a universal rule. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 3: family form. Stress-test the rule using custom focus rings survive light, dark and forced-colour contexts. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “If a user asks to always see visible focus, the user agent may indicate focus regardless of other factors.” Apply this procedure: State the contract for User preferences take priority, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The authored style remains compatible with a user agent that indicates focus more often. For the family form, add one near-miss that exposes designing around one developer machine’s default heuristic as a universal rule. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 4: library search. Explain the rule using pointer and keyboard routes are compared rather than inferred. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “If a user asks to always see visible focus, the user agent may indicate focus regardless of other factors.” Apply this procedure: State the contract for User preferences take priority, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The authored style remains compatible with a user agent that indicates focus more often. For the library search, add one near-miss that exposes designing around one developer machine’s default heuristic as a universal rule. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Diagnostic route

Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
Boundary check: create the smallest input that triggers designing around one developer machine’s default heuristic as a universal rule.
Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
Repair check: use the reversible procedure “State the contract for User preferences take priority, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS :focus-visible syntax. For this chapter, useful prompts are: “What did you expect from User preferences take priority?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing designing around one developer machine’s default heuristic as a universal rule be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny science quiz with validation moves focus to an error without losing orientation. Include one ordinary case, one boundary and one deliberate failure caused by designing around one developer machine’s default heuristic as a universal rule. Predict each result before using a tool, then report the first point where observation differs from prediction.

Answer guide. A strong response starts with the rule: If a user asks to always see visible focus, the user agent may indicate focus regardless of other factors. It shows a trace, not only a final value. The ordinary case should demonstrate “The authored style remains compatible with a user agent that indicates focus more often.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for User preferences take priority, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.

Decision and transfer

For User preferences take priority, separate the documented CSS :focus-visible mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

CHAPTER 7 OF 20 . Use the core tools

7. Scripted movement can carry indicated focus forward

Back to contents

CSSWG guidance recommends that script-moved focus remain indicated when the previously focused element was indicated. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is opening a new component and assuming programmatic focus will always hide the ring. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Scripted movement can carry indicated focus forward, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the Scripted movement can carry indicated focus forward chapter on CSS :focus-visible, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on opening a new component and assuming programmatic focus will always hide the ring. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

nextButton.focus();
/* nextButton:focus-visible can match when focus came from an indicated control */

Explained result. The new target can keep visible orientation after a keyboard-driven scripted transition. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.

Four purposeful transfer cases

Case 1: family form. Contrast the rule using custom focus rings survive light, dark and forced-colour contexts. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “CSSWG guidance recommends that script-moved focus remain indicated when the previously focused element was indicated.” Apply this procedure: State the contract for Scripted movement can carry indicated focus forward, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The new target can keep visible orientation after a keyboard-driven scripted transition. For the family form, add one near-miss that exposes opening a new component and assuming programmatic focus will always hide the ring. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 2: library search. Stress-test the rule using pointer and keyboard routes are compared rather than inferred. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “CSSWG guidance recommends that script-moved focus remain indicated when the previously focused element was indicated.” Apply this procedure: State the contract for Scripted movement can carry indicated focus forward, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The new target can keep visible orientation after a keyboard-driven scripted transition. For the library search, add one near-miss that exposes opening a new component and assuming programmatic focus will always hide the ring. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 3: test laboratory. Explain the rule using dialogs, script focus, disabled controls and nested containers expose boundaries. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “CSSWG guidance recommends that script-moved focus remain indicated when the previously focused element was indicated.” Apply this procedure: State the contract for Scripted movement can carry indicated focus forward, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The new target can keep visible orientation after a keyboard-driven scripted transition. For the test laboratory, add one near-miss that exposes opening a new component and assuming programmatic focus will always hide the ring. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 4: design decision. Transfer the rule using :focus-visible is compared with :focus, :focus-within and default user-agent styles. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “CSSWG guidance recommends that script-moved focus remain indicated when the previously focused element was indicated.” Apply this procedure: State the contract for Scripted movement can carry indicated focus forward, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The new target can keep visible orientation after a keyboard-driven scripted transition. For the design decision, add one near-miss that exposes opening a new component and assuming programmatic focus will always hide the ring. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Diagnostic route

Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
Boundary check: create the smallest input that triggers opening a new component and assuming programmatic focus will always hide the ring.
Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
Repair check: use the reversible procedure “State the contract for Scripted movement can carry indicated focus forward, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS :focus-visible syntax. For this chapter, useful prompts are: “What did you expect from Scripted movement can carry indicated focus forward?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing opening a new component and assuming programmatic focus will always hide the ring be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny CCA menu with roving tabindex exposes one clear keyboard target at a time. Include one ordinary case, one boundary and one deliberate failure caused by opening a new component and assuming programmatic focus will always hide the ring. Predict each result before using a tool, then report the first point where observation differs from prediction.

Answer guide. A strong response starts with the rule: CSSWG guidance recommends that script-moved focus remain indicated when the previously focused element was indicated. It shows a trace, not only a final value. The ordinary case should demonstrate “The new target can keep visible orientation after a keyboard-driven scripted transition.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for Scripted movement can carry indicated focus forward, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.

Decision and transfer

For Scripted movement can carry indicated focus forward, separate the documented CSS :focus-visible mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

CHAPTER 8 OF 20 . Use the core tools

8. Scripted movement can also remain unindicated

Back to contents

When the previously focused element was not indicated, guidance allows script-moved focus to remain unindicated. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is hard-coding a story that focus() itself always causes :focus-visible. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Scripted movement can also remain unindicated, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the Scripted movement can also remain unindicated chapter on CSS :focus-visible, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on hard-coding a story that focus() itself always causes :focus-visible. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

clickedButton.addEventListener('click',()=>panelButton.focus())

Explained result. The result depends on the user-agent state and route, not merely on calling focus. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.

Four purposeful transfer cases

Case 1: test laboratory. Stress-test the rule using dialogs, script focus, disabled controls and nested containers expose boundaries. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “When the previously focused element was not indicated, guidance allows script-moved focus to remain unindicated.” Apply this procedure: State the contract for Scripted movement can also remain unindicated, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The result depends on the user-agent state and route, not merely on calling focus. For the test laboratory, add one near-miss that exposes hard-coding a story that focus() itself always causes :focus-visible. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 2: design decision. Explain the rule using :focus-visible is compared with :focus, :focus-within and default user-agent styles. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “When the previously focused element was not indicated, guidance allows script-moved focus to remain unindicated.” Apply this procedure: State the contract for Scripted movement can also remain unindicated, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The result depends on the user-agent state and route, not merely on calling focus. For the design decision, add one near-miss that exposes hard-coding a story that focus() itself always causes :focus-visible. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 3: homework portal. Transfer the rule using tabbing through lesson links keeps the current action obvious. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “When the previously focused element was not indicated, guidance allows script-moved focus to remain unindicated.” Apply this procedure: State the contract for Scripted movement can also remain unindicated, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The result depends on the user-agent state and route, not merely on calling focus. For the homework portal, add one near-miss that exposes hard-coding a story that focus() itself always causes :focus-visible. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 4: reading tracker. Predict the rule using text fields remain visibly focused when typing is expected. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “When the previously focused element was not indicated, guidance allows script-moved focus to remain unindicated.” Apply this procedure: State the contract for Scripted movement can also remain unindicated, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The result depends on the user-agent state and route, not merely on calling focus. For the reading tracker, add one near-miss that exposes hard-coding a story that focus() itself always causes :focus-visible. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Diagnostic route

Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
Boundary check: create the smallest input that triggers hard-coding a story that focus() itself always causes :focus-visible.
Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
Repair check: use the reversible procedure “State the contract for Scripted movement can also remain unindicated, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS :focus-visible syntax. For this chapter, useful prompts are: “What did you expect from Scripted movement can also remain unindicated?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing hard-coding a story that focus() itself always causes :focus-visible be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny family form with custom focus rings survive light, dark and forced-colour contexts. Include one ordinary case, one boundary and one deliberate failure caused by hard-coding a story that focus() itself always causes :focus-visible. Predict each result before using a tool, then report the first point where observation differs from prediction.

Answer guide. A strong response starts with the rule: When the previously focused element was not indicated, guidance allows script-moved focus to remain unindicated. It shows a trace, not only a final value. The ordinary case should demonstrate “The result depends on the user-agent state and route, not merely on calling focus.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for Scripted movement can also remain unindicated, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.

Decision and transfer

For Scripted movement can also remain unindicated, separate the documented CSS :focus-visible mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

CHAPTER 9 OF 20 . Handle boundaries

9. Newly displayed auto-focused controls should be indicated

Back to contents

CSSWG guidance says an element that automatically gains focus in newly displayed UI, such as a dialog action, should show indication. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is opening a dialog with invisible focus and making keyboard location mysterious. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Newly displayed auto-focused controls should be indicated, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the Newly displayed auto-focused controls should be indicated chapter on CSS :focus-visible, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on opening a dialog with invisible focus and making keyboard location mysterious. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

dialog button:focus-visible{outline:3px solid Highlight;outline-offset:3px}

Explained result. The first focused action in the newly shown dialog receives an explicit visible treatment. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.

Four purposeful transfer cases

Case 1: homework portal. Explain the rule using tabbing through lesson links keeps the current action obvious. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “CSSWG guidance says an element that automatically gains focus in newly displayed UI, such as a dialog action, should show indication.” Apply this procedure: State the contract for Newly displayed auto-focused controls should be indicated, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The first focused action in the newly shown dialog receives an explicit visible treatment. For the homework portal, add one near-miss that exposes opening a dialog with invisible focus and making keyboard location mysterious. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 2: reading tracker. Transfer the rule using text fields remain visibly focused when typing is expected. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “CSSWG guidance says an element that automatically gains focus in newly displayed UI, such as a dialog action, should show indication.” Apply this procedure: State the contract for Newly displayed auto-focused controls should be indicated, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The first focused action in the newly shown dialog receives an explicit visible treatment. For the reading tracker, add one near-miss that exposes opening a dialog with invisible focus and making keyboard location mysterious. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 3: science quiz. Predict the rule using validation moves focus to an error without losing orientation. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “CSSWG guidance says an element that automatically gains focus in newly displayed UI, such as a dialog action, should show indication.” Apply this procedure: State the contract for Newly displayed auto-focused controls should be indicated, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The first focused action in the newly shown dialog receives an explicit visible treatment. For the science quiz, add one near-miss that exposes opening a dialog with invisible focus and making keyboard location mysterious. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 4: CCA menu. Contrast the rule using roving tabindex exposes one clear keyboard target at a time. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “CSSWG guidance says an element that automatically gains focus in newly displayed UI, such as a dialog action, should show indication.” Apply this procedure: State the contract for Newly displayed auto-focused controls should be indicated, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The first focused action in the newly shown dialog receives an explicit visible treatment. For the CCA menu, add one near-miss that exposes opening a dialog with invisible focus and making keyboard location mysterious. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Diagnostic route

Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
Boundary check: create the smallest input that triggers opening a dialog with invisible focus and making keyboard location mysterious.
Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
Repair check: use the reversible procedure “State the contract for Newly displayed auto-focused controls should be indicated, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS :focus-visible syntax. For this chapter, useful prompts are: “What did you expect from Newly displayed auto-focused controls should be indicated?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing opening a dialog with invisible focus and making keyboard location mysterious be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny library search with pointer and keyboard routes are compared rather than inferred. Include one ordinary case, one boundary and one deliberate failure caused by opening a dialog with invisible focus and making keyboard location mysterious. Predict each result before using a tool, then report the first point where observation differs from prediction.

Answer guide. A strong response starts with the rule: CSSWG guidance says an element that automatically gains focus in newly displayed UI, such as a dialog action, should show indication. It shows a trace, not only a final value. The ordinary case should demonstrate “The first focused action in the newly shown dialog receives an explicit visible treatment.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for Newly displayed auto-focused controls should be indicated, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.

Decision and transfer

For Newly displayed auto-focused controls should be indicated, separate the documented CSS :focus-visible mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

CHAPTER 10 OF 20 . Handle boundaries

10. Keep a real indicator when removing defaults

Back to contents

Setting outline:none can erase the only visible focus cue unless an equally reliable replacement is present. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is removing the outline for aesthetics before the replacement has been tested. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Keep a real indicator when removing defaults, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the Keep a real indicator when removing defaults chapter on CSS :focus-visible, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on removing the outline for aesthetics before the replacement has been tested. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

button:focus-visible{outline:3px solid #165dff;outline-offset:3px}

Explained result. The rule preserves a durable outline instead of depending on a faint colour change. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.

Four purposeful transfer cases

Case 1: science quiz. Transfer the rule using validation moves focus to an error without losing orientation. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “Setting outline:none can erase the only visible focus cue unless an equally reliable replacement is present.” Apply this procedure: State the contract for Keep a real indicator when removing defaults, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The rule preserves a durable outline instead of depending on a faint colour change. For the science quiz, add one near-miss that exposes removing the outline for aesthetics before the replacement has been tested. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 2: CCA menu. Predict the rule using roving tabindex exposes one clear keyboard target at a time. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “Setting outline:none can erase the only visible focus cue unless an equally reliable replacement is present.” Apply this procedure: State the contract for Keep a real indicator when removing defaults, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The rule preserves a durable outline instead of depending on a faint colour change. For the CCA menu, add one near-miss that exposes removing the outline for aesthetics before the replacement has been tested. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 3: family form. Contrast the rule using custom focus rings survive light, dark and forced-colour contexts. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “Setting outline:none can erase the only visible focus cue unless an equally reliable replacement is present.” Apply this procedure: State the contract for Keep a real indicator when removing defaults, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The rule preserves a durable outline instead of depending on a faint colour change. For the family form, add one near-miss that exposes removing the outline for aesthetics before the replacement has been tested. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 4: library search. Stress-test the rule using pointer and keyboard routes are compared rather than inferred. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “Setting outline:none can erase the only visible focus cue unless an equally reliable replacement is present.” Apply this procedure: State the contract for Keep a real indicator when removing defaults, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The rule preserves a durable outline instead of depending on a faint colour change. For the library search, add one near-miss that exposes removing the outline for aesthetics before the replacement has been tested. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Diagnostic route

Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
Boundary check: create the smallest input that triggers removing the outline for aesthetics before the replacement has been tested.
Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
Repair check: use the reversible procedure “State the contract for Keep a real indicator when removing defaults, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS :focus-visible syntax. For this chapter, useful prompts are: “What did you expect from Keep a real indicator when removing defaults?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing removing the outline for aesthetics before the replacement has been tested be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny test laboratory with dialogs, script focus, disabled controls and nested containers expose boundaries. Include one ordinary case, one boundary and one deliberate failure caused by removing the outline for aesthetics before the replacement has been tested. Predict each result before using a tool, then report the first point where observation differs from prediction.

Answer guide. A strong response starts with the rule: Setting outline:none can erase the only visible focus cue unless an equally reliable replacement is present. It shows a trace, not only a final value. The ordinary case should demonstrate “The rule preserves a durable outline instead of depending on a faint colour change.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for Keep a real indicator when removing defaults, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.

Decision and transfer

For Keep a real indicator when removing defaults, separate the documented CSS :focus-visible mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

CHAPTER 11 OF 20 . Handle boundaries

11. Outline offset separates the ring from the component

Back to contents

outline-offset can move an outline away from the border so it remains distinguishable. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is using a ring that visually merges into the component edge. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Outline offset separates the ring from the component, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the Outline offset separates the ring from the component chapter on CSS :focus-visible, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on using a ring that visually merges into the component edge. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.action:focus-visible{outline:3px solid #111;outline-offset:3px}

Explained result. The gap helps the outline read as a focus state rather than as the normal border. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.

Four purposeful transfer cases

Case 1: family form. Predict the rule using custom focus rings survive light, dark and forced-colour contexts. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “outline-offset can move an outline away from the border so it remains distinguishable.” Apply this procedure: State the contract for Outline offset separates the ring from the component, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The gap helps the outline read as a focus state rather than as the normal border. For the family form, add one near-miss that exposes using a ring that visually merges into the component edge. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 2: library search. Contrast the rule using pointer and keyboard routes are compared rather than inferred. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “outline-offset can move an outline away from the border so it remains distinguishable.” Apply this procedure: State the contract for Outline offset separates the ring from the component, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The gap helps the outline read as a focus state rather than as the normal border. For the library search, add one near-miss that exposes using a ring that visually merges into the component edge. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 3: test laboratory. Stress-test the rule using dialogs, script focus, disabled controls and nested containers expose boundaries. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “outline-offset can move an outline away from the border so it remains distinguishable.” Apply this procedure: State the contract for Outline offset separates the ring from the component, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The gap helps the outline read as a focus state rather than as the normal border. For the test laboratory, add one near-miss that exposes using a ring that visually merges into the component edge. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 4: design decision. Explain the rule using :focus-visible is compared with :focus, :focus-within and default user-agent styles. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “outline-offset can move an outline away from the border so it remains distinguishable.” Apply this procedure: State the contract for Outline offset separates the ring from the component, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The gap helps the outline read as a focus state rather than as the normal border. For the design decision, add one near-miss that exposes using a ring that visually merges into the component edge. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Diagnostic route

Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
Boundary check: create the smallest input that triggers using a ring that visually merges into the component edge.
Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
Repair check: use the reversible procedure “State the contract for Outline offset separates the ring from the component, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS :focus-visible syntax. For this chapter, useful prompts are: “What did you expect from Outline offset separates the ring from the component?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing using a ring that visually merges into the component edge be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny design decision with :focus-visible is compared with :focus, :focus-within and default user-agent styles. Include one ordinary case, one boundary and one deliberate failure caused by using a ring that visually merges into the component edge. Predict each result before using a tool, then report the first point where observation differs from prediction.

Answer guide. A strong response starts with the rule: outline-offset can move an outline away from the border so it remains distinguishable. It shows a trace, not only a final value. The ordinary case should demonstrate “The gap helps the outline read as a focus state rather than as the normal border.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for Outline offset separates the ring from the component, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.

Decision and transfer

For Outline offset separates the ring from the component, separate the documented CSS :focus-visible mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

CHAPTER 12 OF 20 . Handle boundaries

12. Two-colour indicators survive varied backgrounds

Back to contents

A paired light and dark ring can remain visible when a control crosses backgrounds of uncertain colour. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is choosing one ring colour that disappears on part of the page. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Two-colour indicators survive varied backgrounds, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the Two-colour indicators survive varied backgrounds chapter on CSS :focus-visible, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on choosing one ring colour that disappears on part of the page. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.action:focus-visible{outline:2px solid #fff;box-shadow:0 0 0 5px #111}

Explained result. The inner light edge and outer dark edge provide contrast across more backgrounds. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.

Four purposeful transfer cases

Case 1: test laboratory. Contrast the rule using dialogs, script focus, disabled controls and nested containers expose boundaries. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “A paired light and dark ring can remain visible when a control crosses backgrounds of uncertain colour.” Apply this procedure: State the contract for Two-colour indicators survive varied backgrounds, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The inner light edge and outer dark edge provide contrast across more backgrounds. For the test laboratory, add one near-miss that exposes choosing one ring colour that disappears on part of the page. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 2: design decision. Stress-test the rule using :focus-visible is compared with :focus, :focus-within and default user-agent styles. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “A paired light and dark ring can remain visible when a control crosses backgrounds of uncertain colour.” Apply this procedure: State the contract for Two-colour indicators survive varied backgrounds, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The inner light edge and outer dark edge provide contrast across more backgrounds. For the design decision, add one near-miss that exposes choosing one ring colour that disappears on part of the page. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 3: homework portal. Explain the rule using tabbing through lesson links keeps the current action obvious. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “A paired light and dark ring can remain visible when a control crosses backgrounds of uncertain colour.” Apply this procedure: State the contract for Two-colour indicators survive varied backgrounds, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The inner light edge and outer dark edge provide contrast across more backgrounds. For the homework portal, add one near-miss that exposes choosing one ring colour that disappears on part of the page. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 4: reading tracker. Transfer the rule using text fields remain visibly focused when typing is expected. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “A paired light and dark ring can remain visible when a control crosses backgrounds of uncertain colour.” Apply this procedure: State the contract for Two-colour indicators survive varied backgrounds, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The inner light edge and outer dark edge provide contrast across more backgrounds. For the reading tracker, add one near-miss that exposes choosing one ring colour that disappears on part of the page. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Diagnostic route

Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
Boundary check: create the smallest input that triggers choosing one ring colour that disappears on part of the page.
Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
Repair check: use the reversible procedure “State the contract for Two-colour indicators survive varied backgrounds, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS :focus-visible syntax. For this chapter, useful prompts are: “What did you expect from Two-colour indicators survive varied backgrounds?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing choosing one ring colour that disappears on part of the page be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny homework portal with tabbing through lesson links keeps the current action obvious. Include one ordinary case, one boundary and one deliberate failure caused by choosing one ring colour that disappears on part of the page. Predict each result before using a tool, then report the first point where observation differs from prediction.

Answer guide. A strong response starts with the rule: A paired light and dark ring can remain visible when a control crosses backgrounds of uncertain colour. It shows a trace, not only a final value. The ordinary case should demonstrate “The inner light edge and outer dark edge provide contrast across more backgrounds.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for Two-colour indicators survive varied backgrounds, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.

Decision and transfer

For Two-colour indicators survive varied backgrounds, separate the documented CSS :focus-visible mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

CHAPTER 13 OF 20 . Debug and verify

13. Colour alone may be too weak

Back to contents

A clear outline, border, underline or shape change communicates focus more robustly than a subtle hue shift alone. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is changing text colour slightly and calling the state obvious. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Colour alone may be too weak, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the Colour alone may be too weak chapter on CSS :focus-visible, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on changing text colour slightly and calling the state obvious. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

a:focus-visible{outline:3px solid currentColor;outline-offset:3px;text-decoration-thickness:.2em}

Explained result. The focus state has geometry as well as colour. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.

Four purposeful transfer cases

Case 1: homework portal. Stress-test the rule using tabbing through lesson links keeps the current action obvious. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “A clear outline, border, underline or shape change communicates focus more robustly than a subtle hue shift alone.” Apply this procedure: State the contract for Colour alone may be too weak, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The focus state has geometry as well as colour. For the homework portal, add one near-miss that exposes changing text colour slightly and calling the state obvious. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 2: reading tracker. Explain the rule using text fields remain visibly focused when typing is expected. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “A clear outline, border, underline or shape change communicates focus more robustly than a subtle hue shift alone.” Apply this procedure: State the contract for Colour alone may be too weak, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The focus state has geometry as well as colour. For the reading tracker, add one near-miss that exposes changing text colour slightly and calling the state obvious. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 3: science quiz. Transfer the rule using validation moves focus to an error without losing orientation. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “A clear outline, border, underline or shape change communicates focus more robustly than a subtle hue shift alone.” Apply this procedure: State the contract for Colour alone may be too weak, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The focus state has geometry as well as colour. For the science quiz, add one near-miss that exposes changing text colour slightly and calling the state obvious. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 4: CCA menu. Predict the rule using roving tabindex exposes one clear keyboard target at a time. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “A clear outline, border, underline or shape change communicates focus more robustly than a subtle hue shift alone.” Apply this procedure: State the contract for Colour alone may be too weak, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The focus state has geometry as well as colour. For the CCA menu, add one near-miss that exposes changing text colour slightly and calling the state obvious. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Diagnostic route

Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
Boundary check: create the smallest input that triggers changing text colour slightly and calling the state obvious.
Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
Repair check: use the reversible procedure “State the contract for Colour alone may be too weak, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS :focus-visible syntax. For this chapter, useful prompts are: “What did you expect from Colour alone may be too weak?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing changing text colour slightly and calling the state obvious be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny reading tracker with text fields remain visibly focused when typing is expected. Include one ordinary case, one boundary and one deliberate failure caused by changing text colour slightly and calling the state obvious. Predict each result before using a tool, then report the first point where observation differs from prediction.

Answer guide. A strong response starts with the rule: A clear outline, border, underline or shape change communicates focus more robustly than a subtle hue shift alone. It shows a trace, not only a final value. The ordinary case should demonstrate “The focus state has geometry as well as colour.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for Colour alone may be too weak, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.

Decision and transfer

For Colour alone may be too weak, separate the documented CSS :focus-visible mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

CHAPTER 14 OF 20 . Debug and verify

14. Forced-colour modes deserve an explicit check

Back to contents

System colour keywords and outlines can cooperate with high-contrast or forced-colour rendering better than decorative shadows alone. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is testing only the author colour palette. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Forced-colour modes deserve an explicit check, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the Forced-colour modes deserve an explicit check chapter on CSS :focus-visible, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on testing only the author colour palette. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

@media (forced-colors:active){:focus-visible{outline:3px solid Highlight;box-shadow:none}}

Explained result. The forced-colour route retains a system-recognisable outline. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.

Four purposeful transfer cases

Case 1: science quiz. Explain the rule using validation moves focus to an error without losing orientation. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “System colour keywords and outlines can cooperate with high-contrast or forced-colour rendering better than decorative shadows alone.” Apply this procedure: State the contract for Forced-colour modes deserve an explicit check, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The forced-colour route retains a system-recognisable outline. For the science quiz, add one near-miss that exposes testing only the author colour palette. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 2: CCA menu. Transfer the rule using roving tabindex exposes one clear keyboard target at a time. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “System colour keywords and outlines can cooperate with high-contrast or forced-colour rendering better than decorative shadows alone.” Apply this procedure: State the contract for Forced-colour modes deserve an explicit check, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The forced-colour route retains a system-recognisable outline. For the CCA menu, add one near-miss that exposes testing only the author colour palette. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 3: family form. Predict the rule using custom focus rings survive light, dark and forced-colour contexts. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “System colour keywords and outlines can cooperate with high-contrast or forced-colour rendering better than decorative shadows alone.” Apply this procedure: State the contract for Forced-colour modes deserve an explicit check, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The forced-colour route retains a system-recognisable outline. For the family form, add one near-miss that exposes testing only the author colour palette. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 4: library search. Contrast the rule using pointer and keyboard routes are compared rather than inferred. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “System colour keywords and outlines can cooperate with high-contrast or forced-colour rendering better than decorative shadows alone.” Apply this procedure: State the contract for Forced-colour modes deserve an explicit check, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The forced-colour route retains a system-recognisable outline. For the library search, add one near-miss that exposes testing only the author colour palette. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Diagnostic route

Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
Boundary check: create the smallest input that triggers testing only the author colour palette.
Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
Repair check: use the reversible procedure “State the contract for Forced-colour modes deserve an explicit check, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS :focus-visible syntax. For this chapter, useful prompts are: “What did you expect from Forced-colour modes deserve an explicit check?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing testing only the author colour palette be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny science quiz with validation moves focus to an error without losing orientation. Include one ordinary case, one boundary and one deliberate failure caused by testing only the author colour palette. Predict each result before using a tool, then report the first point where observation differs from prediction.

Answer guide. A strong response starts with the rule: System colour keywords and outlines can cooperate with high-contrast or forced-colour rendering better than decorative shadows alone. It shows a trace, not only a final value. The ordinary case should demonstrate “The forced-colour route retains a system-recognisable outline.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for Forced-colour modes deserve an explicit check, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.

Decision and transfer

For Forced-colour modes deserve an explicit check, separate the documented CSS :focus-visible mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

CHAPTER 15 OF 20 . Debug and verify

15. Do not cover the focused element

Back to contents

Sticky headers, overlays and scroll containers can hide the target even when it has a good ring. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is treating selector styling as the whole focus-visibility problem. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Do not cover the focused element, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the Do not cover the focused element chapter on CSS :focus-visible, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on treating selector styling as the whole focus-visibility problem. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.target{scroll-margin-block:5rem}.target:focus-visible{outline:3px solid currentColor}

Explained result. Scroll margin helps a scripted or anchor-focused target remain visible below a fixed header. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.

Four purposeful transfer cases

Case 1: family form. Transfer the rule using custom focus rings survive light, dark and forced-colour contexts. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “Sticky headers, overlays and scroll containers can hide the target even when it has a good ring.” Apply this procedure: State the contract for Do not cover the focused element, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Scroll margin helps a scripted or anchor-focused target remain visible below a fixed header. For the family form, add one near-miss that exposes treating selector styling as the whole focus-visibility problem. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 2: library search. Predict the rule using pointer and keyboard routes are compared rather than inferred. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “Sticky headers, overlays and scroll containers can hide the target even when it has a good ring.” Apply this procedure: State the contract for Do not cover the focused element, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Scroll margin helps a scripted or anchor-focused target remain visible below a fixed header. For the library search, add one near-miss that exposes treating selector styling as the whole focus-visibility problem. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 3: test laboratory. Contrast the rule using dialogs, script focus, disabled controls and nested containers expose boundaries. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “Sticky headers, overlays and scroll containers can hide the target even when it has a good ring.” Apply this procedure: State the contract for Do not cover the focused element, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Scroll margin helps a scripted or anchor-focused target remain visible below a fixed header. For the test laboratory, add one near-miss that exposes treating selector styling as the whole focus-visibility problem. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 4: design decision. Stress-test the rule using :focus-visible is compared with :focus, :focus-within and default user-agent styles. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “Sticky headers, overlays and scroll containers can hide the target even when it has a good ring.” Apply this procedure: State the contract for Do not cover the focused element, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Scroll margin helps a scripted or anchor-focused target remain visible below a fixed header. For the design decision, add one near-miss that exposes treating selector styling as the whole focus-visibility problem. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Diagnostic route

Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
Boundary check: create the smallest input that triggers treating selector styling as the whole focus-visibility problem.
Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
Repair check: use the reversible procedure “State the contract for Do not cover the focused element, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS :focus-visible syntax. For this chapter, useful prompts are: “What did you expect from Do not cover the focused element?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing treating selector styling as the whole focus-visibility problem be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny CCA menu with roving tabindex exposes one clear keyboard target at a time. Include one ordinary case, one boundary and one deliberate failure caused by treating selector styling as the whole focus-visibility problem. Predict each result before using a tool, then report the first point where observation differs from prediction.

Answer guide. A strong response starts with the rule: Sticky headers, overlays and scroll containers can hide the target even when it has a good ring. It shows a trace, not only a final value. The ordinary case should demonstrate “Scroll margin helps a scripted or anchor-focused target remain visible below a fixed header.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for Do not cover the focused element, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.

Decision and transfer

For Do not cover the focused element, separate the documented CSS :focus-visible mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

CHAPTER 16 OF 20 . Debug and verify

16. focus-within styles the containing region

Back to contents

:focus-within matches an element when it or a descendant has focus, including focus relationships in the flat tree. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is using :focus-visible on a wrapper that never receives focus. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for focus-within styles the containing region, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the focus-within styles the containing region chapter on CSS :focus-visible, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on using :focus-visible on a wrapper that never receives focus. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.field:focus-within{border-color:#165dff}.field input:focus-visible{outline:3px solid #165dff}

Explained result. The field container highlights the active region while the input shows the precise focus indicator. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.

Four purposeful transfer cases

Case 1: test laboratory. Predict the rule using dialogs, script focus, disabled controls and nested containers expose boundaries. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “:focus-within matches an element when it or a descendant has focus, including focus relationships in the flat tree.” Apply this procedure: State the contract for focus-within styles the containing region, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The field container highlights the active region while the input shows the precise focus indicator. For the test laboratory, add one near-miss that exposes using :focus-visible on a wrapper that never receives focus. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 2: design decision. Contrast the rule using :focus-visible is compared with :focus, :focus-within and default user-agent styles. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “:focus-within matches an element when it or a descendant has focus, including focus relationships in the flat tree.” Apply this procedure: State the contract for focus-within styles the containing region, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The field container highlights the active region while the input shows the precise focus indicator. For the design decision, add one near-miss that exposes using :focus-visible on a wrapper that never receives focus. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 3: homework portal. Stress-test the rule using tabbing through lesson links keeps the current action obvious. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “:focus-within matches an element when it or a descendant has focus, including focus relationships in the flat tree.” Apply this procedure: State the contract for focus-within styles the containing region, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The field container highlights the active region while the input shows the precise focus indicator. For the homework portal, add one near-miss that exposes using :focus-visible on a wrapper that never receives focus. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 4: reading tracker. Explain the rule using text fields remain visibly focused when typing is expected. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “:focus-within matches an element when it or a descendant has focus, including focus relationships in the flat tree.” Apply this procedure: State the contract for focus-within styles the containing region, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The field container highlights the active region while the input shows the precise focus indicator. For the reading tracker, add one near-miss that exposes using :focus-visible on a wrapper that never receives focus. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Diagnostic route

Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
Boundary check: create the smallest input that triggers using :focus-visible on a wrapper that never receives focus.
Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
Repair check: use the reversible procedure “State the contract for focus-within styles the containing region, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS :focus-visible syntax. For this chapter, useful prompts are: “What did you expect from focus-within styles the containing region?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing using :focus-visible on a wrapper that never receives focus be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny family form with custom focus rings survive light, dark and forced-colour contexts. Include one ordinary case, one boundary and one deliberate failure caused by using :focus-visible on a wrapper that never receives focus. Predict each result before using a tool, then report the first point where observation differs from prediction.

Answer guide. A strong response starts with the rule: :focus-within matches an element when it or a descendant has focus, including focus relationships in the flat tree. It shows a trace, not only a final value. The ordinary case should demonstrate “The field container highlights the active region while the input shows the precise focus indicator.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for focus-within styles the containing region, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.

Decision and transfer

For focus-within styles the containing region, separate the documented CSS :focus-visible mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

CHAPTER 17 OF 20 . Transfer with judgment

17. Disabled controls are not a focus route

Back to contents

A genuinely disabled HTML control is normally removed from sequential focus, so no focus-visible styling can repair missing interaction. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is debugging CSS when the element cannot receive focus. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Disabled controls are not a focus route, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the Disabled controls are not a focus route chapter on CSS :focus-visible, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on debugging CSS when the element cannot receive focus. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

<button disabled>Submit</button>

Explained result. The disabled control is unavailable; provide an enabled route or explanatory content rather than a hidden focus promise. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.

Four purposeful transfer cases

Case 1: homework portal. Contrast the rule using tabbing through lesson links keeps the current action obvious. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “A genuinely disabled HTML control is normally removed from sequential focus, so no focus-visible styling can repair missing interaction.” Apply this procedure: State the contract for Disabled controls are not a focus route, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The disabled control is unavailable; provide an enabled route or explanatory content rather than a hidden focus promise. For the homework portal, add one near-miss that exposes debugging CSS when the element cannot receive focus. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 2: reading tracker. Stress-test the rule using text fields remain visibly focused when typing is expected. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “A genuinely disabled HTML control is normally removed from sequential focus, so no focus-visible styling can repair missing interaction.” Apply this procedure: State the contract for Disabled controls are not a focus route, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The disabled control is unavailable; provide an enabled route or explanatory content rather than a hidden focus promise. For the reading tracker, add one near-miss that exposes debugging CSS when the element cannot receive focus. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 3: science quiz. Explain the rule using validation moves focus to an error without losing orientation. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “A genuinely disabled HTML control is normally removed from sequential focus, so no focus-visible styling can repair missing interaction.” Apply this procedure: State the contract for Disabled controls are not a focus route, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The disabled control is unavailable; provide an enabled route or explanatory content rather than a hidden focus promise. For the science quiz, add one near-miss that exposes debugging CSS when the element cannot receive focus. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 4: CCA menu. Transfer the rule using roving tabindex exposes one clear keyboard target at a time. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “A genuinely disabled HTML control is normally removed from sequential focus, so no focus-visible styling can repair missing interaction.” Apply this procedure: State the contract for Disabled controls are not a focus route, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The disabled control is unavailable; provide an enabled route or explanatory content rather than a hidden focus promise. For the CCA menu, add one near-miss that exposes debugging CSS when the element cannot receive focus. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Diagnostic route

Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
Boundary check: create the smallest input that triggers debugging CSS when the element cannot receive focus.
Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
Repair check: use the reversible procedure “State the contract for Disabled controls are not a focus route, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS :focus-visible syntax. For this chapter, useful prompts are: “What did you expect from Disabled controls are not a focus route?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing debugging CSS when the element cannot receive focus be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny library search with pointer and keyboard routes are compared rather than inferred. Include one ordinary case, one boundary and one deliberate failure caused by debugging CSS when the element cannot receive focus. Predict each result before using a tool, then report the first point where observation differs from prediction.

Answer guide. A strong response starts with the rule: A genuinely disabled HTML control is normally removed from sequential focus, so no focus-visible styling can repair missing interaction. It shows a trace, not only a final value. The ordinary case should demonstrate “The disabled control is unavailable; provide an enabled route or explanatory content rather than a hidden focus promise.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for Disabled controls are not a focus route, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.

Decision and transfer

For Disabled controls are not a focus route, separate the documented CSS :focus-visible mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

CHAPTER 18 OF 20 . Transfer with judgment

18. Roving tabindex needs one clear active target

Back to contents

Composite widgets commonly keep one item in the tab order and move focus among items with arrow keys; each focused item needs a visible state. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is styling only the composite container while the active option remains ambiguous. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Roving tabindex needs one clear active target, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the Roving tabindex needs one clear active target chapter on CSS :focus-visible, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on styling only the composite container while the active option remains ambiguous. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.menuitem:focus-visible{outline:3px solid #165dff;outline-offset:-1px}

Explained result. The currently focused menu item, not merely the menu box, is visibly identifiable. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.

Four purposeful transfer cases

Case 1: science quiz. Stress-test the rule using validation moves focus to an error without losing orientation. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “Composite widgets commonly keep one item in the tab order and move focus among items with arrow keys; each focused item needs a visible state.” Apply this procedure: State the contract for Roving tabindex needs one clear active target, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The currently focused menu item, not merely the menu box, is visibly identifiable. For the science quiz, add one near-miss that exposes styling only the composite container while the active option remains ambiguous. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 2: CCA menu. Explain the rule using roving tabindex exposes one clear keyboard target at a time. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “Composite widgets commonly keep one item in the tab order and move focus among items with arrow keys; each focused item needs a visible state.” Apply this procedure: State the contract for Roving tabindex needs one clear active target, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The currently focused menu item, not merely the menu box, is visibly identifiable. For the CCA menu, add one near-miss that exposes styling only the composite container while the active option remains ambiguous. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 3: family form. Transfer the rule using custom focus rings survive light, dark and forced-colour contexts. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “Composite widgets commonly keep one item in the tab order and move focus among items with arrow keys; each focused item needs a visible state.” Apply this procedure: State the contract for Roving tabindex needs one clear active target, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The currently focused menu item, not merely the menu box, is visibly identifiable. For the family form, add one near-miss that exposes styling only the composite container while the active option remains ambiguous. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 4: library search. Predict the rule using pointer and keyboard routes are compared rather than inferred. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “Composite widgets commonly keep one item in the tab order and move focus among items with arrow keys; each focused item needs a visible state.” Apply this procedure: State the contract for Roving tabindex needs one clear active target, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The currently focused menu item, not merely the menu box, is visibly identifiable. For the library search, add one near-miss that exposes styling only the composite container while the active option remains ambiguous. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Diagnostic route

Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
Boundary check: create the smallest input that triggers styling only the composite container while the active option remains ambiguous.
Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
Repair check: use the reversible procedure “State the contract for Roving tabindex needs one clear active target, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS :focus-visible syntax. For this chapter, useful prompts are: “What did you expect from Roving tabindex needs one clear active target?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing styling only the composite container while the active option remains ambiguous be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny test laboratory with dialogs, script focus, disabled controls and nested containers expose boundaries. Include one ordinary case, one boundary and one deliberate failure caused by styling only the composite container while the active option remains ambiguous. Predict each result before using a tool, then report the first point where observation differs from prediction.

Answer guide. A strong response starts with the rule: Composite widgets commonly keep one item in the tab order and move focus among items with arrow keys; each focused item needs a visible state. It shows a trace, not only a final value. The ordinary case should demonstrate “The currently focused menu item, not merely the menu box, is visibly identifiable.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for Roving tabindex needs one clear active target, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.

Decision and transfer

For Roving tabindex needs one clear active target, separate the documented CSS :focus-visible mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

CHAPTER 19 OF 20 . Transfer with judgment

19. Progressive enhancement should preserve a fallback

Back to contents

A fallback :focus rule can provide visible focus before a more selective :focus-visible rule is applied in supporting browsers. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is using a support query that accidentally leaves older browsers with no indicator. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Progressive enhancement should preserve a fallback, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the Progressive enhancement should preserve a fallback chapter on CSS :focus-visible, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on using a support query that accidentally leaves older browsers with no indicator. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

:focus{outline:3px solid currentColor}
@supports selector(:focus-visible){:focus:not(:focus-visible){outline:none}:focus-visible{outline:3px solid currentColor}}

Explained result. Every browser gets a focus outline; supporting browsers can selectively suppress it when focus is not indicated. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.

Four purposeful transfer cases

Case 1: family form. Explain the rule using custom focus rings survive light, dark and forced-colour contexts. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “A fallback :focus rule can provide visible focus before a more selective :focus-visible rule is applied in supporting browsers.” Apply this procedure: State the contract for Progressive enhancement should preserve a fallback, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Every browser gets a focus outline; supporting browsers can selectively suppress it when focus is not indicated. For the family form, add one near-miss that exposes using a support query that accidentally leaves older browsers with no indicator. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 2: library search. Transfer the rule using pointer and keyboard routes are compared rather than inferred. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “A fallback :focus rule can provide visible focus before a more selective :focus-visible rule is applied in supporting browsers.” Apply this procedure: State the contract for Progressive enhancement should preserve a fallback, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Every browser gets a focus outline; supporting browsers can selectively suppress it when focus is not indicated. For the library search, add one near-miss that exposes using a support query that accidentally leaves older browsers with no indicator. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 3: test laboratory. Predict the rule using dialogs, script focus, disabled controls and nested containers expose boundaries. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “A fallback :focus rule can provide visible focus before a more selective :focus-visible rule is applied in supporting browsers.” Apply this procedure: State the contract for Progressive enhancement should preserve a fallback, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Every browser gets a focus outline; supporting browsers can selectively suppress it when focus is not indicated. For the test laboratory, add one near-miss that exposes using a support query that accidentally leaves older browsers with no indicator. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 4: design decision. Contrast the rule using :focus-visible is compared with :focus, :focus-within and default user-agent styles. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “A fallback :focus rule can provide visible focus before a more selective :focus-visible rule is applied in supporting browsers.” Apply this procedure: State the contract for Progressive enhancement should preserve a fallback, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: Every browser gets a focus outline; supporting browsers can selectively suppress it when focus is not indicated. For the design decision, add one near-miss that exposes using a support query that accidentally leaves older browsers with no indicator. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Diagnostic route

Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
Boundary check: create the smallest input that triggers using a support query that accidentally leaves older browsers with no indicator.
Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
Repair check: use the reversible procedure “State the contract for Progressive enhancement should preserve a fallback, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS :focus-visible syntax. For this chapter, useful prompts are: “What did you expect from Progressive enhancement should preserve a fallback?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing using a support query that accidentally leaves older browsers with no indicator be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny design decision with :focus-visible is compared with :focus, :focus-within and default user-agent styles. Include one ordinary case, one boundary and one deliberate failure caused by using a support query that accidentally leaves older browsers with no indicator. Predict each result before using a tool, then report the first point where observation differs from prediction.

Answer guide. A strong response starts with the rule: A fallback :focus rule can provide visible focus before a more selective :focus-visible rule is applied in supporting browsers. It shows a trace, not only a final value. The ordinary case should demonstrate “Every browser gets a focus outline; supporting browsers can selectively suppress it when focus is not indicated.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for Progressive enhancement should preserve a fallback, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.

Decision and transfer

For Progressive enhancement should preserve a fallback, separate the documented CSS :focus-visible mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

CHAPTER 20 OF 20 . Transfer with judgment

20. Choose selectors by the state the component must communicate

Back to contents

Use :focus for every focused state, :focus-visible for user-agent-indicated focus, and :focus-within for an active container; test keyboard, pointer, touch, script and accessibility modes. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is choosing the newest selector without mapping the complete interaction route. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the contract for Choose selectors by the state the component must communicate, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.

For the Choose selectors by the state the component must communicate chapter on CSS :focus-visible, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on choosing the newest selector without mapping the complete interaction route. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.search:focus-within{background:#fffbe8}.search input:focus-visible{outline:3px solid #7a3e00}

Explained result. The container and exact input communicate different but complementary states. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.

Four purposeful transfer cases

Case 1: test laboratory. Transfer the rule using dialogs, script focus, disabled controls and nested containers expose boundaries. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “Use :focus for every focused state, :focus-visible for user-agent-indicated focus, and :focus-within for an active container; test keyboard, pointer, touch, script and accessibility modes.” Apply this procedure: State the contract for Choose selectors by the state the component must communicate, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The container and exact input communicate different but complementary states. For the test laboratory, add one near-miss that exposes choosing the newest selector without mapping the complete interaction route. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 2: design decision. Predict the rule using :focus-visible is compared with :focus, :focus-within and default user-agent styles. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “Use :focus for every focused state, :focus-visible for user-agent-indicated focus, and :focus-within for an active container; test keyboard, pointer, touch, script and accessibility modes.” Apply this procedure: State the contract for Choose selectors by the state the component must communicate, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The container and exact input communicate different but complementary states. For the design decision, add one near-miss that exposes choosing the newest selector without mapping the complete interaction route. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 3: homework portal. Contrast the rule using tabbing through lesson links keeps the current action obvious. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “Use :focus for every focused state, :focus-visible for user-agent-indicated focus, and :focus-within for an active container; test keyboard, pointer, touch, script and accessibility modes.” Apply this procedure: State the contract for Choose selectors by the state the component must communicate, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The container and exact input communicate different but complementary states. For the homework portal, add one near-miss that exposes choosing the newest selector without mapping the complete interaction route. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 4: reading tracker. Stress-test the rule using text fields remain visibly focused when typing is expected. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “Use :focus for every focused state, :focus-visible for user-agent-indicated focus, and :focus-within for an active container; test keyboard, pointer, touch, script and accessibility modes.” Apply this procedure: State the contract for Choose selectors by the state the component must communicate, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. The expected mechanism is: The container and exact input communicate different but complementary states. For the reading tracker, add one near-miss that exposes choosing the newest selector without mapping the complete interaction route. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Diagnostic route

Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
Boundary check: create the smallest input that triggers choosing the newest selector without mapping the complete interaction route.
Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
Repair check: use the reversible procedure “State the contract for Choose selectors by the state the component must communicate, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence.” and record the first changed observation.
Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS :focus-visible syntax. For this chapter, useful prompts are: “What did you expect from Choose selectors by the state the component must communicate?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing choosing the newest selector without mapping the complete interaction route be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny homework portal with tabbing through lesson links keeps the current action obvious. Include one ordinary case, one boundary and one deliberate failure caused by choosing the newest selector without mapping the complete interaction route. Predict each result before using a tool, then report the first point where observation differs from prediction.

Answer guide. A strong response starts with the rule: Use :focus for every focused state, :focus-visible for user-agent-indicated focus, and :focus-within for an active container; test keyboard, pointer, touch, script and accessibility modes. It shows a trace, not only a final value. The ordinary case should demonstrate “The container and exact input communicate different but complementary states.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the contract for Choose selectors by the state the component must communicate, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Other data choices are valid when the evidence supports the same causal chain.

Decision and transfer

For Choose selectors by the state the component must communicate, separate the documented CSS :focus-visible mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

Parent guide: choose the next useful step

Start with evidence, not a label such as careless. Ask for one prediction and one trace. If the first transition is wrong, rebuild the model. If the model is sound but syntax fails, practise reference use. If routine cases are correct but boundaries fail, vary ties, defaults, unsupported inputs, ownership or missing paths. If explanations transfer, move to a small project.

Keep a weekly record with four lines: concept, prediction, observed difference and next test. Stop when fatigue replaces reasoning. A smaller case tomorrow is more useful than another hour of copying tonight.

Seek specialist help when cause and effect remain invisible after examples are reduced, when accessibility or data-loss implications are unclear, or when an important repository, database or application state may be at risk. Good support should make the learner’s reasoning more independent.

Capstone practice with explained routes

1. homework portal: model, boundary and recovery

Create a small homework portal using tabbing through lesson links keeps the current action obvious. Combine “focus-visible is focus plus an indication decision” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

Explained route. Start with: :focus-visible matches a focused element only when the user agent decides a focus indicator should be shown. Apply: State the contract for focus-visible is focus plus an indication decision, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Verify: The rule styles indicated focus; the browser still owns the matching heuristic. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.

2. reading tracker: model, boundary and recovery

Create a small reading tracker using text fields remain visibly focused when typing is expected. Combine “Pointer focus can legitimately differ” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

Explained route. Start with: For a pointer-focused element that does not accept keyboard input, a user agent may decide not to indicate focus. Apply: State the contract for Pointer focus can legitimately differ, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Verify: A clicked button may not match, while the same button reached by keyboard can match. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.

3. science quiz: model, boundary and recovery

Create a small science quiz using validation moves focus to an error without losing orientation. Combine “Scripted movement can carry indicated focus forward” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

Explained route. Start with: CSSWG guidance recommends that script-moved focus remain indicated when the previously focused element was indicated. Apply: State the contract for Scripted movement can carry indicated focus forward, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Verify: The new target can keep visible orientation after a keyboard-driven scripted transition. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.

4. CCA menu: model, boundary and recovery

Create a small CCA menu using roving tabindex exposes one clear keyboard target at a time. Combine “Keep a real indicator when removing defaults” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

Explained route. Start with: Setting outline:none can erase the only visible focus cue unless an equally reliable replacement is present. Apply: State the contract for Keep a real indicator when removing defaults, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Verify: The rule preserves a durable outline instead of depending on a faint colour change. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.

5. family form: model, boundary and recovery

Create a small family form using custom focus rings survive light, dark and forced-colour contexts. Combine “Colour alone may be too weak” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

Explained route. Start with: A clear outline, border, underline or shape change communicates focus more robustly than a subtle hue shift alone. Apply: State the contract for Colour alone may be too weak, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Verify: The focus state has geometry as well as colour. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.

6. library search: model, boundary and recovery

Create a small library search using pointer and keyboard routes are compared rather than inferred. Combine “focus-within styles the containing region” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

Explained route. Start with: :focus-within matches an element when it or a descendant has focus, including focus relationships in the flat tree. Apply: State the contract for focus-within styles the containing region, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Verify: The field container highlights the active region while the input shows the precise focus indicator. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.

7. test laboratory: model, boundary and recovery

Create a small test laboratory using dialogs, script focus, disabled controls and nested containers expose boundaries. Combine “Progressive enhancement should preserve a fallback” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

Explained route. Start with: A fallback :focus rule can provide visible focus before a more selective :focus-visible rule is applied in supporting browsers. Apply: State the contract for Progressive enhancement should preserve a fallback, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Verify: Every browser gets a focus outline; supporting browsers can selectively suppress it when focus is not indicated. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.

8. design decision: model, boundary and recovery

Create a small design decision using :focus-visible is compared with :focus, :focus-within and default user-agent styles. Combine “focus matches more broadly” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

Explained route. Start with: :focus matches the currently focused element whether the focus arrived through keyboard, pointer, script or another supported route. Apply: State the contract for focus matches more broadly, predict one ordinary case and one boundary, run the smallest disposable test, then explain the earliest difference between prediction and evidence. Verify: The first rule tracks focus generally; the second supplies the visible focus treatment when indicated. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.

Frequently asked questions

How long should a practice session be?

Use one complete prediction–observation–explanation cycle while attention remains good. Ten to twenty focused minutes can be enough.

Should every option or function be memorised?

No. Memorise the governing distinctions and practise retrieving the official reference. Understanding means predicting and explaining, not reciting a parameter list.

What if the result is correct but the explanation is weak?

Treat it as partial success. Ask for a trace and change one boundary. A reliable model survives controlled variation.

Is the shortest solution the best?

Not automatically. Prefer the solution whose semantics, failure modes and maintenance cost are easiest to justify for the actual project.

When should official documentation be used?

Use it whenever syntax, supported types, SQL dialect behaviour or Git version details matter. Primary documentation settles the current contract.

How can a parent help without technical expertise?

Ask what was predicted, where the first difference appeared, what evidence matters and which smaller example could isolate it.

How do we test transfer?

Change the context, vocabulary and one boundary. Require the learner to identify the invariant before using a tool.

What should be saved after practice?

Keep the corrected rule, one trace, one boundary case and the next question. Avoid storing pages of unexplained output.

Can these exercises replace backups?

No. Use disposable examples and proper backups. Learning should not endanger schoolwork, repositories or personal data.

What counts as mastery?

The learner can predict, verify, diagnose, recover and justify a choice across more than one context, while knowing when to consult the current reference.

Official and supporting references

Return to contents

eduKate Punggol

Build the model

Use the core tools

Handle boundaries

Debug and verify

Transfer with judgment

eduKate Punggol

Contact

Menu

Email Us

感谢您的回复。 ✨

Small Group Tutorials

How to Master CSS :focus-visible in Punggol Tuition

Find your next learning step

Build the model

Use the core tools

Handle boundaries

Debug and verify

Transfer with judgment

Complete chapter index

1. focus-visible is focus plus an indication decision

Core worked example

Four purposeful transfer cases

Diagnostic route

Practice with an explained answer

Decision and transfer

2. focus matches more broadly

Core worked example

Four purposeful transfer cases

Diagnostic route

Practice with an explained answer

Decision and transfer

3. Keyboard navigation commonly triggers visible focus

Core worked example

Four purposeful transfer cases

Diagnostic route

Practice with an explained answer

Decision and transfer

4. Pointer focus can legitimately differ

Core worked example

Four purposeful transfer cases

Diagnostic route

Practice with an explained answer

Decision and transfer

5. Text-entry controls may still need indication

Core worked example

Four purposeful transfer cases

Diagnostic route

Practice with an explained answer

Decision and transfer

6. User preferences take priority

Core worked example

Four purposeful transfer cases

Diagnostic route

Practice with an explained answer

Decision and transfer

7. Scripted movement can carry indicated focus forward

Core worked example

Four purposeful transfer cases

Diagnostic route

Practice with an explained answer

Decision and transfer

8. Scripted movement can also remain unindicated

Core worked example

Four purposeful transfer cases

Diagnostic route

Practice with an explained answer

Decision and transfer

9. Newly displayed auto-focused controls should be indicated

Core worked example

Four purposeful transfer cases

Diagnostic route

Practice with an explained answer

Decision and transfer

10. Keep a real indicator when removing defaults

Core worked example

Four purposeful transfer cases

Diagnostic route

Practice with an explained answer

Decision and transfer

11. Outline offset separates the ring from the component

Core worked example

Four purposeful transfer cases

Diagnostic route

Practice with an explained answer

Decision and transfer

12. Two-colour indicators survive varied backgrounds

Core worked example

Four purposeful transfer cases

Diagnostic route

Practice with an explained answer