template-no-invalid-aria-attributes.js

//------------------------------------------------------------------------------
// Requirements
//------------------------------------------------------------------------------

const rule = require('../../../lib/rules/template-no-invalid-aria-attributes');
const RuleTester = require('eslint').RuleTester;

const ruleTester = new RuleTester({
  parser: require.resolve('ember-eslint-parser'),
  parserOptions: { ecmaVersion: 2022, sourceType: 'module' },
});

ruleTester.run('template-no-invalid-aria-attributes', rule, {
  valid: [
    '<template><div aria-label="Label">Content</div></template>',
    '<template><div aria-hidden="true">Content</div></template>',
    '<template><div aria-describedby="id">Content</div></template>',

    '<template><h1 aria-hidden="true">Valid Heading</h1></template>',
    '<template><h1 aria-hidden={{true}}>Second valid Heading</h1></template>',
    '<template><input type="email" aria-required="true" /></template>',
    '<template><input type="text" aria-labelledby="label1 label2" /></template>',
    '<template><div role="checkbox" aria-checked="true" onclick="handleCheckbox()" tabindex="0"></div></template>',
    '<template><button aria-haspopup="true"></button></template>',
    '<template><button aria-haspopup="dialog"></button></template>',
    '<template><div role="slider" aria-valuenow="50" aria-valuemax="100" aria-valuemin="0" /></template>',
    '<template><div role="heading" aria-level={{2}}></div></template>',
    '<template><input type="text" id="name" aria-invalid="grammar" /></template>',
    '<template><div role="region" aria-live="polite" aria-relevant="additions text">Valid live region</div></template>',
    '<template><div aria-label="{{@foo.bar}} baz"></div></template>',
    '<template><CustomComponent @ariaRequired={{this.ariaRequired}} aria-errormessage="errorId" /></template>',
    '<template><button type="submit" aria-disabled={{this.isDisabled}}>Submit</button></template>',
    '<template><div role="textbox" aria-sort={{if this.hasCustomSort "other" "ascending"}}></div></template>',
    // Boolean-type attributes with allowundefined: true per aria-query — the
    // string "undefined" is spec-valid (WAI-ARIA 1.2 value tables for these
    // attrs list true/false/undefined). All 4 share the same code path.
    '<template><div role="combobox" aria-expanded="undefined"></div></template>',
    '<template><div aria-hidden="undefined"></div></template>',
    '<template><div aria-grabbed="undefined" draggable="true"></div></template>',
    '<template><div role="option" aria-selected="undefined"></div></template>',

    // Token-type aria-orientation lists "undefined" in its values array;
    // passes the natural token check (no special-casing needed).
    '<template><div role="slider" aria-orientation="undefined"></div></template>',
    '<template><div role="slider" aria-orientation="horizontal"></div></template>',

    // aria-pressed is tristate WITHOUT allowundefined — string "undefined"
    // is NOT accepted. Explicit valid values still work.
    '<template><button aria-pressed="true">Toggle</button></template>',
    '<template><button aria-pressed="false">Toggle</button></template>',
    '<template><button aria-pressed="mixed">Toggle</button></template>',
    '<template><button aria-label={{if @isNew (t "actions.add") (t "actions.edit")}}></button></template>',
  ],
  invalid: [
    {
      code: '<template><div aria-fake="value">Content</div></template>',
      output: null,
      errors: [{ messageId: 'noInvalidAriaAttribute', data: { attribute: 'aria-fake' } }],
    },
    {
      code: '<template><div aria-invalid-attr="value">Content</div></template>',
      output: null,
      errors: [{ messageId: 'noInvalidAriaAttribute', data: { attribute: 'aria-invalid-attr' } }],
    },

    {
      code: '<template><input aria-text="inaccessible text" /></template>',
      output: null,
      errors: [{ messageId: 'noInvalidAriaAttribute' }],
    },
    {
      code: '<template><div role="slider" aria-valuenow={{this.foo}} aria-valuemax={{this.bar}} aria-value-min={{this.baz}} /></template>',
      output: null,
      errors: [{ messageId: 'noInvalidAriaAttribute' }],
    },
    {
      code: '<template><h1 aria--hidden="true">Broken heading</h1></template>',
      output: null,
      errors: [{ messageId: 'noInvalidAriaAttribute' }],
    },
    {
      code: '<template><CustomComponent role="region" aria-alert="polite" /></template>',
      output: null,
      errors: [{ messageId: 'noInvalidAriaAttribute' }],
    },
    {
      code: '<template><span role="checkbox" aria-checked="bad-value" tabindex="0" aria-label="Forget me"></span></template>',
      output: null,
      errors: [{ messageId: 'invalidAriaAttributeValue' }],
    },
    {
      code: '<template><button type="submit" disabled="true" aria-disabled="123">Submit</button></template>',
      output: null,
      errors: [{ messageId: 'invalidAriaAttributeValue' }],
    },
    {
      code: '<template><input type="text" disabled="true" aria-errormessage="false" /></template>',
      output: null,
      errors: [{ messageId: 'invalidAriaAttributeValue' }],
    },
    {
      code: '<template><button type="submit" aria-describedby="blah false">Continue at your own risk</button></template>',
      output: null,
      errors: [{ messageId: 'invalidAriaAttributeValue' }],
    },
    {
      code: '<template><div role="heading" aria-level="bogus">Inaccessible heading</div></template>',
      output: null,
      errors: [{ messageId: 'invalidAriaAttributeValue' }],
    },
    {
      code: '<template><div role="heading" aria-level="true">Another inaccessible heading</div></template>',
      output: null,
      errors: [{ messageId: 'invalidAriaAttributeValue' }],
    },
    {
      code: '<template><div role="slider" aria-valuenow=(2*2)  aria-valuemax="100" aria-valuemin="30">Broken slider</div></template>',
      output: null,
      errors: [{ messageId: 'invalidAriaAttributeValue' }],
    },
    {
      code: '<template><div role="region" aria-live="no-such-value">Inaccessible live region</div></template>',
      output: null,
      errors: [{ messageId: 'invalidAriaAttributeValue' }],
    },
    {
      code: '<template><div role="region" aria-live="polite" aria-relevant="additions errors">Inaccessible live region</div></template>',
      output: null,
      errors: [{ messageId: 'invalidAriaAttributeValue' }],
    },
    {
      code: '<template><input type="text" aria-required="undefined" /></template>',
      output: null,
      errors: [{ messageId: 'invalidAriaAttributeValue' }],
    },
    {
      code: '<template><div aria-label="true"></div></template>',
      output: null,
      errors: [{ messageId: 'invalidAriaAttributeValue' }],
    },
    {
      code: '<template><div role="slider" aria-orientation="sideways"></div></template>',
      output: null,
      errors: [{ messageId: 'invalidAriaAttributeValue' }],
    },
    // aria-pressed is tristate WITHOUT allowundefined — string "undefined"
    // is spec-invalid here (aria-query doesn't mark it allowundefined).
    {
      code: '<template><button aria-pressed="undefined">Toggle</button></template>',
      output: null,
      errors: [{ messageId: 'invalidAriaAttributeValue' }],
    },
  ],
});

