Link

Overview (v2)

Source: ./src/components/link/v2/Overview.mdx

Link

The link component provides a clickable text element with attributes for setting the URL, base64-encoded URL for SEO purposes, and ARIA label for accessibility. The component emits a click event when you interact with it. You can configure the component to behave as a button and trigger an action instead of navigating to a new page.

Default variation

Story Default:

<oc-link-v2>
  <!--The <a> tag should be placed inside the light DOM to improve SEO.--><a href='#'>Link</a>
</oc-link-v2>

Configuration

The link component offers a variety of styling variants such as primary, secondary, over-color, and over-color-bold. This component is configurable, allowing you to tailor its features and appearance to your specific needs. To explore all the available options and adjust the component, use the component configurator. You can see the changes affect the component in real-time.

Usage guidelines

Before integrating the link component into your project, make sure you have correctly installed the OTTO components package. Look through the variations page for examples of possible component variations. Here, you can discover both common and specific variations that address different use cases.

Info

See the Link UX documentation for detailed user experience guidelines.

Accessibility

The link component comes with a set of built-in accessibility features to ensure a seamless experience for all users.

Use oc-aria-label

To make the link recognizable for screen readers, use the oc-aria-label attribute to provide clear and descriptive context information. See the general accessibility documentation for guidance on using oc-aria-label, including how it works with link and masked link behavior.

Inline link

The inline variation of the link component is designed to be used within text content, allowing it to blend seamlessly with surrounding text. It is particularly useful for providing additional information or context without disrupting the flow of the content.

Note

This is automatically set to true if the link is used inside a p tag or is surrounded by text nodes.

To override this behavior, set the inline attribute to false or true explicitly.

Button or masked link

See Link behavior and masked links in the general accessibility documentation for how oc-aria-label is applied in these scenarios.

Testing masked links

When testing links with base64-encoded hrefs, you can use the exposed APIs to simulate user interactions:

// In your test
const linkElement = document.querySelector("oc-link-v2[base64-href]");

// Unmask the link
linkElement.unmask();

// Verify the href is correct
expect(linkElement.href).toBe("https://example.com/target");

// Simulate a complete user interaction
linkElement.goto();

Programmatic navigation

Trigger navigation programmatically without requiring user interaction:

const linkElement = document.querySelector("oc-link-v2");

// Navigate immediately
linkElement.click();

// Or with unmasking and focusing
linkElement.goto();

Custom event handling

Dispatch custom events for tracking or analytics:

const linkElement = document.querySelector("oc-link-v2");

// Dispatch a tracking event before navigation
const trackingEvent = new CustomEvent("link-interaction", {
  detail: {
    timestamp: Date.now(),
    linkText: linkElement.textContent,
  },
});
linkElement.dispatch(trackingEvent);

Accessibility automation

Programmatically manage focus for accessibility features:

// Focus the first link in a navigation menu
const firstLink = document.querySelector("nav oc-link-v2");
firstLink.focus();

// Focus the next link when arrow key is pressed
const nextLink = firstLink.nextElementSibling;
if (nextLink && nextLink.tagName === "OC-LINK-V2") {
  nextLink.focus();
}

Implementation details

The APIs automatically determine which element to operate on:

1. Light DOM element: If an <a> element is slotted into the default slot, methods are called on that element
2. Shadow DOM element: If the link is rendered using the href or base64-href attributes, methods are called on the shadow DOM anchor element
3. Button mode: If as-button is set, methods are called on the shadow DOM button element

The APIs are designed to be safe to call:

• If the underlying element does not exist, methods return undefined without throwing errors
• If the requested method does not exist on the element, no error is thrown
• Only if the underlying method itself throws an error will that error propagate to the caller

const linkElement = document.querySelector("oc-link-v2");

// Safe to call even if the method doesn't exist
const result = linkElement.invoke("nonExistentMethod");
console.log(result); // undefined

// Errors from the underlying method are still thrown
try {
  linkElement.invoke("methodThatThrows");
} catch (error) {
  console.error("Method threw an error:", error);
}

Configuration (v2)

Source: ./src/components/link/v2/Configuration.mdx

Link configuration

Configure the link component with the controls below and see the changes live in the preview canvas. Click the Show code button within the preview canvas to see the source code for the current component configuration.

Story Default:

<oc-link-v2>
  <!--The <a> tag should be placed inside the light DOM to improve SEO.--><a href='#'>Link</a>
</oc-link-v2>

Interactive configurator (Storybook controls); every option is listed in the API section of this file.

