fix bug in lint rule, add docs for rule and update name so it's clear…

… this is only for buttons currently
atmire · Sep 20, 2024 · 2380d4e · 2380d4e
1 parent 7ade453
commit 2380d4e
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 9 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -294,7 +294,7 @@
       "rules": {
         // Custom DSpace Angular rules
         "dspace-angular-html/themed-component-usages": "error",
-        "dspace-angular-html/no-disabled-attr": "error"
+        "dspace-angular-html/no-disabled-attribute-on-button": "error"
       }
     },
     {

diff --git a/docs/lint/html/index.md b/docs/lint/html/index.md
@@ -2,3 +2,4 @@
 _______
 
 - [`dspace-angular-html/themed-component-usages`](./rules/themed-component-usages.md): Themeable components should be used via the selector of their `ThemedComponent` wrapper class
+- [`dspace-angular-html/no-disabled-attribute-on-button`](./rules/no-disabled-attribute-on-button.md): Buttons should use the `dsBtnDisabled` directive instead of the HTML `disabled` attribute.
diff --git a/lint/src/rules/html/index.ts b/lint/src/rules/html/index.ts
@@ -10,12 +10,12 @@ import {
   bundle,
   RuleExports,
 } from '../../util/structure';
-import * as noDisabledAttr from './no-disabled-attr';
+import * as noDisabledAttributeOnButton from './no-disabled-attribute-on-button';
 import * as themedComponentUsages from './themed-component-usages';
 
 const index = [
   themedComponentUsages,
-  noDisabledAttr,
+  noDisabledAttributeOnButton,
 
 ] as unknown as RuleExports[];
 

diff --git a/lint/src/rules/html/no-disabled-attr.ts → ...s/html/no-disabled-attribute-on-button.ts b/lint/src/rules/html/no-disabled-attr.ts → ...s/html/no-disabled-attribute-on-button.ts
@@ -1,12 +1,13 @@
 import {
   TmplAstBoundAttribute,
-  TmplAstTextAttribute
+  TmplAstTextAttribute,
 } from '@angular-eslint/bundled-angular-compiler';
 import { TemplateParserServices } from '@angular-eslint/utils';
 import {
   ESLintUtils,
   TSESLint,
 } from '@typescript-eslint/utils';
+
 import {
   DSpaceESLintRuleInfo,
   NamedTests,
@@ -18,10 +19,12 @@ export enum Message {
 }
 
 export const info = {
-  name: 'no-disabled-attr',
+  name: 'no-disabled-attribute-on-button',
   meta: {
     docs: {
-      description: `Buttons should use the \`dsBtnDisabled\` directive instead of the HTML \`disabled\` attribute for accessibility reasons.`,
+      description: `Buttons should use the \`dsBtnDisabled\` directive instead of the HTML \`disabled\` attribute.
+      This should be done to ensure that users with a screen reader are able to understand that the a button button is present, and that it is disabled.
+      The native html disabled attribute does not allow users to navigate to the button by keyboard, and thus they have no way of knowing that the button is present.`,
     },
     type: 'problem',
     fixable: 'code',
@@ -52,7 +55,7 @@ export const rule = ESLintUtils.RuleCreator.withoutDocs({
      */
     function replaceDisabledText(text: string ): string {
       const hasBrackets = text.includes('[') && text.includes(']');
-      const newDisabledText = hasBrackets ? 'dsBtnDisabled' : '[dsBtnDisabled]';
+      const newDisabledText = hasBrackets ? 'dsBtnDisabled' : '[dsBtnDisabled]="true"';
       return text.replace('disabled', newDisabledText);
     }
 
@@ -101,7 +104,7 @@ export const tests = {
     {
       name: 'disabled attribute is still valid on non-button elements',
       code: `
-<input disabled="true">
+<input disabled>
       `,
     },
     {
@@ -121,7 +124,7 @@ export const tests = {
     {
       name: 'should not use disabled attribute in HTML templates',
       code: `
-<button disabled="true">Submit</button>
+<button disabled>Submit</button>
       `,
       errors: [{ messageId: Message.USE_DSBTN_DISABLED }],
       output: `