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: `