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..6d389bf3d0 --- /dev/null +++ b/apps/www/app/content/components-docs/en/utilities/clickdelegatefor.mdx @@ -0,0 +1,48 @@ +--- +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. + +### 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 new file mode 100644 index 0000000000..36034aeed9 --- /dev/null +++ b/apps/www/app/content/components-docs/no/utilities/clickdelegatefor.mdx @@ -0,0 +1,49 @@ +--- +title: clickdelegatefor +sidebar_title: clickdelegatefor +order: 60 +--- + +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/) +- [https://github.com/openui/open-ui/issues/1104](https://github.com/openui/open-ui/issues/1104) + +## Bruk + +Legg til `data-clickdelegatefor` på et element, og sett verdien til id-en på 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 interaktivt element som `a`, `button` eller `input[type="checked"]`, men du ønsker å utvide klikkflaten. 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. + +### 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 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 { + /* Legg til dine egne stiler her */ +} +``` 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