toBeAccessibleLink()

A link widget provides an interactive reference to a resource.

The target resource can be either external or local, i.e., either outside or within the current page or application.

• WAI Link Pattern
• Link Example

Usage

Syntax

Vanilla JS

test('alert', () => {
  document.body.innerHTML =
    '<a href="https://veiko.github.io/jest-a11y" id="link">Hey, listen!</div>'

  expect(document.getElementById('link')).toBeAccessibleLink()
})

React + Testing Library

import { render, screen } from '@testing-library/react'

test('alert', () => {
  render(
    <a href="https://veiko.github.io/jest-a11y" role="alert">
      Hey, listen!
    </a>,
  )

  expect(screen.getByRole('link')).toBeAccessibleLink()
})

Test Summary

The toBeAccessibleLink matcher tests the following:

✓ element has role link
✓ element activates on Enter

DOM Examples

WAI-ARIA Roles, States, and Properties

1. The element has role link

<!-- ✓ element has role link implicit -->
<a href="https://veiko.github.io/jest-a11y">click me</button>

<!-- ✓ element has role link -->
<div href="https://veiko.github.io/jest-a11y" role="link">click me</div>

<!-- ❌ element has role link -->
<div onclick="window.location='https://veiko.github.io/jest-a11y'">click me</div>