Generate Report Off React Selector Violations

[alexmaddock]

Is it possible to generate a report highlighting the react selector specifically as the point at which an Axe violation happens?

Have tried using elementRef: true to check if this helps, but encountering issues related to an error as such:

1) with cannot return DOM elements. Use Selector functions for this purpose.

The code I'm using is as follows:

import { axeCheck } from '@testcafe-community/axe';
import { createHtmlReport } from 'axe-html-reporter';
import { Selector } from 'testcafe';

export const Accessibility = {

  scanPage: async(t, pageName) => {

    const context = { exclude: Selector('select') };
    const options = { rules: { 'document-title': { enabled: false } }, elementRef: true };
    // Run axe check, not using wrapper function that throws error
    const { error, results } = await axeCheck(t, context, options); // "context" and "options" parameters are optional

    console.log(`error: ${error}`);

    // "results" constant contains full axe Results object (https://www.deque.com/axe/core-documentation/api-documentation/#results-object)
    await t.expect(error).eql(null, `axe check failed with an error: ${error}`);
    
    createHtmlReport({
      results,
      options: {
        projectKey: `"${pageName}"`,
        outputDir: 'reports/artifacts/' + pageName
      }
    });
  }
}