[alt-text] input element with all types should have check

[bgpedersen]

Description and reproduction of the issue
In the rule source code, for input elements, there is a check, that the rule will only apply if the input element has the type image. But all other types, such as file and text should also have arial-label attribute according to googles web accessability reference from Lighthouse report: https://dequeuniversity.com/rules/axe/4.8/label

Rule source code (https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin-template/src/rules/alt-text.ts):

/**
 * In this case, we check that the `<input>` element has an `alt` or `aria-label` attribute.
 * Otherwise, we check for the presence of `attr.alt` or `attr.aria-label` bindings.
 */
function isValidInputNode(node: TmplAstElement): boolean {
  const type = getAttributeValue(node, 'type');
  // We are only interested in the `<input type="image">` elements.
  if (type !== 'image') {
    return true;
  } else {
    return isValidAreaNode(node);
  }
}

Setting the rule

{
  "rules": {
    "@angular-eslint/template/alt-text": "warn",
  }
}

These will not produce any warning/error - but they should, because they should have arial-label attribute

<input type="file" />

<input type="text" />

Versions
Since the link provided to the rule is from the latest main branch, it's not tied to anything local, but here is the versions anyway:

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.1700.9
@angular-devkit/build-angular      17.0.9
@angular-devkit/core               17.0.9
@angular-devkit/schematics         17.0.9
@angular/cdk                       17.0.4
@angular/cdk-experimental          17.0.4
@angular/cli                       17.0.9
@angular/material                  17.0.4
@angular/material-moment-adapter   17.0.4
@schematics/angular                17.0.9
rxjs                               7.8.1
typescript                         5.2.2
webpack                            5.89.0
zone.js                            0.14.3

[estevezluis]

I can see how the alt-text rule name can be interpreted as "alternative text", indicating aria-label, but I believe alt-text is related to image-alt

In https://dequeuniversity.com/rules/axe/4.8/label the rule description says

Each form element must have a programmatically associated label element.

Which closely relates to rule label-has-associated-control However, this does not check if an input has aria-label attribute.

I believe this was done intentionally not to encourage the use of ARIA as "No ARIA is better than Bad ARIA"¹

I hope this helps clear the confusion 😄

Footnotes

1. https://www.deque.com/blog/top-5-rules-of-aria/ ↩

[bgpedersen]

@estevezluis I don't understand your explanation ? In the rule source code, it is clearly stated in the description, that it involves alternative text with aria-label etc. ?

We want to have a warning/error when we have a button that says "upload file", but there is no visible label above. This is common use case. This rule should target that, or another rule should be created that does that, if this rule is only meant for images, but then the description of this rule is wrong. 🙏

link

export default createESLintRule<Options, MessageIds>({
  name: RULE_NAME,
  meta: {
    type: 'suggestion',
    docs: {
      description:
        '[Accessibility] Enforces alternate text for elements which require the alt, aria-label, aria-labelledby attributes.',
    },
    schema: [],
    messages: {
      altText: '<{{element}}/> element must have a text alternative.',
    },
  },