Migration (v2)

Source: ./src/components/link/v2/Migration.mdx

Migration from Link v1 to v2

The oc-link component has been updated from oc-link-v1 to oc-link-v2. This migration guide provides a step-by-step guide to update your project to the latest version.

Skip to:

• What's new
• API changes
• How to migrate

What's new

Web component

The link is now a proper web component instead of a CSS-only class, providing:

• Encapsulated styling
• Consistent behavior across the application
• Better integration with other Otto Components

SEO-friendly links

The <a> tag is placed inside the component slot, preserving native link behavior for search engine crawlers.

API changes

Changed structure

How to migrate

Instead of using a div with the oc-link-v1 class, use the oc-link-v2 component tag to create a link. The oc-link-v2 component can be used as a link or button by adding the href or as-button attribute respectively.

Here's a table mapping deprecated CSS classes to their corresponding replacement attributes in the new version:

Migrate a basic link

To migrate a basic link, replace the anchor tag <a> including the oc-link-v1 class with the oc-link-v2 component tag and keep the href attribute.

<!-- From: -->
<a class="oc-link-v1" href="#">My Link</a>

<!-- To: -->
<oc-link-v2>
  <a href="#">My Link</a>
</oc-link-v2>

Migrate a link with a variant

To migrate a link with a variant, replace the anchor tag <a> including the oc-link-v1 class with the oc-link-v2 component tag and add the variant attribute with the desired value.

<!-- From: -->
<a class="oc-link-v1 oc-link-v1--secondary" href="#">My Link</a>

<!-- To: -->
<oc-link-v2 variant="secondary">
  <a href="#">My Link</a>
</oc-link-v2>

Migrate a link with a size

To migrate a link with a size, replace the anchor tag <a> including the oc-link-v1 class with the oc-link-v2 component tag and add the size attribute with the desired value.

<!-- From: -->
<a class="oc-link-v1 oc-link-v1--size-50" href="#">My Link</a>

<!-- To: -->
<oc-link-v2 size="50">
  <a href="#">My Link</a>
</oc-link-v2>

Migrate a link as a button

To migrate a link as a button, replace the button tag including the oc-link-v1 class with the oc-link-v2 component tag and add the as-button attribute.

<!-- From: -->
<button class="oc-link-v1">My Link</button>

<!-- To: -->
<oc-link-v2 as-button="">My Link</oc-link-v2>

API v2

Source: ./src/components/link/v2/LinkV2.API.g.mdx

Link v2 API

API: <oc-link-v2> (LinkV2)

The Link component provides a clickable text element with attributes for setting the URL, base64 encoded URL for SEO purposes, ARIA label for accessibility, and emitting a click event when interacted with. It can also behave as a button and trigger an action instead of navigating to a new page.

The native a tag is moved to the default slot for SEO purposes.

Attributes / properties

Slots

Events

Methods

• focus: () => void

  Calls the native focus() method on the underlying element.

  This is a convenience method that internally uses invoke("focus").

  Returns: void

  Example:

  const link = document.querySelector("oc-link-v2");
  link.focus();
  

• click: () => void

  Calls the native click() method on the underlying element.

  This is a convenience method that internally uses invoke("click").

  Returns: void

  Example:

  const link = document.querySelector("oc-link-v2");
  link.click();
  

