Back to Repositories

Validating Text Track Selection Accessibility in Video.js

This test suite validates the text track selection functionality in Video.js, focusing on ARIA accessibility attributes and proper DOM element associations. It ensures proper implementation of select elements and their options for text track settings.

Test Coverage Overview

The test suite covers critical accessibility features for text track selection components in Video.js.

Validates proper association between select elements and their options
Verifies ARIA labelledby attribute implementations
Tests uniqueness and validity of ARIA IDs
Ensures accessibility compliance for text track settings

Implementation Analysis

The testing approach utilizes QUnit’s module and test structure to verify DOM element relationships and ARIA attribute implementations.

Key patterns include:

Player instance creation with predefined track configurations
DOM element querying and attribute validation
ARIA attribute relationship verification
Duplicate ID detection using Set operations

Technical Details

Testing infrastructure includes:

QUnit as the primary testing framework
TestHelpers utility for player instance creation
ESLint configuration for code quality
Custom track configurations for test scenarios
DOM querying methods for element selection

Best Practices Demonstrated

The test suite exemplifies robust accessibility testing practices with clear separation of concerns.

Isolated test cases for specific functionality
Comprehensive ARIA attribute validation
Efficient use of TestHelpers for setup
Clear assertion messages for debugging
Proper error checking for invalid scenarios

videojs/videoJs

test/unit/tracks/text-track-select.test.js

            
/* eslint-env qunit */
import TestHelpers from '../test-helpers.js';

const tracks = [{
  kind: 'captions',
  label: 'test'
}];

QUnit.module('Text Track Select');

QUnit.test('should associate with <select>s with <options>s', function(assert) {
  const player = TestHelpers.makePlayer({
    tracks
  });

  const select = player.textTrackSettings.el_.querySelector('select');
  const option = select.querySelector('option');
  const selectAriaLabelledby = select.getAttribute('aria-labelledby');
  const optionAriaLabelledby = option.getAttribute('aria-labelledby');

  assert.ok(
    optionAriaLabelledby.includes(selectAriaLabelledby),
    "select property 'aria-labelledby' is included in its option's property 'aria-labelledby'"
  );
});

QUnit.test('aria-labelledby values must be valid and unique', function(assert) {
  const player = TestHelpers.makePlayer({
    tracks
  });
  const albs = player.$$('.vjs-text-track-settings select[aria-labelledby]');

  albs.forEach(el => {
    const ids = el.getAttribute('aria-labelledby').split(' ');
    const invalidIds = ids.find(id => {
      return !(player.$(`#${id}`));
    });

    assert.notOk(invalidIds, `${el.id} has valid aria-labelledby ids`);

    assert.ok((new Set(ids)).size === ids.length, `${el.id} does not contain duplicate ids`);
  });
});