From d435d9472dea921c6a37d988fa8b38dbb46d39e4 Mon Sep 17 00:00:00 2001 From: Barsnes Date: Wed, 25 Feb 2026 10:08:26 +0100 Subject: [PATCH 1/7] docs: clickdelegatefor --- .../en/utilities/clickdelegatefor.mdx | 27 +++++++++++++++++++ .../no/utilities/clickdelegatefor.mdx | 27 +++++++++++++++++++ .../app/content/components/field/no/code.mdx | 4 +-- 3 files changed, 56 insertions(+), 2 deletions(-) create mode 100644 apps/www/app/content/components-docs/en/utilities/clickdelegatefor.mdx create mode 100644 apps/www/app/content/components-docs/no/utilities/clickdelegatefor.mdx diff --git a/apps/www/app/content/components-docs/en/utilities/clickdelegatefor.mdx b/apps/www/app/content/components-docs/en/utilities/clickdelegatefor.mdx new file mode 100644 index 0000000000..6f9ce08f3e --- /dev/null +++ b/apps/www/app/content/components-docs/en/utilities/clickdelegatefor.mdx @@ -0,0 +1,27 @@ +--- +title: clickdelegatefor +sidebar_title: clickdelegatefor +order: 60 +--- + +Used to delegate click to another element. This is useful to make elements that cannot be focused, such as a `
`, clickable without changing their semantic meaning. + +Based on these: +- [https://open-ui.org/components/link-area-delegation-explainer/](https://open-ui.org/components/link-area-delegation-explainer/) +- [https://github.com/openui/open-ui/issues/1104](https://github.com/openui/open-ui/issues/1104) + +## Usage + +You add `data-clickdelegatefor` to an element, and set the value to the id of the element you want to delegate the click to. + +```html +
+ Go to example.com + Clicking this card will open example in a new tab +
+``` + +### When should I use `data-clickdelegatefor`? +Use `data-clickdelegatefor` when you have an element that cannot be focused, but you want it to be clickable and perform an action. This is especially useful for elements like `
`, ``, or other non-interactive elements that you want to make interactive without changing their semantic meaning. + +In the example above, we make a card (`
`) clickable by delegating the click to a link (``). This means that screen reader users get standard focus on the link, but the entire card will be clickable, improving the user experience without compromising accessibility. diff --git a/apps/www/app/content/components-docs/no/utilities/clickdelegatefor.mdx b/apps/www/app/content/components-docs/no/utilities/clickdelegatefor.mdx new file mode 100644 index 0000000000..38a04e0aeb --- /dev/null +++ b/apps/www/app/content/components-docs/no/utilities/clickdelegatefor.mdx @@ -0,0 +1,27 @@ +--- +title: clickdelegatefor +sidebar_title: clickdelegatefor +order: 60 +--- + +For å delegere klikk til et annet element. Dette er nyttig for å kunne gjøre elementer som ikke kan fokuseres, som for eksempel en `
`, klikkbare uten å endre deres semantiske betydning. + +Baserer ser på disse: +- [https://open-ui.org/components/link-area-delegation-explainer/](https://open-ui.org/components/link-area-delegation-explainer/) +- [https://github.com/openui/open-ui/issues/1104](https://github.com/openui/open-ui/issues/1104) + +## Bruk + +Du legger til `data-clickdelegatefor` på et element, og setter verdien til id-en til elementet du vil delegere klikket til. + +```html +
+ Gå til example.com + Trykk på kortet for å åpne eksemplet i en ny fane +
+``` + +### Når bør jeg bruke `data-clickdelegatefor`? +Bruk `data-clickdelegatefor` når du har et element som ikke kan fokuseres, men du ønsker at det skal kunne klikkes på og utføre en handling. Dette er spesielt nyttig for elementer som `
`, ``, eller andre ikke-interaktive elementer som du vil gjøre interaktive uten å endre deres semantiske betydning. + +I eksempelet ovenfor gjør vi et kort (`
`) klikkbart ved å delegere klikket til en lenke (``). Dette betyr at skjermleserbrukere får standard fokus på lenka, men hele kortet vil være klikkbart, noe som forbedrer brukeropplevelsen uten å gå på bekostning av tilgjengeligheten. diff --git a/apps/www/app/content/components/field/no/code.mdx b/apps/www/app/content/components/field/no/code.mdx index 714ecf3860..e7522e140e 100644 --- a/apps/www/app/content/components/field/no/code.mdx +++ b/apps/www/app/content/components/field/no/code.mdx @@ -41,7 +41,7 @@ Du kan endre teksten ved å sende inn props, som du kan se øverst på siden. Sp ## HTML Legg klassenavnet `ds-field` på `` elementet. -`` kobler sammen label, input og valideringsmelding. +`` kobler sammen label, input, valideringsmelding og counter. ```html @@ -55,7 +55,7 @@ Legg klassenavnet `ds-field` på `` elementet. ### Antall tegn -For å få en teller på inout og textarea, legg til en `

` med attributtet `data-field="counter"` inne i `ds-field`. +For å få en teller på input og textarea, legg til en `

` med attributtet `data-field="counter"` inne i `ds-field`. ```html From f52c8e0e28c6806f4df5ad0df6f5d971a36b8288 Mon Sep 17 00:00:00 2001 From: Tobias Barsnes Date: Wed, 25 Feb 2026 13:19:34 +0100 Subject: [PATCH 2/7] Apply suggestions from code review Co-authored-by: Michael Marszalek --- .../content/components-docs/no/utilities/clickdelegatefor.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/www/app/content/components-docs/no/utilities/clickdelegatefor.mdx b/apps/www/app/content/components-docs/no/utilities/clickdelegatefor.mdx index 38a04e0aeb..5c32fbbff0 100644 --- a/apps/www/app/content/components-docs/no/utilities/clickdelegatefor.mdx +++ b/apps/www/app/content/components-docs/no/utilities/clickdelegatefor.mdx @@ -12,7 +12,7 @@ Baserer ser på disse: ## Bruk -Du legger til `data-clickdelegatefor` på et element, og setter verdien til id-en til elementet du vil delegere klikket til. +Legg til `data-clickdelegatefor` på et element, og sett verdien til id-en på elementet du vil delegere klikket til. ```html

From 61346fed9945156c3aacb19a2d7fe4e416799755 Mon Sep 17 00:00:00 2001 From: Tobias Barsnes Date: Wed, 25 Feb 2026 14:20:26 +0100 Subject: [PATCH 3/7] Update apps/www/app/content/components-docs/no/utilities/clickdelegatefor.mdx Co-authored-by: Michael Marszalek --- .../content/components-docs/no/utilities/clickdelegatefor.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/www/app/content/components-docs/no/utilities/clickdelegatefor.mdx b/apps/www/app/content/components-docs/no/utilities/clickdelegatefor.mdx index 5c32fbbff0..24032389fd 100644 --- a/apps/www/app/content/components-docs/no/utilities/clickdelegatefor.mdx +++ b/apps/www/app/content/components-docs/no/utilities/clickdelegatefor.mdx @@ -4,7 +4,7 @@ sidebar_title: clickdelegatefor order: 60 --- -For å delegere klikk til et annet element. Dette er nyttig for å kunne gjøre elementer som ikke kan fokuseres, som for eksempel en `
`, klikkbare uten å endre deres semantiske betydning. +Brukes til å delegere klikk fra et HTML element til et annet. Dette er nyttig for å kunne gjøre elementer som ikke kan fokuseres klikkbare uten å endre deres semantiske betydning. Baserer ser på disse: - [https://open-ui.org/components/link-area-delegation-explainer/](https://open-ui.org/components/link-area-delegation-explainer/) From d83ae6128c62af3990828f4fd4d2ae15122bc751 Mon Sep 17 00:00:00 2001 From: Barsnes Date: Thu, 26 Feb 2026 07:40:11 +0100 Subject: [PATCH 4/7] add nested clickable elements and css --- .../en/utilities/clickdelegatefor.mdx | 21 ++++++++++++++++++ .../no/utilities/clickdelegatefor.mdx | 22 +++++++++++++++++++ 2 files changed, 43 insertions(+) diff --git a/apps/www/app/content/components-docs/en/utilities/clickdelegatefor.mdx b/apps/www/app/content/components-docs/en/utilities/clickdelegatefor.mdx index 6f9ce08f3e..6d389bf3d0 100644 --- a/apps/www/app/content/components-docs/en/utilities/clickdelegatefor.mdx +++ b/apps/www/app/content/components-docs/en/utilities/clickdelegatefor.mdx @@ -25,3 +25,24 @@ You add `data-clickdelegatefor` to an element, and set the value to the id of th Use `data-clickdelegatefor` when you have an element that cannot be focused, but you want it to be clickable and perform an action. This is especially useful for elements like `
`, ``, or other non-interactive elements that you want to make interactive without changing their semantic meaning. In the example above, we make a card (`
`) clickable by delegating the click to a link (``). This means that screen reader users get standard focus on the link, but the entire card will be clickable, improving the user experience without compromising accessibility. + +### Nested clickable elements +If you add other clickable elements inside the card, such as a button, `data-clickdelegatefor` will not delegate the click when you click on the button. This applies to all interactive elements. + +```html +
+ Go to example.com + Clicking this card will open example in a new tab + +
+``` + +### CSS + +The element that receives the delegated click will get the class `.\:click-delegate-hover` when you hover over the element with `data-clickdelegatefor`. This allows you to style what should be clickable, for example by adding a hover effect. + +```css +.\:click-delegate-hover { + /* Add your own styles here */ +} +``` diff --git a/apps/www/app/content/components-docs/no/utilities/clickdelegatefor.mdx b/apps/www/app/content/components-docs/no/utilities/clickdelegatefor.mdx index 24032389fd..ea85af810f 100644 --- a/apps/www/app/content/components-docs/no/utilities/clickdelegatefor.mdx +++ b/apps/www/app/content/components-docs/no/utilities/clickdelegatefor.mdx @@ -25,3 +25,25 @@ Legg til `data-clickdelegatefor` på et element, og sett verdien til id-en på e Bruk `data-clickdelegatefor` når du har et element som ikke kan fokuseres, men du ønsker at det skal kunne klikkes på og utføre en handling. Dette er spesielt nyttig for elementer som `
`, ``, eller andre ikke-interaktive elementer som du vil gjøre interaktive uten å endre deres semantiske betydning. I eksempelet ovenfor gjør vi et kort (`
`) klikkbart ved å delegere klikket til en lenke (``). Dette betyr at skjermleserbrukere får standard fokus på lenka, men hele kortet vil være klikkbart, noe som forbedrer brukeropplevelsen uten å gå på bekostning av tilgjengeligheten. + +### Nøsta klikkbare elementer + +Dersom du legger andre klikkbare elementer inne i kortet, som for eksempel en knapp, vil `data-clickdelegatefor` ikke delegere klikket når du klikker på knappen. Dette gjelder alle interaktive elementer. + +```html +
+ Gå til example.com + Trykk på kortet for å åpne eksemplet i en ny fane + +
+``` + +### CSS + +Elementet som får delegelt klikk vil få klassen `.\:click-delegate-hover` når du hover over elementet med `data-clickdelegatefor`. Dette gjør at du kan style det som skal være klikkbart, for eksempel ved å legge til en hover-effekt. + +```css +.\:click-delegate-hover { + /* Legg til dine egne stiler her */ +} +``` From 78a9a5e96ef293e6ed2215b19661eed2c79d838f Mon Sep 17 00:00:00 2001 From: Barsnes Date: Fri, 27 Feb 2026 10:14:44 +0100 Subject: [PATCH 5/7] suggestions --- .../content/components-docs/no/utilities/clickdelegatefor.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/www/app/content/components-docs/no/utilities/clickdelegatefor.mdx b/apps/www/app/content/components-docs/no/utilities/clickdelegatefor.mdx index ea85af810f..51a60120aa 100644 --- a/apps/www/app/content/components-docs/no/utilities/clickdelegatefor.mdx +++ b/apps/www/app/content/components-docs/no/utilities/clickdelegatefor.mdx @@ -4,7 +4,7 @@ sidebar_title: clickdelegatefor order: 60 --- -Brukes til å delegere klikk fra et HTML element til et annet. Dette er nyttig for å kunne gjøre elementer som ikke kan fokuseres klikkbare uten å endre deres semantiske betydning. +Dette er nyttig når du for eksempel vil gjøre en helt tabellrad klikkbar, eller et kort klikkbart uten at hele kortets innhold blir lenketeksten for skjermlesere. Baserer ser på disse: - [https://open-ui.org/components/link-area-delegation-explainer/](https://open-ui.org/components/link-area-delegation-explainer/) @@ -40,7 +40,7 @@ Dersom du legger andre klikkbare elementer inne i kortet, som for eksempel en kn ### CSS -Elementet som får delegelt klikk vil få klassen `.\:click-delegate-hover` når du hover over elementet med `data-clickdelegatefor`. Dette gjør at du kan style det som skal være klikkbart, for eksempel ved å legge til en hover-effekt. +Elementet som får delegert klikk vil få klassen `.\:click-delegate-hover` når du hover over elementet med `data-clickdelegatefor`. Dette gjør at du kan style det som skal være klikkbart, for eksempel ved å legge til en hover-effekt. ```css .\:click-delegate-hover { From 8472eaf04b273796e71874f7f7c5f13e94d18ecf Mon Sep 17 00:00:00 2001 From: Tobias Barsnes Date: Fri, 27 Feb 2026 10:15:07 +0100 Subject: [PATCH 6/7] Update apps/www/app/content/components-docs/no/utilities/clickdelegatefor.mdx Co-authored-by: Eirik Backer --- .../content/components-docs/no/utilities/clickdelegatefor.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/www/app/content/components-docs/no/utilities/clickdelegatefor.mdx b/apps/www/app/content/components-docs/no/utilities/clickdelegatefor.mdx index 51a60120aa..387ad72003 100644 --- a/apps/www/app/content/components-docs/no/utilities/clickdelegatefor.mdx +++ b/apps/www/app/content/components-docs/no/utilities/clickdelegatefor.mdx @@ -22,7 +22,7 @@ Legg til `data-clickdelegatefor` på et element, og sett verdien til id-en på e ``` ### Når bør jeg bruke `data-clickdelegatefor`? -Bruk `data-clickdelegatefor` når du har et element som ikke kan fokuseres, men du ønsker at det skal kunne klikkes på og utføre en handling. Dette er spesielt nyttig for elementer som `
`, ``, eller andre ikke-interaktive elementer som du vil gjøre interaktive uten å endre deres semantiske betydning. +Bruk `data-clickdelegatefor` når du har et interaktivt element som `a`, `button` eller `input[type="checked"]`, men du ønsker å utvide klikkflaten til for å utføre en handling. Dette er spesielt nyttig for for tabellrader (``) og cards(`
`). I eksempelet ovenfor gjør vi et kort (`
`) klikkbart ved å delegere klikket til en lenke (``). Dette betyr at skjermleserbrukere får standard fokus på lenka, men hele kortet vil være klikkbart, noe som forbedrer brukeropplevelsen uten å gå på bekostning av tilgjengeligheten. From 70a54d8226fefc6384f2b369e8649c0d882fa311 Mon Sep 17 00:00:00 2001 From: Barsnes Date: Fri, 27 Feb 2026 10:16:19 +0100 Subject: [PATCH 7/7] typo --- .../content/components-docs/no/utilities/clickdelegatefor.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/www/app/content/components-docs/no/utilities/clickdelegatefor.mdx b/apps/www/app/content/components-docs/no/utilities/clickdelegatefor.mdx index 387ad72003..36034aeed9 100644 --- a/apps/www/app/content/components-docs/no/utilities/clickdelegatefor.mdx +++ b/apps/www/app/content/components-docs/no/utilities/clickdelegatefor.mdx @@ -22,7 +22,7 @@ Legg til `data-clickdelegatefor` på et element, og sett verdien til id-en på e ``` ### Når bør jeg bruke `data-clickdelegatefor`? -Bruk `data-clickdelegatefor` når du har et interaktivt element som `a`, `button` eller `input[type="checked"]`, men du ønsker å utvide klikkflaten til for å utføre en handling. Dette er spesielt nyttig for for tabellrader (``) og cards(`