[Feature]: Expose aria-current information in accessibility snapshots

[bennypowers]

🚀 Feature Request

We make extensive use of page.accessibility.snapshot in https://github.com/redhat-ux/red-hat-design-system/. I noticed today that snapshots do not expose aria current. Please consider adding support.

Example

<a href="#">1</a>
<a href="#" aria-current="step">2</a>

console.log(await page.accessibility.snapshot())

Expected:

{
  role: 'WebArea',
  name: '',
  children: [
    { role: 'link', name: '1' },
    { role: 'link', name: '2', current: 'step' },
    { role: 'link', name: '3' },
    { role: 'link', name: '4' },
    { role: 'link', name: '5' }
  ]
}

Actual:

{
  role: 'WebArea',
  name: '',
  children: [
    { role: 'link', name: '1' },
    { role: 'link', name: '2' },
    { role: 'link', name: '3' },
    { role: 'link', name: '4' },
    { role: 'link', name: '5' }
  ]
}

Motivation

We use a11y snapshots for semantic component testing. This is different than pass/fail whole page audits, and it gives us rich insights into our design system's semantics and AT behaviours.

Without support for aria current, this is my current (🥁 ) workaround

  describe('with more than one step marked as active', function() {
    let element: RhProgressStepper;
    beforeEach(async function() {
      element = await createFixture(html`
        <rh-progress-stepper>
          <rh-progress-step href="#" state="active">1</rh-progress-step>
          <rh-progress-step href="#" state="active">2</rh-progress-step>
          <rh-progress-step href="#">3</rh-progress-step>
          <rh-progress-step href="#">4</rh-progress-step>
          <rh-progress-step href="#">5</rh-progress-step>
        </rh-progress-stepper>
      `);
    });
    it('sets the last active step as aria-current', async function() {
      // note: this test may break if we ever move to element internals for aria-current
      // playwright a11ySnapshot does not yet support aria-current
      // see https://github.com/microsoft/playwright/issues/36913
      const [hasAriaCurrent] = Array.from(element.querySelectorAll('rh-progress-step'), x => x.shadowRoot?.querySelector('[aria-current]'))
          .filter(x => !!x);
      // super brittle: much better if we could assert on the AT tree
      const [assignedNode] = hasAriaCurrent?.querySelector('slot')?.assignedNodes() ?? [];
      expect((assignedNode as Text).data).to.equal('2');
    });
    it('does not expose the first step to AT as current', function() {
      // note: this test may break if we ever move to element internals for aria-current
      // playwright a11ySnapshot does not yet support aria-current
      // see https://github.com/microsoft/playwright/issues/36913
      const hasAriaCurrent = Array.from(element.querySelectorAll('rh-progress-step'), x => x.shadowRoot?.querySelector('[aria-current]'))
          .filter(x => !!x);
      expect(hasAriaCurrent.length).to.be.lessThan(2);
    });
  });
});

[agg23]

The accessibility.snapshot() API has been deprecated for a while now. We recommend you use Axe for accessibility testing.

[bennypowers]

I hope you'll reconsider. The issue which deprecates the accessibility snapshot api has a number of comments that demonstrate

• that there is demand for this feature
• that axe is insufficient and doesn't cover the use case desired

As well, there are a number of other open issues for this api, which also demonstrates the demand for this feature.