• goto: () => void

  This is a shorthand function that combines three operations:

  1. Unmasks the link href (if it's base64-encoded)
  2. Focuses the link element
  3. Clicks the link element

  This method simulates a complete user interaction with the link. It is especially useful for testing masked links.

  Returns: void

  Example:

  const link = document.querySelector("oc-link-v2[base64-href]");
  link.goto();
  

• unmask: () => void

  Calls the underlying unmasking function to decode and apply the base64-encoded href. This is used when the link is rendered with the base64-href attribute for SEO purposes. Normally, unmasking happens automatically on user interaction, but this method allows you to trigger it programmatically for integration testing or other scenarios.

  Returns: void

  Example:

  const linkElement = document.querySelector("oc-link-v2[base64-href]");
  
  // Unmask the link programmatically
  linkElement.unmask();
  
  // Now the href is accessible
  console.log(linkElement.href);
  

• dispatch: <E extends Event>(event: E) => void

  Calls dispatchEvent on the underlying element to dispatch the given event. This is useful for testing purposes, to simulate user interactions or to trigger custom events on the underlying element.

  Parameters:

  • event: E The event to dispatch on the underlying element

  Returns: void

  Example:

  const linkElement = document.querySelector("oc-link-v2");
  
  // Dispatch a custom event
  const customEvent = new CustomEvent("custom-action", {
    detail: { action: "track-click" },
  });
  linkElement.dispatch(customEvent);
  
  // Dispatch a native event
  const mouseEvent = new MouseEvent("mouseenter");
  linkElement.dispatch(mouseEvent);
  

• invoke: <R>(methodIdentifier: string, ...args: unknown[]) => R

  Genric helper method used to invoke (call) functions on the underlying element which currently acts as link in the link component. This is useful in cases where there is no light dom element of the state of the link is not deterministic.

  The method will invoke the function on either a light dom link. element if it exists, or on the underlying element inside shadow dom in cases there is no light dom anchor.

  The result of the method depends on the implementation of the underlying element and must be assured by the consumer of the component.

  If there is no suitable element or method to invoke, it will return undefined. This function will only produce errors if the underlying method throws an error.

  The function will not throw if the invocation is not possible.

  Parameters:

  • methodIdentifier: string The name of the method to invoke on the underlying element
  • args: unknown[] The arguments to pass to the method

  Returns: R The result of the method invocation, or undefined if the element or method does not exist

CSS custom properties

Variations (v2)

Source: ./src/components/link/v2/Variations.mdx

Variations

Listed below are the most common variations of the link component as well as specific component variations for different use cases.

You can explore all available options using the component configurator, adjust the component to your needs, and see the changes live in a preview canvas.

Default

Story: components-link-variations--default · tags: components

The default configuration represents the most common link type and uses the href attribute for navigation.

<oc-link-v2>
  <!--The <a> tag should be placed inside the light DOM to improve SEO.--><a href='#'>Link</a>
</oc-link-v2>

Secondary

Story: components-link-variations--secondary · tags: components

The secondary variant follows the same pattern as the default variant but with a different styling.

Args: variant=secondary

<oc-link-v2 variant="secondary">
  <!--The <a> tag should be placed inside the light DOM to improve SEO.--><a href='#'>Link</a>
</oc-link-v2>

Over Color variant

Story: components-link-variations--over-color-variant · tags: components

The over-color variant follows the same pattern as the default variant but with an underline added, to be used on colored surfaces such as banners.

Args: variant=over-color

<oc-link-v2 variant="over-color">
  <!--The <a> tag should be placed inside the light DOM to improve SEO.--><a href='#'>Link</a>
</oc-link-v2>

Over Color variant bold

Story: components-link-variations--over-color-variant-bold · tags: components

The over-color bold variant follows the same pattern as the default variant but with a bold font weight and an underline added.

Args: variant=over-color-bold

<oc-link-v2 variant="over-color-bold">
  <!--The <a> tag should be placed inside the light DOM to improve SEO.--><a href='#'>Link</a>
</oc-link-v2>

Inverted

Story: components-link-variations--inverted · tags: components

The inverted variant follows the same pattern as the default variant but with an inverted color added, to be used on dark contrast backgrounds to improve readability

Args: variant=inverted

<oc-link-v2 variant="inverted">
  <!--The <a> tag should be placed inside the light DOM to improve SEO.--><a href='#'>Link</a>
</oc-link-v2>

Inline

Story: components-link-variations--inline · tags: components

The inline attribute allows the link to be rendered inline with a decorative underline.

<div style="display: flex;  gap: 16px;">
  <div style="max-width: 456px; border: 1px solid #ccc; padding: 16px;">
    <span class="oc-copy-100">
      Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie
      sie aussehen. Manchmal benutzt man Worte wie
      <oc-link-v2 size="inherit" inline="true">Hamburgefonts</oc-link-v2>,
      <oc-link-v2 size="inherit" inline="true">Rafgenduks</oc-link-v2> oder
      <oc-link-v2 size="inherit" inline="true">Handgloves</oc-link-v2>, um Schriften zu
      testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese
      Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy
      <oc-link-v2 variant="primary" icon-right="smiley-happy" inline="true"
        >old dog</oc-link-v2
      >
      . Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and
      Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In
      Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum. Seit
      1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem
      Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit bis zu 245
      € oder 368 $
      <oc-link-v2 variant="primary" icon-right="smiley-negative" inline="true"
        >bestraft</oc-link-v2
      >. Genauso wichtig in Typoblindtexten sind mittlerweile auch Âçcèñtë, die in neueren
      Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes
      Feld sind
      <oc-link-v2 variant="secondary" size="inherit" inline="true"
        >OpenType-Funktionalitäten</oc-link-v2
      >. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder
      Ligaturen (sehr pfiffig) nicht richtig dargestellt werden.
    </span>
  </div>
</div>
<br />
<oc-link-v2 size="inherit"
  >Ich bin nicht teil des Textfluss, also sollte ich auch keinen Unterstrich
  bekommen!</oc-link-v2
>

{
  name: "Inline",
  argTypes: hideControlsBadge(Metadata),
  parameters: {
    controls: {
      disabled: true
    }
  },
  render() {
    return html`
      <div style="display: flex;  gap: 16px;">
        <div style="max-width: 456px; border: 1px solid #ccc; padding: 16px;">
          <span class="oc-copy-100">
            Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie
            sie aussehen. Manchmal benutzt man Worte wie
            <oc-link-v2 size="inherit" inline="true">Hamburgefonts</oc-link-v2>,
            <oc-link-v2 size="inherit" inline="true">Rafgenduks</oc-link-v2> oder
            <oc-link-v2 size="inherit" inline="true">Handgloves</oc-link-v2>, um Schriften zu
            testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese
            Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy
            <oc-link-v2 variant="primary" icon-right="smiley-happy" inline="true"
              >old dog</oc-link-v2
            >
            . Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and
            Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In
            Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum. Seit
            1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem
            Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit bis zu 245
            € oder 368 $
            <oc-link-v2 variant="primary" icon-right="smiley-negative" inline="true"
              >bestraft</oc-link-v2
            >. Genauso wichtig in Typoblindtexten sind mittlerweile auch Âçcèñtë, die in neueren
            Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes
            Feld sind
            <oc-link-v2 variant="secondary" size="inherit" inline="true"
              >OpenType-Funktionalitäten</oc-link-v2
            >. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder
            Ligaturen (sehr pfiffig) nicht richtig dargestellt werden.
          </span>
        </div>
      </div>
      <br />
      <oc-link-v2 size="inherit"
        >Ich bin nicht teil des Textfluss, also sollte ich auch keinen Unterstrich
        bekommen!</oc-link-v2
      >
    `;
  }
}

Inverted bold

Story: components-link-variations--inverted-bold · tags: components

The inverted bold variant follows the same pattern as the default variant but with a bold font weight and an inverted color added, to be used on dark contrast backgrounds to improve readability

Args: variant=inverted-bold

<oc-link-v2 variant="inverted-bold">
  <!--The <a> tag should be placed inside the light DOM to improve SEO.--><a href='#'>Link</a>
</oc-link-v2>

With button behavior

Story: components-link-variations--with-button-behavior · tags: components

Variation of the default configuration using the as-button attribute to trigger an action when clicked instead of navigating to a new page.

Args: as-button=true, defaultSlot=Link

<oc-link-v2 as-button>Link</oc-link-v2>

With left icon

Story: components-link-variations--with-left-icon · tags: components

Variation of the default configuration with a left icon using the icon-type-left attribute.

Args: icon-left=smiley-positive

<oc-link-v2 icon-left="smiley-positive">
  <!--The <a> tag should be placed inside the light DOM to improve SEO.--><a href='#'>Link</a>
</oc-link-v2>

With right icon

Story: components-link-variations--with-right-icon · tags: components

Variation of the default configuration with a right icon using the icon-type-right attribute.

Args: icon-right=smiley-positive

<oc-link-v2 icon-right="smiley-positive">
  <!--The <a> tag should be placed inside the light DOM to improve SEO.--><a href='#'>Link</a>
</oc-link-v2>

With masked link behavior

Story: components-link-variations--with-masked-link-behavior · tags: components

The link component as a masked link. Search engines will not detect the href.

Args: base64-href=Iw==, defaultSlot=Link

<oc-link-v2 base64-href="Iw==">Link</oc-link-v2>

With link switch behavior

Story: components-link-variations--with-link-switch-behavior · tags: components

The link component as a link with switch behavior. Search engines will detect the href, while users receive the Base64-encoded version.

Args: base64-href=Iz92YXJpYW50PWZvbw==, defaultSlot=<!--Search engines will detect the href, while users receive the Base64-encoded version.--><a href='#'>Link</a>

<oc-link-v2 base64-href="Iz92YXJpYW50PWZvbw==">
  <!--Search engines will detect the href, while users receive the Base64-encoded version.--><a href='#'>Link</a>
</oc-link-v2>

Link size inherit

Story: components-link-variations--link-size-inherit · tags: components

Variation link size inherit using the size attribute with the value inherit. This will use the font size of the parent element.

Args: size=inherit, defaultSlot=<a href='#'>Link within a headline</a>

<h1 class="oc-headline-300">
  <oc-link-v2 size="inherit" style="display: block"><a href='#'>Link within a headline</a></oc-link-v2>
</h1>

{
  name: "Link size inherit",
  args: {
    size: "inherit",
    defaultSlot: "<a href='#'>Link within a headline</a>"
  },
  render({
    defaultSlot,
    ...props
  }) {
    return html`
      <h1 class="oc-headline-300">
        <oc-link-v2 ${spread(props)} style="display: block">${unsafeHTML(defaultSlot)}</oc-link-v2>
      </h1>
    `;
  }
}

Demo: Inline links

Story: components-link-variations--demo-inline-links · tags: components, skip-test

Demo with inline links.

<div style="display: flex;  gap: 16px;">
  <div style="max-width: 456px; border: 1px solid #ccc; padding: 16px;">
    <p class="oc-copy-100">
      Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie
      sie aussehen. Manchmal benutzt man Worte wie
      <oc-link-v2 inline="false" size="inherit"> <a href="#">Hamburgefonts</a> </oc-link-v2>,
      <oc-link-v2 size="inherit">Rafgenduks</oc-link-v2> oder
      <oc-link-v2 size="inherit">Handgloves</oc-link-v2>, um Schriften zu testen. Manchmal
      Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«.
      Sehr bekannt ist dieser: The quick brown fox jumps over the lazy
      <oc-link-v2 variant="primary" icon-right="smiley-happy">old dog</oc-link-v2>
      . Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and
      Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In
      Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum. Seit
      1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem
      Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit bis zu 245
      € oder 368 $
      <oc-link-v2 variant="primary" icon-right="smiley-negative">bestraft</oc-link-v2>.
      Genauso wichtig in Typoblindtexten sind mittlerweile auch Âçcèñtë, die in neueren
      Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes
      Feld sind
      <oc-link-v2 variant="secondary" size="inherit">OpenType-Funktionalitäten</oc-link-v2>.
      Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder
      Ligaturen (sehr pfiffig) nicht richtig dargestellt werden.
    </p>
  </div>
  <div
    style="max-width: 456px; border: 1px solid #ccc; padding: 16px; background-color: var(--oc-semantic-color-inverted-background) !important;"
  >
    <p class="oc-copy-100" style="color: var(--oc-semantic-color-text-inverted) !important;">
      Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie
      sie aussehen. Manchmal benutzt man Worte wie
      <oc-link-v2 inline="false" variant="inverted" size="inherit">Hamburgefonts</oc-link-v2>,
      <oc-link-v2 variant="inverted" size="inherit">Rafgenduks</oc-link-v2> oder
      <oc-link-v2 variant="inverted" size="inherit">Handgloves</oc-link-v2>, um Schriften zu
      testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese
      Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy
      <oc-link-v2 variant="inverted" icon-right="smiley-happy">old dog</oc-link-v2>. Oft
      werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are
      testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch
      sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum. Seit 1975 fehlen
      in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem Jahr 2034
      Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit bis zu 245 € oder
      368 $ <oc-link-v2 icon-right="smiley-negative" variant="inverted">bestraft</oc-link-v2>.
      Genauso wichtig in Typoblindtexten sind mittlerweile auch Âçcèñtë, die in neueren
      Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes
      Feld sind
      <oc-link-v2 variant="inverted" size="inherit">OpenType-Funktionalitäten</oc-link-v2>. Je
      nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen
      (sehr pfiffig) nicht richtig dargestellt werden.
    </p>
  </div>
</div>

{
  name: "Demo: Inline links",
  tags: ["skip-test"],
  argTypes: hideControlsBadge(Metadata),
  parameters: {
    chromatic: {
      hideInChromatic: true
    },
    controls: {
      disabled: true
    }
  },
  render() {
    return html`
      <div style="display: flex;  gap: 16px;">
        <div style="max-width: 456px; border: 1px solid #ccc; padding: 16px;">
          <p class="oc-copy-100">
            Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie
            sie aussehen. Manchmal benutzt man Worte wie
            <oc-link-v2 inline="false" size="inherit"> <a href="#">Hamburgefonts</a> </oc-link-v2>,
            <oc-link-v2 size="inherit">Rafgenduks</oc-link-v2> oder
            <oc-link-v2 size="inherit">Handgloves</oc-link-v2>, um Schriften zu testen. Manchmal
            Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«.
            Sehr bekannt ist dieser: The quick brown fox jumps over the lazy
            <oc-link-v2 variant="primary" icon-right="smiley-happy">old dog</oc-link-v2>
            . Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and
            Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In
            Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum. Seit
            1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem
            Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit bis zu 245
            € oder 368 $
            <oc-link-v2 variant="primary" icon-right="smiley-negative">bestraft</oc-link-v2>.
            Genauso wichtig in Typoblindtexten sind mittlerweile auch Âçcèñtë, die in neueren
            Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes
            Feld sind
            <oc-link-v2 variant="secondary" size="inherit">OpenType-Funktionalitäten</oc-link-v2>.
            Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder
            Ligaturen (sehr pfiffig) nicht richtig dargestellt werden.
          </p>
        </div>
        <div
          style="max-width: 456px; border: 1px solid #ccc; padding: 16px; background-color: var(--oc-semantic-color-inverted-background) !important;"
        >
          <p class="oc-copy-100" style="color: var(--oc-semantic-color-text-inverted) !important;">
            Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie
            sie aussehen. Manchmal benutzt man Worte wie
            <oc-link-v2 inline="false" variant="inverted" size="inherit">Hamburgefonts</oc-link-v2>,
            <oc-link-v2 variant="inverted" size="inherit">Rafgenduks</oc-link-v2> oder
            <oc-link-v2 variant="inverted" size="inherit">Handgloves</oc-link-v2>, um Schriften zu
            testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese
            Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy
            <oc-link-v2 variant="inverted" icon-right="smiley-happy">old dog</oc-link-v2>. Oft
            werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are
            testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch
            sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum. Seit 1975 fehlen
            in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem Jahr 2034
            Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit bis zu 245 € oder
            368 $ <oc-link-v2 icon-right="smiley-negative" variant="inverted">bestraft</oc-link-v2>.
            Genauso wichtig in Typoblindtexten sind mittlerweile auch Âçcèñtë, die in neueren
            Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes
            Feld sind
            <oc-link-v2 variant="inverted" size="inherit">OpenType-Funktionalitäten</oc-link-v2>. Je
            nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen
            (sehr pfiffig) nicht richtig dargestellt werden.
          </p>
        </div>
      </div>
    `;
  }
}

Interaction tests (LinkV2.interactions.stories.ts)

Interaction test stories (automated tests, not usage patterns).

Should Handle Base 64 Href

Story: components-link-interaction-tests--should-handle-base-64-href · tags: play-fn

<oc-link-v2 base64-href="L2Zvbw==">Link</oc-link-v2>

{
  render() {
    return html`<oc-link-v2 base64-href="L2Zvbw==">Link</oc-link-v2>`;
  },
  async play({
    canvasElement
  }) {
    const ocLink = canvasElement.getElementsByTagName("oc-link-v2").item(0)!;
    ocLink.focus();
    await tick();

    // instead of the div element there should now be an anchor element
    const linkElement = ocLink.shadowRoot!.children.item(0)! as HTMLAnchorElement;
    await expect(linkElement.tagName).toBe("A");

    // anchor element inside the shadow root should have the correct href attribute
    await expect(linkElement.getAttribute("href")).toBe(`/foo`);

    // anchor element inside the shadow root should have the same fully href as the host
    await expect(ocLink.href).toBe(`${window.location.origin}/foo`);
    await expect(linkElement.href).toBe(`${window.location.origin}/foo`);
  }
}

Should Handle Base 64 Href With An A Tag

Story: components-link-interaction-tests--should-handle-base-64-href-with-an-a-tag · tags: play-fn

<oc-link-v2 base64-href=${btoa("/foo")}><a href="#">Link</a></oc-link-v2>

{
  render() {
    return html`<oc-link-v2 base64-href=${btoa("/foo")}><a href="#">Link</a></oc-link-v2>`;
  },
  async play({
    canvasElement
  }) {
    const ocLink = canvasElement.getElementsByTagName("oc-link-v2").item(0)!;
    const anchor = canvasElement.getElementsByTagName("a").item(0)!;
    anchor.focus();
    await tick();

    // the div element should still be there
    const interactiveElement = ocLink.shadowRoot!.children.item(0)!;
    await expect(interactiveElement.tagName).toBe("DIV");

    // The anchor element should have the correct href attribute
    await expect(anchor.getAttribute("href")).toBe(`/foo`);
    await expect(anchor.href).toBe(`${window.location.origin}/foo`);
  }
}