From b316a368c48815c87ec8397e280547b501001f06 Mon Sep 17 00:00:00 2001 From: Ayush Kumar Singh Date: Mon, 11 May 2026 12:54:32 +0530 Subject: [PATCH] fix(curriculum): update focus style instructions and add outline test in job application form lab (#67055) Co-authored-by: majestic-owl448 <26656284+majestic-owl448@users.noreply.github.com> --- .../66faac4139dbbd5dd632c860.md | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/curriculum/challenges/english/blocks/lab-job-application-form/66faac4139dbbd5dd632c860.md b/curriculum/challenges/english/blocks/lab-job-application-form/66faac4139dbbd5dd632c860.md index c44a86312fe..bfdded8c68b 100644 --- a/curriculum/challenges/english/blocks/lab-job-application-form/66faac4139dbbd5dd632c860.md +++ b/curriculum/challenges/english/blocks/lab-job-application-form/66faac4139dbbd5dd632c860.md @@ -22,7 +22,7 @@ demoType: onClick 1. You should have a `textarea` element with the id `message` for entering a message. 1. You should associate every `input` element with a `label` element. 1. You should have a `button` element with the type `submit` for submitting the form. -1. Add a `:focus` pseudo-class to the `input` and `textarea` elements to change their border color when focused. +1. Add a `:focus` pseudo-class to the `input` and `textarea` elements to change their border color and remove the default outline when focused. 1. The `input`, `select` and `textarea` elements should have an `:invalid` pseudo-class that changes the border color to red when invalid input is detected. 1. The `input`, `select` and `textarea` elements should have a `:valid` pseudo-class that changes the border color to green when valid input is entered. 1. The `button` element should have a `:hover` pseudo-class that changes the background color when hovered over. @@ -105,7 +105,13 @@ assert.isNotEmpty(document.querySelectorAll("div.container > form button[type='s You should add a `:focus` pseudo-class to the `input` and `textarea` elements to change their border color when focused. Use a list selector in the given order. ```js -assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('input:focus, textarea:focus').getPropertyValue('border-color')) +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('input:focus, textarea:focus').getPropertyValue('border-color')); +``` + +You should use the selector for the `:focus` pseudo-class for `input` and `textarea` to also remove the default outline when focused. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input:focus, textarea:focus').getPropertyValue('outline'), 'none'); ``` The `input`, `select` and `textarea` elements should have an `:invalid` pseudo-class that changes the border color to red when invalid input is detected. Use a list selector in the given order.