const hbsRuleTester = new RuleTester({
  parser: require.resolve('ember-eslint-parser/hbs'),
  parserOptions: {
    ecmaVersion: 2022,
    sourceType: 'module',
  },
});

hbsRuleTester.run('template-no-invalid-aria-attributes', rule, {
  valid: [
    '<h1 aria-hidden="true">Valid Heading</h1>',
    '<h1 aria-hidden={{true}}>Second valid Heading</h1>',
    '<input type="email" aria-required="true" />',
    '<input type="text" aria-labelledby="label1 label2" />',
    '<div role="checkbox" aria-checked="true" onclick="handleCheckbox()" tabindex="0"></div>',
    '<button aria-haspopup="true"></button>',
    '<button aria-haspopup="dialog"></button>',
    '<div role="slider" aria-valuenow="50" aria-valuemax="100" aria-valuemin="0" />',
    '<div role="heading" aria-level={{2}}></div>',
    '<input type="text" id="name" aria-invalid="grammar" />',
    '<div role="region" aria-live="polite" aria-relevant="additions text">Valid live region</div>',
    '<div aria-label="{{@foo.bar}} baz"></div>',
    '<CustomComponent @ariaRequired={{this.ariaRequired}} aria-errormessage="errorId" />',
    '<button type="submit" aria-disabled={{this.isDisabled}}>Submit</button>',
    '<div role="textbox" aria-sort={{if this.hasCustomSort "other" "ascending"}}></div>',
    // Boolean-type attrs with allowundefined (spec-valid "undefined" literal):
    '<div role="combobox" aria-expanded="undefined"></div>',
    '<div aria-hidden="undefined"></div>',
    '<div aria-grabbed="undefined" draggable="true"></div>',
    '<div role="option" aria-selected="undefined"></div>',

    // Token-type aria-orientation — "undefined" passes via values list:
    '<div role="slider" aria-orientation="undefined"></div>',
    '<div role="slider" aria-orientation="horizontal"></div>',

    // aria-pressed is tristate WITHOUT allowundefined; valid values:
    '<button aria-pressed="true">Toggle</button>',
    '<button aria-pressed="false">Toggle</button>',
    '<button aria-pressed="mixed">Toggle</button>',

    '<button aria-label={{if @isNew (t "actions.add") (t "actions.edit")}}></button>',
  ],
  invalid: [
    {
      code: '<input aria-text="inaccessible text" />',
      output: null,
      errors: [{ message: 'Invalid ARIA attribute: aria-text' }],
    },
    {
      code: '<div role="slider" aria-valuenow={{this.foo}} aria-valuemax={{this.bar}} aria-value-min={{this.baz}} />',
      output: null,
      errors: [{ message: 'Invalid ARIA attribute: aria-value-min' }],
    },
    {
      code: '<h1 aria--hidden="true">Broken heading</h1>',
      output: null,
      errors: [{ message: 'Invalid ARIA attribute: aria--hidden' }],
    },
    {
      code: '<CustomComponent role="region" aria-alert="polite" />',
      output: null,
      errors: [{ message: 'Invalid ARIA attribute: aria-alert' }],
    },
    {
      code: '<span role="checkbox" aria-checked="bad-value" tabindex="0" aria-label="Forget me"></span>',
      output: null,
      errors: [{ messageId: 'invalidAriaAttributeValue' }],
    },
    {
      code: '<button type="submit" disabled="true" aria-disabled="123">Submit</button>',
      output: null,
      errors: [{ messageId: 'invalidAriaAttributeValue' }],
    },
    {
      code: '<input type="text" disabled="true" aria-errormessage="false" />',
      output: null,
      errors: [{ messageId: 'invalidAriaAttributeValue' }],
    },
    {
      code: '<button type="submit" aria-describedby="blah false">Continue at your own risk</button>',
      output: null,
      errors: [{ messageId: 'invalidAriaAttributeValue' }],
    },
    {
      code: '<div role="heading" aria-level="bogus">Inaccessible heading</div>',
      output: null,
      errors: [{ messageId: 'invalidAriaAttributeValue' }],
    },
    {
      code: '<div role="heading" aria-level="true">Another inaccessible heading</div>',
      output: null,
      errors: [{ messageId: 'invalidAriaAttributeValue' }],
    },
    {
      code: '<div role="slider" aria-valuenow=(2*2)  aria-valuemax="100" aria-valuemin="30">Broken slider</div>',
      output: null,
      errors: [{ messageId: 'invalidAriaAttributeValue' }],
    },
    {
      code: '<div role="region" aria-live="no-such-value">Inaccessible live region</div>',
      output: null,
      errors: [{ messageId: 'invalidAriaAttributeValue' }],
    },
    {
      code: '<div role="region" aria-live="polite" aria-relevant="additions errors">Inaccessible live region</div>',
      output: null,
      errors: [{ messageId: 'invalidAriaAttributeValue' }],
    },
    {
      code: '<input type="text" aria-required="undefined" />',
      output: null,
      errors: [{ messageId: 'invalidAriaAttributeValue' }],
    },
    {
      code: '<div role="slider" aria-orientation="sideways"></div>',
      output: null,
      errors: [{ messageId: 'invalidAriaAttributeValue' }],
    },
    // aria-pressed has no allowundefined — "undefined" is spec-invalid here.
    {
      code: '<button aria-pressed="undefined">Toggle</button>',
      output: null,
      errors: [{ messageId: 'invalidAriaAttributeValue' }],
    },
  ],
});