a11y-test.spec.ts

import { fixture } from '@sl-design-system/vitest-browser-lit';
import { cdp } from '@vitest/browser/context';
import { html } from 'lit';
import { CDPSession } from 'playwright-core';
import { beforeEach, describe, expect, it } from 'vitest';

customElements.define(
  'x-test',
  class extends HTMLElement {
    internals!: ElementInternals;

    constructor() {
      super();

      this.attachShadow({ mode: 'open' });
      this.internals = this.attachInternals();
      this.internals.role = 'button';

      this.shadowRoot!.innerHTML = '<button><slot></slot></button>';
    }
  }
);

describe('a11y test', () => {
  let el: HTMLElement;

  beforeEach(async () => {
    el = await fixture(html`<x-test></x-test>`);
  });

  it('should have a role of button', async () => {
    const client = (cdp as unknown as () => CDPSession)();

    await client.send('Accessibility.enable');
    await client.send('DOM.enable');

    // Get the document root first
    // const { root } = await client.send('DOM.getDocument', { depth: -1 });

    // Query for the element to get its nodeId
    // const { nodeId } = await client.send('DOM.querySelector', {
    //   nodeId: root.nodeId,
    //   selector: 'x-test'
    // });

    const { nodes } = await client.send('DOM.getFlattenedDocument', { depth: -1, pierce: true });
    const { nodeId } = nodes.find(n => n.nodeName === 'X-TEST')!;

    const snapshot = await client.send('Accessibility.getPartialAXTree', { nodeId }),
      axTree = snapshot.nodes.at(0);

    expect(axTree.role.value).to.equal('button');
  });
});