From e2272e44d5f0c7af2fbb9cf4dbc850c5490764dd Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Sat, 1 Mar 2025 17:12:38 +0100 Subject: [PATCH 1/4] Let only a Card Link cover the whole Card --- packages/css/src/components/card/card.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/css/src/components/card/card.scss b/packages/css/src/components/card/card.scss index ccc34471b7..cfc1470fda 100644 --- a/packages/css/src/components/card/card.scss +++ b/packages/css/src/components/card/card.scss @@ -21,7 +21,7 @@ Remove link focus outline only if :has is supported, which means the outline on the whole card is set */ - &:has(:focus-visible) a:focus { + &:has(:focus-visible) .ams-card__link:focus { outline: none; } @@ -29,7 +29,7 @@ This trick, together with position: relative on the outer wrapper, makes the whole card clickable. Taken from https://inclusive-components.design/cards/ */ - a::after { + .ams-card__link::after { content: ""; display: block; inset-block: 0; From 3d267e92f47bab66ce7f62deba12c972d5e48674 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Sat, 1 Mar 2025 17:13:48 +0100 Subject: [PATCH 2/4] Move link styles into appropriate selector --- packages/css/src/components/card/card.scss | 40 +++++++++++----------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/packages/css/src/components/card/card.scss b/packages/css/src/components/card/card.scss index cfc1470fda..9b404503e3 100644 --- a/packages/css/src/components/card/card.scss +++ b/packages/css/src/components/card/card.scss @@ -16,26 +16,6 @@ outline-style: auto; outline-width: 0.0625rem; } - - /* - Remove link focus outline only if :has is supported, - which means the outline on the whole card is set - */ - &:has(:focus-visible) .ams-card__link:focus { - outline: none; - } - - /* - This trick, together with position: relative on the outer wrapper, makes the whole card clickable. - Taken from https://inclusive-components.design/cards/ - */ - .ams-card__link::after { - content: ""; - display: block; - inset-block: 0; - inset-inline: 0; - position: absolute; - } } .ams-card__heading-group { @@ -50,8 +30,28 @@ text-decoration-thickness: var(--ams-card-link-text-decoration-thickness); text-underline-offset: var(--ams-card-link-text-underline-offset); + /* + This trick, together with position: relative on the outer wrapper, makes the whole card clickable. + Taken from https://inclusive-components.design/cards/ + */ + &::after { + content: ""; + display: block; + inset-block: 0; + inset-inline: 0; + position: absolute; + } + &:hover { color: var(--ams-card-link-hover-color); text-decoration-line: var(--ams-card-link-hover-text-decoration-line); } + + /* + Remove link focus outline only if :has is supported, + which means the outline on the whole card is set + */ + .ams-card:has(:focus-visible) &:focus { + outline: none; + } } From 08c25debb42e17f082dd00fd0976faa6507f6760 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Sat, 1 Mar 2025 17:20:01 +0100 Subject: [PATCH 3/4] Tighten up comments --- packages/css/src/components/card/card.scss | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/packages/css/src/components/card/card.scss b/packages/css/src/components/card/card.scss index 9b404503e3..a80a0a7bf3 100644 --- a/packages/css/src/components/card/card.scss +++ b/packages/css/src/components/card/card.scss @@ -7,10 +7,10 @@ display: grid; gap: var(--ams-card-gap); outline-offset: var(--ams-card-outline-offset); - position: relative; + position: relative; // Allows stretching the card link below. touch-action: manipulation; - /* Set native outline on card if card has focus visible within */ + // Set native outline to Card if it has a visible focus inside. &:has(:focus-visible) { outline-color: -webkit-focus-ring-color; outline-style: auto; @@ -30,10 +30,8 @@ text-decoration-thickness: var(--ams-card-link-text-decoration-thickness); text-underline-offset: var(--ams-card-link-text-underline-offset); - /* - This trick, together with position: relative on the outer wrapper, makes the whole card clickable. - Taken from https://inclusive-components.design/cards/ - */ + // Make the whole Card clickable by making the link cover its entire area. + // Source: https://inclusive-components.design/cards/ &::after { content: ""; display: block; @@ -47,10 +45,7 @@ text-decoration-line: var(--ams-card-link-hover-text-decoration-line); } - /* - Remove link focus outline only if :has is supported, - which means the outline on the whole card is set - */ + // Remove the outline from the link; it’s already on the Card. .ams-card:has(:focus-visible) &:focus { outline: none; } From 23ba0de64edf483a0fbe9981ba81bfae50d20c37 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Wed, 5 Mar 2025 23:25:38 +0100 Subject: [PATCH 4/4] Restore docs on intended selector reuse --- packages/css/src/components/card/card.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/css/src/components/card/card.scss b/packages/css/src/components/card/card.scss index a80a0a7bf3..05ad27becc 100644 --- a/packages/css/src/components/card/card.scss +++ b/packages/css/src/components/card/card.scss @@ -46,6 +46,8 @@ } // Remove the outline from the link; it’s already on the Card. + // Reuses the `.ams-card:has(:focus-visible)` selector above, so that + // browsers that support it apply both styles, while those that don’t apply neither. .ams-card:has(:focus-visible) &:focus { outline: none; }