toBeAccessibleMeter()

A meter is a graphical display of a numeric value that varies within a defined range.

• WAI Meter Pattern
• Meter Example

Usage

Syntax

Vanilla JS

test('meter', () => {
  document.body.innerHTML = '<div role="meter" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" aria-label="progress" />'

  expect(document.getElementById('meter')).toBeAccessibleMeter()
})

React + Testing Library

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

test('meter', () => {
  render(
    <div aria-label="progress" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" data-testid="meter" role="meter">
      <div aria-hidden="true" width="100%" />
    </div>,
  )

  expect(screen.getByTestId('meter')).toBeAccessibleMeter()
})

Test Summary

The matcher tests the following:

✓ element has role meter
✓ element has accessible label
✓ element has aria-valuemin set to a decimal value less than aria-valuemax
✓ element has aria-valuenow set to a decimal value between aria-valuemin and aria-valuemax

WAI-ARIA Roles, States, and Properties

1. The widget has a role of meter.

<!-- ✓ element has role meter -->
<div aria-label="progress" aria-valuemin="0" aria-valuemax="1" role="meter" />

<!-- ❌ element has role meter -->
<div aria-label="progress" />

2. The widget has an accessible label.

<!-- ✓ element has accessible label -->
<div aria-label="progress" aria-valuemin="0" aria-valuemax="1" role="meter" />

<!-- ❌ element has accessible label -->
<div aria-valuemin="0" aria-valuemax="1" />

3. The widget has aria-valuemin set to a decimal value less than aria-valuemax.

<!-- ✓ element has aria-valuemin set to a decimal value less than aria-valuemax -->
<div aria-label="progress" aria-valuemin="0" aria-valuemax="1" role="meter" />

<!-- ❌ element has aria-valuemin greater than aria-valuemax -->
<div aria-label="progress" aria-valuemin="1" aria-valuemax="0" role="meter" />

4. The widget has aria-valuenow set to a decimal value between aria-valuemin and aria-valuemax

<!-- ✓ element has aria-valuenow set to a decimal value between aria-valuemin and aria-valuemax -->
<div aria-label="progress" aria-valuemin="0" aria-valuemax="1" aria-valuenow="0.5" role="meter" />

<!-- ❌ element has aria-valuenow greater than aria-valuemax -->
<div aria-label="progress" aria-valuemin="1" aria-valuemax="0" aria-valuenow="2" role="meter" />

<!-- ❌ element has aria-valuenow lesser than aria-valuemmin -->
<div aria-label="progress" aria-valuemin="2" aria-valuemax="3" aria-valuenow="1" role="meter" />

Keyboard Interaction

N/A