diff --git a/.eslintrc.json b/.eslintrc.json index a9e44c5937..888c968b5c 100644 --- 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 index 15d693843c..e134e1070f 100644 --- 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 index 120751d65a..3d425c3ad4 100644 --- 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 b/lint/src/rules/html/no-disabled-attribute-on-button.ts similarity index 89% rename from lint/src/rules/html/no-disabled-attr.ts rename to lint/src/rules/html/no-disabled-attribute-on-button.ts index 22f987d52b..bf1a72d70d 100644 --- a/lint/src/rules/html/no-disabled-attr.ts +++ b/lint/src/rules/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: ` - + `, }, { @@ -121,7 +124,7 @@ export const tests = { { name: 'should not use disabled attribute in HTML templates', code: ` - + `, errors: [{ messageId: Message.USE_DSBTN_DISABLED }], output: `