Merge pull request #3269 from atmire/w2p-117544_support-for-disabled-elements-for-screen-readers-8.0

[Port dspace-8_x] support for disabled elements for screen readers

.eslintrc.json

@@ -293,7 +293,8 @@
       ],
       "rules": {
         // Custom DSpace Angular rules
-        "dspace-angular-html/themed-component-usages": "error"
+        "dspace-angular-html/themed-component-usages": "error",
+        "dspace-angular-html/no-disabled-attribute-on-button": "error"
       }
     },
     {

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.

docs/lint/html/rules/no-disabled-attribute-on-button.md

@@ -0,0 +1,78 @@
+[DSpace ESLint plugins](../../../../lint/README.md) > [HTML rules](../index.md) > `dspace-angular-html/no-disabled-attribute-on-button`
+_______
+
+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.
+
+_______
+
+[Source code](../../../../lint/src/rules/html/no-disabled-attribute-on-button.ts)
+
+### Examples
+
+
+#### Valid code
+    
+##### should use [dsBtnDisabled] in HTML templates
+        
+```html
+<button [dsBtnDisabled]="true">Submit</button>
+```
+    
+##### disabled attribute is still valid on non-button elements
+        
+```html
+<input disabled>
+```
+    
+##### [disabled] attribute is still valid on non-button elements
+        
+```html
+<input [disabled]="true">
+```
+    
+##### angular dynamic attributes that use disabled are still valid
+        
+```html
+<button [class.disabled]="isDisabled">Submit</button>
+```
+    
+
+
+
+#### Invalid code  &amp; automatic fixes
+    
+##### should not use disabled attribute in HTML templates
+        
+```html
+<button disabled>Submit</button>
+```
+Will produce the following error(s):
+```
+Buttons should use the `dsBtnDisabled` directive instead of the `disabled` attribute.
+```
+        
+Result of `yarn lint --fix`:
+```html
+<button [dsBtnDisabled]="true">Submit</button>
+```
+        
+    
+##### should not use [disabled] attribute in HTML templates
+        
+```html
+<button [disabled]="true">Submit</button>
+```
+Will produce the following error(s):
+```
+Buttons should use the `dsBtnDisabled` directive instead of the `disabled` attribute.
+```
+        
+Result of `yarn lint --fix`:
+```html
+<button [dsBtnDisabled]="true">Submit</button>
+```
+        
+    
+

lint/src/rules/html/index.ts

@@ -10,10 +10,13 @@ import {
   bundle,
   RuleExports,
 } from '../../util/structure';
+import * as noDisabledAttributeOnButton from './no-disabled-attribute-on-button';
 import * as themedComponentUsages from './themed-component-usages';
 
 const index = [
   themedComponentUsages,
+  noDisabledAttributeOnButton,
+
 ] as unknown as RuleExports[];
 
 export = {

lint/src/rules/html/no-disabled-attribute-on-button.ts

@@ -0,0 +1,147 @@
+import {
+  TmplAstBoundAttribute,
+  TmplAstTextAttribute,
+} from '@angular-eslint/bundled-angular-compiler';
+import { TemplateParserServices } from '@angular-eslint/utils';
+import {
+  ESLintUtils,
+  TSESLint,
+} from '@typescript-eslint/utils';
+
+import {
+  DSpaceESLintRuleInfo,
+  NamedTests,
+} from '../../util/structure';
+import { getSourceCode } from '../../util/typescript';
+
+export enum Message {
+  USE_DSBTN_DISABLED = 'mustUseDsBtnDisabled',
+}
+
+export const info = {
+  name: 'no-disabled-attribute-on-button',
+  meta: {
+    docs: {
+      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',
+    schema: [],
+    messages: {
+      [Message.USE_DSBTN_DISABLED]: 'Buttons should use the `dsBtnDisabled` directive instead of the `disabled` attribute.',
+    },
+  },
+  defaultOptions: [],
+} as DSpaceESLintRuleInfo;
+
+export const rule = ESLintUtils.RuleCreator.withoutDocs({
+  ...info,
+  create(context: TSESLint.RuleContext<Message, unknown[]>) {
+    const parserServices = getSourceCode(context).parserServices as TemplateParserServices;
+
+    /**
+     * Some dynamic angular inputs will have disabled as name because of how Angular handles this internally (e.g [class.disabled]="isDisabled")
+     * But these aren't actually the disabled attribute we're looking for, we can determine this by checking the details of the keySpan
+     */
+    function isOtherAttributeDisabled(node: TmplAstBoundAttribute | TmplAstTextAttribute): boolean {
+      // if the details are not null, and the details are not 'disabled', then it's not the disabled attribute we're looking for
+      return node.keySpan?.details !== null && node.keySpan?.details !== 'disabled';
+    }
+
+    /**
+     * Replace the disabled text with [dsBtnDisabled] in the template
+     */
+    function replaceDisabledText(text: string ): string {
+      const hasBrackets = text.includes('[') && text.includes(']');
+      const newDisabledText = hasBrackets ? 'dsBtnDisabled' : '[dsBtnDisabled]="true"';
+      return text.replace('disabled', newDisabledText);
+    }
+
+    function inputIsChildOfButton(node: any): boolean {
+      return (node.parent?.tagName === 'button' || node.parent?.name === 'button');
+    }
+
+    function reportAndFix(node: TmplAstBoundAttribute | TmplAstTextAttribute) {
+      if (!inputIsChildOfButton(node) || isOtherAttributeDisabled(node)) {
+        return;
+      }
+
+      const sourceSpan = node.sourceSpan;
+      context.report({
+        messageId: Message.USE_DSBTN_DISABLED,
+        loc: parserServices.convertNodeSourceSpanToLoc(sourceSpan),
+        fix(fixer) {
+          const templateText = sourceSpan.start.file.content;
+          const disabledText = templateText.slice(sourceSpan.start.offset, sourceSpan.end.offset);
+          const newText = replaceDisabledText(disabledText);
+          return fixer.replaceTextRange([sourceSpan.start.offset, sourceSpan.end.offset], newText);
+        },
+      });
+    }
+
+    return {
+      'BoundAttribute[name="disabled"]'(node: TmplAstBoundAttribute) {
+        reportAndFix(node);
+      },
+      'TextAttribute[name="disabled"]'(node: TmplAstTextAttribute) {
+        reportAndFix(node);
+      },
+    };
+  },
+});
+
+export const tests = {
+  plugin: info.name,
+  valid: [
+    {
+      name: 'should use [dsBtnDisabled] in HTML templates',
+      code: `
+<button [dsBtnDisabled]="true">Submit</button>
+      `,
+    },
+    {
+      name: 'disabled attribute is still valid on non-button elements',
+      code: `
+<input disabled>
+      `,
+    },
+    {
+      name: '[disabled] attribute is still valid on non-button elements',
+      code: `
+<input [disabled]="true">
+      `,
+    },
+    {
+      name: 'angular dynamic attributes that use disabled are still valid',
+      code: `
+<button [class.disabled]="isDisabled">Submit</button>
+      `,
+    },
+  ],
+  invalid: [
+    {
+      name: 'should not use disabled attribute in HTML templates',
+      code: `
+<button disabled>Submit</button>
+      `,
+      errors: [{ messageId: Message.USE_DSBTN_DISABLED }],
+      output: `
+<button [dsBtnDisabled]="true">Submit</button>
+      `,
+    },
+    {
+      name: 'should not use [disabled] attribute in HTML templates',
+      code: `
+<button [disabled]="true">Submit</button>
+      `,
+      errors: [{ messageId: Message.USE_DSBTN_DISABLED }],
+      output: `
+<button [dsBtnDisabled]="true">Submit</button>
+      `,
+    },
+  ],
+} as NamedTests;
+
+export default rule;

src/app/access-control/bulk-access/bulk-access.component.html

@@ -10,7 +10,7 @@
     <button class="btn btn-outline-primary mr-3" (click)="reset()">
       {{ 'access-control-cancel' | translate }}
     </button>
-    <button class="btn btn-primary" [disabled]="!canExport()" (click)="submit()">
+    <button class="btn btn-primary" [dsBtnDisabled]="!canExport()" (click)="submit()">
       {{ 'access-control-execute' | translate }}
     </button>
   </div>

src/app/access-control/bulk-access/bulk-access.component.ts

@@ -14,6 +14,7 @@ import {
 } from 'rxjs/operators';
 
 import { BulkAccessControlService } from '../../shared/access-control-form-container/bulk-access-control.service';
+import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
 import { SelectableListState } from '../../shared/object-list/selectable-list/selectable-list.reducer';
 import { SelectableListService } from '../../shared/object-list/selectable-list/selectable-list.service';
 import { BulkAccessBrowseComponent } from './browse/bulk-access-browse.component';
@@ -27,6 +28,7 @@ import { BulkAccessSettingsComponent } from './settings/bulk-access-settings.com
     TranslateModule,
     BulkAccessSettingsComponent,
     BulkAccessBrowseComponent,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })

src/app/access-control/epeople-registry/epeople-registry.component.spec.ts

@@ -42,6 +42,7 @@ import { EPersonDataService } from '../../core/eperson/eperson-data.service';
 import { EPerson } from '../../core/eperson/models/eperson.model';
 import { PaginationService } from '../../core/pagination/pagination.service';
 import { PageInfo } from '../../core/shared/page-info.model';
+import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
 import { FormBuilderService } from '../../shared/form/builder/form-builder.service';
 import { ThemedLoadingComponent } from '../../shared/loading/themed-loading.component';
 import { getMockFormBuilderService } from '../../shared/mocks/form-builder-service.mock';
@@ -151,7 +152,7 @@ describe('EPeopleRegistryComponent', () => {
     paginationService = new PaginationServiceStub();
     TestBed.configureTestingModule({
       imports: [CommonModule, NgbModule, FormsModule, ReactiveFormsModule, BrowserModule, RouterTestingModule.withRoutes([]),
-        TranslateModule.forRoot(), EPeopleRegistryComponent],
+        TranslateModule.forRoot(), EPeopleRegistryComponent, BtnDisabledDirective],
       providers: [
         { provide: EPersonDataService, useValue: ePersonDataServiceStub },
         { provide: NotificationsService, useValue: new NotificationsServiceStub() },

src/app/access-control/epeople-registry/eperson-form/eperson-form.component.html

@@ -25,7 +25,7 @@
           </button>
         </div>
         <div *ngIf="displayResetPassword" between class="btn-group">
-          <button class="btn btn-primary" [disabled]="(canReset$ | async) !== true" type="button" (click)="resetPassword()">
+          <button class="btn btn-primary" [dsBtnDisabled]="(canReset$ | async) !== true" type="button" (click)="resetPassword()">
             <i class="fa fa-key"></i> {{'admin.access-control.epeople.actions.reset' | translate}}
           </button>
         </div>

src/app/access-control/epeople-registry/eperson-form/eperson-form.component.spec.ts

@@ -43,6 +43,7 @@ import { GroupDataService } from '../../../core/eperson/group-data.service';
 import { EPerson } from '../../../core/eperson/models/eperson.model';
 import { PaginationService } from '../../../core/pagination/pagination.service';
 import { PageInfo } from '../../../core/shared/page-info.model';
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import { FormBuilderService } from '../../../shared/form/builder/form-builder.service';
 import { FormComponent } from '../../../shared/form/form.component';
 import { ThemedLoadingComponent } from '../../../shared/loading/themed-loading.component';
@@ -221,7 +222,7 @@ describe('EPersonFormComponent', () => {
     route = new ActivatedRouteStub();
     router = new RouterStub();
     TestBed.configureTestingModule({
-      imports: [CommonModule, NgbModule, FormsModule, ReactiveFormsModule, BrowserModule,
+      imports: [CommonModule, NgbModule, FormsModule, ReactiveFormsModule, BtnDisabledDirective, BrowserModule,
         RouterModule.forRoot([]),
         TranslateModule.forRoot(),
         EPersonFormComponent,
@@ -516,7 +517,8 @@ describe('EPersonFormComponent', () => {
       // ePersonDataServiceStub.activeEPerson = eperson;
       spyOn(component.epersonService, 'deleteEPerson').and.returnValue(createSuccessfulRemoteDataObject$('No Content', 204));
       const deleteButton = fixture.debugElement.query(By.css('.delete-button'));
-      expect(deleteButton.nativeElement.disabled).toBe(false);
+      expect(deleteButton.nativeElement.getAttribute('aria-disabled')).toBeNull();
+      expect(deleteButton.nativeElement.classList.contains('disabled')).toBeFalse();
       deleteButton.triggerEventHandler('click', null);
       fixture.detectChanges();
       expect(component.epersonService.deleteEPerson).toHaveBeenCalledWith(eperson);

src/app/access-control/epeople-registry/eperson-form/eperson-form.component.ts

@@ -65,6 +65,7 @@ import {
 import { PageInfo } from '../../../core/shared/page-info.model';
 import { Registration } from '../../../core/shared/registration.model';
 import { TYPE_REQUEST_FORGOT } from '../../../register-email-form/register-email-form.component';
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import { ConfirmationModalComponent } from '../../../shared/confirmation-modal/confirmation-modal.component';
 import { hasValue } from '../../../shared/empty.util';
 import { FormBuilderService } from '../../../shared/form/builder/form-builder.service';
@@ -92,6 +93,7 @@ import { ValidateEmailNotTaken } from './validators/email-taken.validator';
     PaginationComponent,
     RouterLink,
     HasNoValuePipe,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })

src/app/access-control/group-registry/group-form/members-list/members-list.component.html

@@ -35,14 +35,14 @@
             <div class="btn-group edit-field">
               <button (click)="deleteMemberFromGroup(epersonDTO.eperson)"
                       *ngIf="epersonDTO.ableToDelete"
-                      [disabled]="actionConfig.remove.disabled"
+                      [dsBtnDisabled]="actionConfig.remove.disabled"
                       [ngClass]="['btn btn-sm', actionConfig.remove.css]"
                       title="{{messagePrefix + '.table.edit.buttons.remove' | translate: { name: dsoNameService.getName(epersonDTO.eperson) } }}">
                 <i [ngClass]="actionConfig.remove.icon"></i>
               </button>
               <button *ngIf="!epersonDTO.ableToDelete"
                       (click)="addMemberToGroup(epersonDTO.eperson)"
-                      [disabled]="actionConfig.add.disabled"
+                      [dsBtnDisabled]="actionConfig.add.disabled"
                       [ngClass]="['btn btn-sm', actionConfig.add.css]"
                       title="{{messagePrefix + '.table.edit.buttons.add' | translate: { name: dsoNameService.getName(epersonDTO.eperson) } }}">
                 <i [ngClass]="actionConfig.add.icon"></i>
@@ -122,7 +122,7 @@
           <td class="align-middle">
             <div class="btn-group edit-field">
               <button (click)="addMemberToGroup(eperson)"
-                      [disabled]="actionConfig.add.disabled"
+                      [dsBtnDisabled]="actionConfig.add.disabled"
                       [ngClass]="['btn btn-sm', actionConfig.add.css]"
                       title="{{messagePrefix + '.table.edit.buttons.add' | translate: { name: dsoNameService.getName(eperson) } }}">
                 <i [ngClass]="actionConfig.add.icon"></i>

src/app/access-control/group-registry/group-form/members-list/members-list.component.ts

@@ -54,6 +54,7 @@ import {
   getFirstCompletedRemoteData,
   getRemoteDataPayload,
 } from '../../../../core/shared/operators';
+import { BtnDisabledDirective } from '../../../../shared/btn-disabled.directive';
 import { ContextHelpDirective } from '../../../../shared/context-help.directive';
 import { NotificationsService } from '../../../../shared/notifications/notifications.service';
 import { PaginationComponent } from '../../../../shared/pagination/pagination.component';
@@ -113,6 +114,7 @@ export interface EPersonListActionConfig {
     RouterLink,
     NgClass,
     NgForOf,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })

src/app/access-control/group-registry/groups-registry.component.html

@@ -69,7 +69,7 @@
                       <i class="fas fa-edit fa-fw"></i>
                     </button>
                     <button *ngSwitchCase="false"
-                      [disabled]="true"
+                      [dsBtnDisabled]="true"
                       class="btn btn-outline-primary btn-sm btn-edit"
                       placement="left"
                       [ngbTooltip]="'admin.access-control.epeople.table.edit.buttons.edit-disabled' | translate"

src/app/access-control/group-registry/groups-registry.component.spec.ts

@@ -50,6 +50,7 @@ import { RouteService } from '../../core/services/route.service';
 import { DSpaceObject } from '../../core/shared/dspace-object.model';
 import { NoContent } from '../../core/shared/NoContent.model';
 import { PageInfo } from '../../core/shared/page-info.model';
+import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
 import {
   DSONameServiceMock,
   UNDEFINED_NAME,
@@ -208,6 +209,7 @@ describe('GroupsRegistryComponent', () => {
       imports: [CommonModule, NgbModule, FormsModule, ReactiveFormsModule, BrowserModule,
         TranslateModule.forRoot(),
         GroupsRegistryComponent,
+        BtnDisabledDirective,
       ],
       providers: [GroupsRegistryComponent,
         { provide: DSONameService, useValue: new DSONameServiceMock() },
@@ -278,7 +280,8 @@ describe('GroupsRegistryComponent', () => {
         const editButtonsFound = fixture.debugElement.queryAll(By.css('#groups tr td:nth-child(5) button.btn-edit'));
         expect(editButtonsFound.length).toEqual(2);
         editButtonsFound.forEach((editButtonFound) => {
-          expect(editButtonFound.nativeElement.disabled).toBeFalse();
+          expect(editButtonFound.nativeElement.getAttribute('aria-disabled')).toBeNull();
+          expect(editButtonFound.nativeElement.classList.contains('disabled')).toBeFalse();
         });
       });
 
@@ -312,7 +315,8 @@ describe('GroupsRegistryComponent', () => {
         const editButtonsFound = fixture.debugElement.queryAll(By.css('#groups tr td:nth-child(5) button.btn-edit'));
         expect(editButtonsFound.length).toEqual(2);
         editButtonsFound.forEach((editButtonFound) => {
-          expect(editButtonFound.nativeElement.disabled).toBeFalse();
+          expect(editButtonFound.nativeElement.getAttribute('aria-disabled')).toBeNull();
+          expect(editButtonFound.nativeElement.classList.contains('disabled')).toBeFalse();
         });
       });
     });
@@ -331,7 +335,8 @@ describe('GroupsRegistryComponent', () => {
         const editButtonsFound = fixture.debugElement.queryAll(By.css('#groups tr td:nth-child(5) button.btn-edit'));
         expect(editButtonsFound.length).toEqual(2);
         editButtonsFound.forEach((editButtonFound) => {
-          expect(editButtonFound.nativeElement.disabled).toBeTrue();
+          expect(editButtonFound.nativeElement.getAttribute('aria-disabled')).toBe('true');
+          expect(editButtonFound.nativeElement.classList.contains('disabled')).toBeTrue();
         });
       });
     });

src/app/access-control/group-registry/groups-registry.component.ts

@@ -62,6 +62,7 @@ import {
   getRemoteDataPayload,
 } from '../../core/shared/operators';
 import { PageInfo } from '../../core/shared/page-info.model';
+import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
 import { hasValue } from '../../shared/empty.util';
 import { ThemedLoadingComponent } from '../../shared/loading/themed-loading.component';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
@@ -84,6 +85,7 @@ import { followLink } from '../../shared/utils/follow-link-config.model';
     NgSwitchCase,
     NgbTooltipModule,
     NgForOf,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })

src/app/admin/admin-reports/filtered-items/filtered-items.component.html

@@ -54,7 +54,7 @@
                                             <div class="col-auto">
                                                 <button class="btn btn-light" (click)="addQueryPredicate()">+</button>
                                                 &nbsp;
-                                                <button class="btn btn-light" [disabled]="deleteQueryPredicateDisabled()" (click)="deleteQueryPredicate(i)">–</button>
+                                                <button class="btn btn-light" [dsBtnDisabled]="deleteQueryPredicateDisabled()" (click)="deleteQueryPredicate(i)">–</button>
                                             </div>
                                         </div>
                                     </div>
@@ -158,8 +158,8 @@
                                 {{'admin.reports.commons.page' | translate}} {{ currentPage + 1 }} {{'admin.reports.commons.of' | translate}} {{ pageCount() }}
                             </div>
                             <div>
-                                <button id="prev" class="btn btn-light" (click)="prevPage()" [disabled]="!canNavigatePrevious()">{{'admin.reports.commons.previous-page' | translate}}</button>
+                                <button id="prev" class="btn btn-light" (click)="prevPage()" [dsBtnDisabled]="!canNavigatePrevious()">{{'admin.reports.commons.previous-page' | translate}}</button>
-                                <button id="next" class="btn btn-light" (click)="nextPage()" [disabled]="!canNavigateNext()">{{'admin.reports.commons.next-page' | translate}}</button>
+                                <button id="next" class="btn btn-light" (click)="nextPage()" [dsBtnDisabled]="!canNavigateNext()">{{'admin.reports.commons.next-page' | translate}}</button>
 <!--
                                 <button id="export">{{'admin.reports.commons.export' | translate}}</button>
 -->

src/app/admin/admin-reports/filtered-items/filtered-items.component.ts

@@ -43,6 +43,7 @@ import { getFirstSucceededRemoteListPayload } from 'src/app/core/shared/operator
 import { isEmpty } from 'src/app/shared/empty.util';
 import { environment } from 'src/environments/environment';
 
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import { FiltersComponent } from '../filters-section/filters-section.component';
 import { FilteredItems } from './filtered-items-model';
 import { OptionVO } from './option-vo.model';
@@ -64,6 +65,7 @@ import { QueryPredicate } from './query-predicate.model';
     NgIf,
     NgForOf,
     FiltersComponent,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })

src/app/collection-page/delete-collection-page/delete-collection-page.component.html

@@ -6,10 +6,10 @@
                 <p class="pb-2">{{ 'collection.delete.text' | translate:{ dso: dsoNameService.getName(dso) } }}</p>
                 <div class="form-group row">
                   <div class="col text-right space-children-mr">
-                    <button class="btn btn-outline-secondary" (click)="onCancel(dso)" [disabled]="(processing$ | async)">
+                    <button class="btn btn-outline-secondary" (click)="onCancel(dso)" [dsBtnDisabled]="(processing$ | async)">
                       <i class="fas fa-times"></i> {{'collection.delete.cancel' | translate}}
                     </button>
-                    <button class="btn btn-danger" (click)="onConfirm(dso)" [disabled]="(processing$ | async)">
+                    <button class="btn btn-danger" (click)="onConfirm(dso)" [dsBtnDisabled]="(processing$ | async)">
                       <span *ngIf="processing$ | async"><i class='fas fa-circle-notch fa-spin'></i> {{'collection.delete.processing' | translate}}</span>
                       <span *ngIf="(processing$ | async) !== true"><i class="fas fa-trash"></i> {{'collection.delete.confirm' | translate}}</span>
                     </button>

src/app/collection-page/delete-collection-page/delete-collection-page.component.ts

@@ -15,6 +15,7 @@ import {
 import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
 import { CollectionDataService } from '../../core/data/collection-data.service';
 import { Collection } from '../../core/shared/collection.model';
+import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
 import { DeleteComColPageComponent } from '../../shared/comcol/comcol-forms/delete-comcol-page/delete-comcol-page.component';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { VarDirective } from '../../shared/utils/var.directive';
@@ -31,6 +32,7 @@ import { VarDirective } from '../../shared/utils/var.directive';
     AsyncPipe,
     NgIf,
     VarDirective,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })

src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.html

@@ -19,32 +19,32 @@
         </div>
 
         <button *ngIf="(testConfigRunning$ |async) !== true" class="btn btn-secondary"
-                [disabled]="!(isEnabled)"
+                [dsBtnDisabled]="!(isEnabled)"
                 (click)="testConfiguration(contentSource)">
             <span>{{'collection.source.controls.test.submit' | translate}}</span>
         </button>
         <button *ngIf="(testConfigRunning$ |async)" class="btn btn-secondary"
-                [disabled]="true">
+                [dsBtnDisabled]="true">
             <span class="spinner-border spinner-border-sm spinner-button" role="status" aria-hidden="true"></span>
             <span>{{'collection.source.controls.test.running' | translate}}</span>
         </button>
         <button *ngIf="(importRunning$ |async) !== true" class="btn btn-primary"
-                [disabled]="!(isEnabled)"
+                [dsBtnDisabled]="!(isEnabled)"
                 (click)="importNow()">
             <span class="d-none d-sm-inline">{{'collection.source.controls.import.submit' | translate}}</span>
         </button>
         <button *ngIf="(importRunning$ |async)" class="btn btn-primary"
-                [disabled]="true">
+                [dsBtnDisabled]="true">
             <span class="spinner-border spinner-border-sm spinner-button" role="status" aria-hidden="true"></span>
             <span class="d-none d-sm-inline">{{'collection.source.controls.import.running' | translate}}</span>
         </button>
         <button *ngIf="(reImportRunning$ |async) !== true" class="btn btn-primary"
-                [disabled]="!(isEnabled)"
+                [dsBtnDisabled]="!(isEnabled)"
                 (click)="resetAndReimport()">
             <span class="d-none d-sm-inline">&nbsp;{{'collection.source.controls.reset.submit' | translate}}</span>
         </button>
         <button *ngIf="(reImportRunning$ |async)" class="btn btn-primary"
-                [disabled]="true">
+                [dsBtnDisabled]="true">
             <span class="spinner-border spinner-border-sm spinner-button" role="status" aria-hidden="true"></span>
             <span class="d-none d-sm-inline">&nbsp;{{'collection.source.controls.reset.running' | translate}}</span>
         </button>

src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.spec.ts

@@ -22,6 +22,7 @@ import { Collection } from '../../../../core/shared/collection.model';
 import { ContentSource } from '../../../../core/shared/content-source.model';
 import { ContentSourceSetSerializer } from '../../../../core/shared/content-source-set-serializer';
 import { Process } from '../../../../process-page/processes/process.model';
+import { BtnDisabledDirective } from '../../../../shared/btn-disabled.directive';
 import { NotificationsService } from '../../../../shared/notifications/notifications.service';
 import { createSuccessfulRemoteDataObject$ } from '../../../../shared/remote-data.utils';
 import { NotificationsServiceStub } from '../../../../shared/testing/notifications-service.stub';
@@ -104,7 +105,7 @@ describe('CollectionSourceControlsComponent', () => {
     requestService = jasmine.createSpyObj('requestService', ['removeByHrefSubstring', 'setStaleByHrefSubstring']);
 
     TestBed.configureTestingModule({
-      imports: [TranslateModule.forRoot(), RouterTestingModule, CollectionSourceControlsComponent, VarDirective],
+      imports: [TranslateModule.forRoot(), RouterTestingModule, CollectionSourceControlsComponent, VarDirective, BtnDisabledDirective],
       providers: [
         { provide: ScriptDataService, useValue: scriptDataService },
         { provide: ProcessDataService, useValue: processDataService },
@@ -193,9 +194,10 @@ describe('CollectionSourceControlsComponent', () => {
 
       const buttons = fixture.debugElement.queryAll(By.css('button'));
 
-      expect(buttons[0].nativeElement.disabled).toBeTrue();
+      buttons.forEach(button => {
-      expect(buttons[1].nativeElement.disabled).toBeTrue();
+        expect(button.nativeElement.getAttribute('aria-disabled')).toBe('true');
-      expect(buttons[2].nativeElement.disabled).toBeTrue();
+        expect(button.nativeElement.classList.contains('disabled')).toBeTrue();
+      });
     });
     it('should be enabled when isEnabled is true', () => {
       comp.shouldShow = true;
@@ -205,9 +207,10 @@ describe('CollectionSourceControlsComponent', () => {
 
       const buttons = fixture.debugElement.queryAll(By.css('button'));
 
-      expect(buttons[0].nativeElement.disabled).toBeFalse();
+      buttons.forEach(button => {
-      expect(buttons[1].nativeElement.disabled).toBeFalse();
+        expect(button.nativeElement.getAttribute('aria-disabled')).toBe('false');
-      expect(buttons[2].nativeElement.disabled).toBeFalse();
+        expect(button.nativeElement.classList.contains('disabled')).toBeFalse();
+      });
     });
     it('should call the corresponding button when clicked', () => {
       spyOn(comp, 'testConfiguration');

src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.ts

@@ -40,6 +40,7 @@ import {
 } from '../../../../core/shared/operators';
 import { Process } from '../../../../process-page/processes/process.model';
 import { ProcessStatus } from '../../../../process-page/processes/process-status.model';
+import { BtnDisabledDirective } from '../../../../shared/btn-disabled.directive';
 import { hasValue } from '../../../../shared/empty.util';
 import { NotificationsService } from '../../../../shared/notifications/notifications.service';
 import { VarDirective } from '../../../../shared/utils/var.directive';
@@ -56,6 +57,7 @@ import { VarDirective } from '../../../../shared/utils/var.directive';
     AsyncPipe,
     NgIf,
     VarDirective,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })

src/app/collection-page/edit-collection-page/collection-source/collection-source.component.html

@@ -1,7 +1,7 @@
 <div class="container-fluid">
     <div class="d-inline-block float-right space-children-mr">
         <button class=" btn btn-danger" *ngIf="(isReinstatable$ | async) !== true"
-                [disabled]="(hasChanges$ | async) !== true"
+                [dsBtnDisabled]="(hasChanges$ | async) !== true"
                 (click)="discard()"><i
                 class="fas fa-times"></i>
             <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.discard-button" | translate}}</span>
@@ -12,7 +12,7 @@
             <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.reinstate-button" | translate}}</span>
         </button>
         <button class="btn btn-primary"
-                [disabled]="(hasChanges$ | async) !== true || !isValid() || (initialHarvestType === harvestTypeNone && contentSource.harvestType === initialHarvestType)"
+                [dsBtnDisabled]="(hasChanges$ | async) !== true || !isValid() || (initialHarvestType === harvestTypeNone && contentSource.harvestType === initialHarvestType)"
                 (click)="onSubmit()"><i
                 class="fas fa-save"></i>
             <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.save-button" | translate}}</span>
@@ -45,7 +45,7 @@
         <div class="col-12">
             <div class="d-inline-block float-right ml-1 space-children-mr">
                 <button class=" btn btn-danger" *ngIf="(isReinstatable$ | async) !== true"
-                        [disabled]="(hasChanges$ | async) !== true"
+                        [dsBtnDisabled]="(hasChanges$ | async) !== true"
                         (click)="discard()"><i
                         class="fas fa-times"></i>
                     <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.discard-button" | translate}}</span>
@@ -56,7 +56,7 @@
                     <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.reinstate-button" | translate}}</span>
                 </button>
                 <button class="btn btn-primary"
-                        [disabled]="(hasChanges$ | async) !== true || !isValid() || (initialHarvestType === harvestTypeNone && contentSource.harvestType === initialHarvestType)"
+                        [dsBtnDisabled]="(hasChanges$ | async) !== true || !isValid() || (initialHarvestType === harvestTypeNone && contentSource.harvestType === initialHarvestType)"
                         (click)="onSubmit()"><i
                         class="fas fa-save"></i>
                     <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.save-button" | translate}}</span>

src/app/collection-page/edit-collection-page/collection-source/collection-source.component.ts

@@ -56,6 +56,7 @@ import {
   getFirstCompletedRemoteData,
   getFirstSucceededRemoteData,
 } from '../../../core/shared/operators';
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import {
   hasNoValue,
   hasValue,
@@ -81,6 +82,7 @@ import { CollectionSourceControlsComponent } from './collection-source-controls/
     ThemedLoadingComponent,
     FormComponent,
     CollectionSourceControlsComponent,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })

src/app/community-page/delete-community-page/delete-community-page.component.html

@@ -6,10 +6,10 @@
                 <p class="pb-2">{{ 'community.delete.text' | translate:{ dso: dsoNameService.getName(dso) } }}</p>
                 <div class="form-group row">
                     <div class="col text-right space-children-mr">
-                        <button class="btn btn-outline-secondary" (click)="onCancel(dso)" [disabled]="(processing$ | async)">
+                        <button class="btn btn-outline-secondary" (click)="onCancel(dso)" [dsBtnDisabled]="(processing$ | async)">
                             <i class="fas fa-times" aria-hidden="true"></i> {{'community.delete.cancel' | translate}}
                         </button>
-                        <button class="btn btn-danger" (click)="onConfirm(dso)" [disabled]="(processing$ | async)">
+                        <button class="btn btn-danger" (click)="onConfirm(dso)" [dsBtnDisabled]="(processing$ | async)">
                             <span *ngIf="processing$ | async"><i class='fas fa-circle-notch fa-spin' aria-hidden="true"></i> {{'community.delete.processing' | translate}}</span>
                             <span *ngIf="(processing$ | async) !== true"><i class="fas fa-trash" aria-hidden="true"></i> {{'community.delete.confirm' | translate}}</span>
                         </button>

src/app/community-page/delete-community-page/delete-community-page.component.ts

@@ -15,6 +15,7 @@ import {
 import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
 import { CommunityDataService } from '../../core/data/community-data.service';
 import { Community } from '../../core/shared/community.model';
+import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
 import { DeleteComColPageComponent } from '../../shared/comcol/comcol-forms/delete-comcol-page/delete-comcol-page.component';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { VarDirective } from '../../shared/utils/var.directive';
@@ -31,6 +32,7 @@ import { VarDirective } from '../../shared/utils/var.directive';
     AsyncPipe,
     VarDirective,
     NgIf,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })

src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html

@@ -77,29 +77,29 @@
           <button class="btn btn-outline-primary btn-sm ng-star-inserted" data-test="metadata-edit-btn" *ngIf="!mdValue.editing"
                   [title]="dsoType + '.edit.metadata.edit.buttons.edit' | translate"
                   ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.edit' | translate }}"
-                  [disabled]="isVirtual || mdValue.change === DsoEditMetadataChangeTypeEnum.REMOVE || (saving$ | async)" (click)="edit.emit()">
+                  [dsBtnDisabled]="isVirtual || mdValue.change === DsoEditMetadataChangeTypeEnum.REMOVE || (saving$ | async)" (click)="edit.emit()">
             <i class="fas fa-edit fa-fw"></i>
           </button>
           <button class="btn btn-outline-success btn-sm ng-star-inserted" data-test="metadata-confirm-btn" *ngIf="mdValue.editing"
                   [title]="dsoType + '.edit.metadata.edit.buttons.confirm' | translate"
                   ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.confirm' | translate }}"
-                  [disabled]="isVirtual || (saving$ | async)" (click)="confirm.emit(true)">
+                  [dsBtnDisabled]="isVirtual || (saving$ | async)" (click)="confirm.emit(true)">
             <i class="fas fa-check fa-fw"></i>
           </button>
           <button class="btn btn-outline-danger btn-sm" data-test="metadata-remove-btn"
                   [title]="dsoType + '.edit.metadata.edit.buttons.remove' | translate"
                   ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.remove' | translate }}"
-                  [disabled]="isVirtual || (mdValue.change && mdValue.change !== DsoEditMetadataChangeTypeEnum.ADD) || mdValue.editing || (saving$ | async)" (click)="remove.emit()">
+                  [dsBtnDisabled]="isVirtual || (mdValue.change && mdValue.change !== DsoEditMetadataChangeTypeEnum.ADD) || mdValue.editing || (saving$ | async)" (click)="remove.emit()">
             <i class="fas fa-trash-alt fa-fw"></i>
           </button>
           <button class="btn btn-outline-warning btn-sm" data-test="metadata-undo-btn"
                   [title]="dsoType + '.edit.metadata.edit.buttons.undo' | translate"
                   ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.undo' | translate }}"
-                  [disabled]="isVirtual || (!mdValue.change && mdValue.reordered) || (!mdValue.change && !mdValue.editing) || (saving$ | async)" (click)="undo.emit()">
+                  [dsBtnDisabled]="isVirtual || (!mdValue.change && mdValue.reordered) || (!mdValue.change && !mdValue.editing) || (saving$ | async)" (click)="undo.emit()">
             <i class="fas fa-undo-alt fa-fw"></i>
           </button>
           <button class="btn btn-outline-secondary ds-drag-handle btn-sm" data-test="metadata-drag-btn" *ngVar="(isOnlyValue || (saving$ | async)) as disabled"
-                  cdkDragHandle [cdkDragHandleDisabled]="disabled" [ngClass]="{'disabled': disabled}" [disabled]="disabled"
+                  cdkDragHandle [cdkDragHandleDisabled]="disabled" [ngClass]="{'disabled': disabled}" [dsBtnDisabled]="disabled"
                   [title]="dsoType + '.edit.metadata.edit.buttons.drag' | translate"
                   ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.drag' | translate }}">
             <i class="fas fa-grip-vertical fa-fw"></i>

src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.spec.ts

@@ -34,6 +34,7 @@ import {
   VIRTUAL_METADATA_PREFIX,
 } from '../../../core/shared/metadata.models';
 import { ItemMetadataRepresentation } from '../../../core/shared/metadata-representation/item/item-metadata-representation.model';
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import { DsDynamicOneboxComponent } from '../../../shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component';
 import { DsDynamicScrollableDropdownComponent } from '../../../shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component';
 import { ThemedTypeBadgeComponent } from '../../../shared/object-collection/shared/badges/type-badge/themed-type-badge.component';
@@ -188,6 +189,7 @@ describe('DsoEditMetadataValueComponent', () => {
         RouterTestingModule.withRoutes([]),
         DsoEditMetadataValueComponent,
         VarDirective,
+        BtnDisabledDirective,
       ],
       providers: [
         { provide: RelationshipDataService, useValue: relationshipService },
@@ -524,7 +526,14 @@ describe('DsoEditMetadataValueComponent', () => {
         });
 
         it(`should${disabled ? ' ' : ' not '}be disabled`, () => {
-          expect(btn.nativeElement.disabled).toBe(disabled);
+          if (disabled) {
+            expect(btn.nativeElement.getAttribute('aria-disabled')).toBe('true');
+            expect(btn.nativeElement.classList.contains('disabled')).toBeTrue();
+          } else {
+            // Can be null or false, depending on if button was ever disabled so just check not true
+            expect(btn.nativeElement.getAttribute('aria-disabled')).not.toBe('true');
+            expect(btn.nativeElement.classList.contains('disabled')).toBeFalse();
+          }
         });
       } else {
         it('should not exist', () => {

src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.ts

@@ -67,6 +67,7 @@ import {
 import { Vocabulary } from '../../../core/submission/vocabularies/models/vocabulary.model';
 import { VocabularyOptions } from '../../../core/submission/vocabularies/models/vocabulary-options.model';
 import { getItemPageRoute } from '../../../item-page/item-page-routing-paths';
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import { isNotEmpty } from '../../../shared/empty.util';
 import { DsDynamicOneboxComponent } from '../../../shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component';
 import {
@@ -94,7 +95,7 @@ import {
   styleUrls: ['./dso-edit-metadata-value.component.scss', '../dso-edit-metadata-shared/dso-edit-metadata-cells.scss'],
   templateUrl: './dso-edit-metadata-value.component.html',
   standalone: true,
-  imports: [VarDirective, CdkDrag, NgClass, NgIf, FormsModule, DebounceDirective, RouterLink, ThemedTypeBadgeComponent, NgbTooltipModule, CdkDragHandle, AsyncPipe, TranslateModule, DsDynamicScrollableDropdownComponent, DsDynamicOneboxComponent, AuthorityConfidenceStateDirective],
+  imports: [VarDirective, CdkDrag, NgClass, NgIf, FormsModule, DebounceDirective, RouterLink, ThemedTypeBadgeComponent, NgbTooltipModule, CdkDragHandle, AsyncPipe, TranslateModule, DsDynamicScrollableDropdownComponent, DsDynamicOneboxComponent, AuthorityConfidenceStateDirective, BtnDisabledDirective],
 })
 /**
  * Component displaying a single editable row for a metadata value

src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html

@@ -1,18 +1,18 @@
 <div class="item-metadata" *ngIf="form">
   <div class="button-row top d-flex my-2 space-children-mr ml-gap">
-    <button class="mr-auto btn btn-success" id="dso-add-btn" [disabled]="form.newValue || (saving$ | async)"
+    <button class="mr-auto btn btn-success" id="dso-add-btn" [dsBtnDisabled]="form.newValue || (saving$ | async)"
             [attr.aria-label]="dsoType + '.edit.metadata.add-button' | translate"
             [title]="dsoType + '.edit.metadata.add-button' | translate"
             (click)="add()"><i class="fas fa-plus" aria-hidden="true"></i>
       <span class="d-none d-sm-inline">&nbsp;{{ dsoType + '.edit.metadata.add-button' | translate }}</span>
     </button>
-    <button class="btn btn-warning ml-1" id="dso-reinstate-btn" *ngIf="isReinstatable" [disabled]="(saving$ | async)"
+    <button class="btn btn-warning ml-1" id="dso-reinstate-btn" *ngIf="isReinstatable" [dsBtnDisabled]="(saving$ | async)"
             [attr.aria-label]="dsoType + '.edit.metadata.reinstate-button' | translate"
             [title]="dsoType + '.edit.metadata.reinstate-button' | translate"
             (click)="reinstate()"><i class="fas fa-undo-alt" aria-hidden="true"></i>
       <span class="d-none d-sm-inline">&nbsp;{{ dsoType + '.edit.metadata.reinstate-button' | translate }}</span>
     </button>
-    <button class="btn btn-primary ml-1" id="dso-save-btn" [disabled]="!hasChanges || (saving$ | async)"
+    <button class="btn btn-primary ml-1" id="dso-save-btn" [dsBtnDisabled]="!hasChanges || (saving$ | async)"
             [attr.aria-label]="dsoType + '.edit.metadata.save-button' | translate"
             [title]="dsoType + '.edit.metadata.save-button' | translate"
             (click)="submit()"><i class="fas fa-save" aria-hidden="true"></i>
@@ -21,7 +21,7 @@
     <button class="btn btn-danger ml-1" id="dso-discard-btn" *ngIf="!isReinstatable"
             [attr.aria-label]="dsoType + '.edit.metadata.discard-button' | translate"
             [title]="dsoType + '.edit.metadata.discard-button' | translate"
-            [disabled]="!hasChanges || (saving$ | async)"
+            [dsBtnDisabled]="!hasChanges || (saving$ | async)"
             (click)="discard()"><i class="fas fa-times" aria-hidden="true"></i>
       <span class="d-none d-sm-inline">&nbsp;{{ dsoType + '.edit.metadata.discard-button' | translate }}</span>
     </button>
@@ -77,13 +77,13 @@
   </div>
   <div class="button-row bottom d-inline-block w-100">
     <div class="mt-2 float-right space-children-mr ml-gap">
-      <button class="btn btn-warning" *ngIf="isReinstatable" [disabled]="(saving$ | async)"
+      <button class="btn btn-warning" *ngIf="isReinstatable" [dsBtnDisabled]="(saving$ | async)"
               [attr.aria-label]="dsoType + '.edit.metadata.reinstate-button' | translate"
               [title]="dsoType + '.edit.metadata.reinstate-button' | translate"
               (click)="reinstate()">
         <i class="fas fa-undo-alt" aria-hidden="true"></i> {{ dsoType + '.edit.metadata.reinstate-button' | translate }}
       </button>
-      <button class="btn btn-primary" [disabled]="!hasChanges || (saving$ | async)"
+      <button class="btn btn-primary" [dsBtnDisabled]="!hasChanges || (saving$ | async)"
               [attr.aria-label]="dsoType + '.edit.metadata.save-button' | translate"
               [title]="dsoType + '.edit.metadata.save-button' | translate"
               (click)="submit()">
@@ -92,7 +92,7 @@
       <button class="btn btn-danger" *ngIf="!isReinstatable"
               [attr.aria-label]="dsoType + '.edit.metadata.discard-button' | translate"
               [title]="dsoType + '.edit.metadata.discard-button' | translate"
-              [disabled]="!hasChanges || (saving$ | async)"
+              [dsBtnDisabled]="!hasChanges || (saving$ | async)"
               (click)="discard()">
         <i class="fas fa-times" aria-hidden="true"></i> {{ dsoType + '.edit.metadata.discard-button' | translate }}
       </button>

src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.spec.ts

@@ -22,6 +22,7 @@ import { Item } from '../../core/shared/item.model';
 import { ITEM } from '../../core/shared/item.resource-type';
 import { MetadataValue } from '../../core/shared/metadata.models';
 import { AlertComponent } from '../../shared/alert/alert.component';
+import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
 import { ThemedLoadingComponent } from '../../shared/loading/themed-loading.component';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { TestDataService } from '../../shared/testing/test-data-service.mock';
@@ -94,6 +95,7 @@ describe('DsoEditMetadataComponent', () => {
         RouterTestingModule.withRoutes([]),
         DsoEditMetadataComponent,
         VarDirective,
+        BtnDisabledDirective,
       ],
       providers: [
         { provide: APP_DATA_SERVICES_MAP, useValue: mockDataServiceMap },
@@ -216,7 +218,13 @@ describe('DsoEditMetadataComponent', () => {
         });
 
         it(`should${disabled ? ' ' : ' not '}be disabled`, () => {
-          expect(btn.nativeElement.disabled).toBe(disabled);
+          if (disabled) {
+            expect(btn.nativeElement.getAttribute('aria-disabled')).toBe('true');
+            expect(btn.nativeElement.classList.contains('disabled')).toBeTrue();
+          } else {
+            expect(btn.nativeElement.getAttribute('aria-disabled')).not.toBe('true');
+            expect(btn.nativeElement.classList.contains('disabled')).toBeFalse();
+          }
         });
       } else {
         it('should not exist', () => {

src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts

@@ -47,6 +47,7 @@ import { getFirstCompletedRemoteData } from '../../core/shared/operators';
 import { ResourceType } from '../../core/shared/resource-type';
 import { AlertComponent } from '../../shared/alert/alert.component';
 import { AlertType } from '../../shared/alert/alert-type';
+import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
 import {
   hasNoValue,
   hasValue,
@@ -66,7 +67,7 @@ import { MetadataFieldSelectorComponent } from './metadata-field-selector/metada
   styleUrls: ['./dso-edit-metadata.component.scss'],
   templateUrl: './dso-edit-metadata.component.html',
   standalone: true,
-  imports: [NgIf, DsoEditMetadataHeadersComponent, MetadataFieldSelectorComponent, DsoEditMetadataValueHeadersComponent, DsoEditMetadataValueComponent, NgFor, DsoEditMetadataFieldValuesComponent, AlertComponent, ThemedLoadingComponent, AsyncPipe, TranslateModule],
+  imports: [NgIf, DsoEditMetadataHeadersComponent, MetadataFieldSelectorComponent, DsoEditMetadataValueHeadersComponent, DsoEditMetadataValueComponent, NgFor, DsoEditMetadataFieldValuesComponent, AlertComponent, ThemedLoadingComponent, AsyncPipe, TranslateModule, BtnDisabledDirective],
 })
 /**
  * Component showing a table of all metadata on a DSpaceObject and options to modify them

src/app/forgot-password/forgot-password-form/forgot-password-form.component.html

@@ -28,7 +28,7 @@
     <div class="row">
         <div class="col-12">
             <button
-                    [disabled]="isInValid"
+                    [dsBtnDisabled]="isInValid"
                     class="btn btn-default btn-primary"
                     (click)="submit()">{{'forgot-password.form.submit' | translate}}</button>
         </div>

src/app/forgot-password/forgot-password-form/forgot-password-form.component.ts

@@ -29,6 +29,7 @@ import {
 } from '../../core/shared/operators';
 import { Registration } from '../../core/shared/registration.model';
 import { ProfilePageSecurityFormComponent } from '../../profile-page/profile-page-security-form/profile-page-security-form.component';
+import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { BrowserOnlyPipe } from '../../shared/utils/browser-only.pipe';
 
@@ -42,6 +43,7 @@ import { BrowserOnlyPipe } from '../../shared/utils/browser-only.pipe';
     ProfilePageSecurityFormComponent,
     AsyncPipe,
     NgIf,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })

src/app/info/end-user-agreement/end-user-agreement.component.html

@@ -7,7 +7,7 @@
 
     <div class="d-flex mt-4">
       <button id="button-cancel" type="button" (click)="cancel()" class="btn btn-outline-secondary mr-auto">{{ 'info.end-user-agreement.buttons.cancel' | translate }}</button>
-      <button id="button-save" type="submit" class="btn btn-primary" [disabled]="!accepted">{{ 'info.end-user-agreement.buttons.save' | translate }}</button>
+      <button id="button-save" type="submit" class="btn btn-primary" [dsBtnDisabled]="!accepted">{{ 'info.end-user-agreement.buttons.save' | translate }}</button>
     </div>
   </form>
 </div>

src/app/info/end-user-agreement/end-user-agreement.component.spec.ts

@@ -16,6 +16,7 @@ import { of as observableOf } from 'rxjs';
 import { LogOutAction } from '../../core/auth/auth.actions';
 import { AuthService } from '../../core/auth/auth.service';
 import { EndUserAgreementService } from '../../core/end-user-agreement/end-user-agreement.service';
+import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { ActivatedRouteStub } from '../../shared/testing/active-router.stub';
 import { EndUserAgreementComponent } from './end-user-agreement.component';
@@ -57,7 +58,7 @@ describe('EndUserAgreementComponent', () => {
   beforeEach(waitForAsync(() => {
     init();
     TestBed.configureTestingModule({
-      imports: [TranslateModule.forRoot(), EndUserAgreementComponent],
+      imports: [TranslateModule.forRoot(), EndUserAgreementComponent, BtnDisabledDirective],
       providers: [
         { provide: EndUserAgreementService, useValue: endUserAgreementService },
         { provide: NotificationsService, useValue: notificationsService },
@@ -95,7 +96,8 @@ describe('EndUserAgreementComponent', () => {
 
     it('should disable the save button', () => {
       const button = fixture.debugElement.query(By.css('#button-save')).nativeElement;
-      expect(button.disabled).toBeTruthy();
+      expect(button.getAttribute('aria-disabled')).toBe('true');
+      expect(button.classList.contains('disabled')).toBeTrue();
     });
   });
 

src/app/info/end-user-agreement/end-user-agreement.component.ts

@@ -23,6 +23,7 @@ import { AppState } from '../../app.reducer';
 import { LogOutAction } from '../../core/auth/auth.actions';
 import { AuthService } from '../../core/auth/auth.service';
 import { EndUserAgreementService } from '../../core/end-user-agreement/end-user-agreement.service';
+import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
 import { isNotEmpty } from '../../shared/empty.util';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { EndUserAgreementContentComponent } from './end-user-agreement-content/end-user-agreement-content.component';
@@ -32,7 +33,7 @@ import { EndUserAgreementContentComponent } from './end-user-agreement-content/e
   templateUrl: './end-user-agreement.component.html',
   styleUrls: ['./end-user-agreement.component.scss'],
   standalone: true,
-  imports: [EndUserAgreementContentComponent, FormsModule, TranslateModule],
+  imports: [EndUserAgreementContentComponent, FormsModule, TranslateModule, BtnDisabledDirective],
 })
 /**
  * Component displaying the End User Agreement and an option to accept it

src/app/info/feedback/feedback-form/feedback-form.component.html

@@ -41,7 +41,7 @@
 
       <div class="row mt-3">
         <div class="control-group col-sm-12 text-right">
-          <button [disabled]="!feedbackForm.valid" class="btn btn-primary" name="submit" type="submit">{{ 'info.feedback.send' | translate }}</button>
+          <button [dsBtnDisabled]="!feedbackForm.valid" class="btn btn-primary" name="submit" type="submit">{{ 'info.feedback.send' | translate }}</button>
         </div>
       </div>
     </form>

src/app/info/feedback/feedback-form/feedback-form.component.spec.ts

@@ -18,6 +18,7 @@ import { FeedbackDataService } from '../../../core/feedback/feedback-data.servic
 import { Feedback } from '../../../core/feedback/models/feedback.model';
 import { RouteService } from '../../../core/services/route.service';
 import { NativeWindowService } from '../../../core/services/window.service';
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import { NativeWindowMockFactory } from '../../../shared/mocks/mock-native-window-ref';
 import { RouterMock } from '../../../shared/mocks/router.mock';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
@@ -45,7 +46,7 @@ describe('FeedbackFormComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [TranslateModule.forRoot(), FeedbackFormComponent],
+      imports: [TranslateModule.forRoot(), FeedbackFormComponent, BtnDisabledDirective],
       providers: [
         { provide: RouteService, useValue: routeServiceStub },
         { provide: UntypedFormBuilder, useValue: new UntypedFormBuilder() },
@@ -79,7 +80,8 @@ describe('FeedbackFormComponent', () => {
   });
 
   it('should have disabled button', () => {
-    expect(de.query(By.css('button')).nativeElement.disabled).toBeTrue();
+    expect(de.query(By.css('button')).nativeElement.getAttribute('aria-disabled')).toBe('true');
+    expect(de.query(By.css('button')).nativeElement.classList.contains('disabled')).toBeTrue();
   });
 
   describe('when message is inserted', () => {
@@ -90,7 +92,8 @@ describe('FeedbackFormComponent', () => {
     });
 
     it('should not have disabled button', () => {
-      expect(de.query(By.css('button')).nativeElement.disabled).toBeFalse();
+      expect(de.query(By.css('button')).nativeElement.getAttribute('aria-disabled')).toBe('false');
+      expect(de.query(By.css('button')).nativeElement.classList.contains('disabled')).toBeFalse();
     });
 
     it('on submit should call createFeedback of feedbackDataServiceStub service', () => {

src/app/info/feedback/feedback-form/feedback-form.component.ts

@@ -30,6 +30,7 @@ import {
 import { NoContent } from '../../../core/shared/NoContent.model';
 import { getFirstCompletedRemoteData } from '../../../core/shared/operators';
 import { URLCombiner } from '../../../core/url-combiner/url-combiner';
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import { ErrorComponent } from '../../../shared/error/error.component';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
 
@@ -38,7 +39,7 @@ import { NotificationsService } from '../../../shared/notifications/notification
   templateUrl: './feedback-form.component.html',
   styleUrls: ['./feedback-form.component.scss'],
   standalone: true,
-  imports: [FormsModule, ReactiveFormsModule, NgIf, ErrorComponent, TranslateModule],
+  imports: [FormsModule, ReactiveFormsModule, NgIf, ErrorComponent, TranslateModule, BtnDisabledDirective],
 })
 /**
  * Component displaying the contents of the Feedback Statement

src/app/item-page/bitstreams/request-a-copy/bitstream-request-a-copy-page.component.html

@@ -79,7 +79,7 @@
             </a>
 
             <button
-                    [disabled]="requestCopyForm.invalid"
+                    [dsBtnDisabled]="requestCopyForm.invalid"
                     class="btn btn-default btn-primary"
                     (click)="onSubmit()">{{'bitstream-request-a-copy.submit' | translate}}</button>
         </div>

src/app/item-page/bitstreams/request-a-copy/bitstream-request-a-copy-page.component.ts

@@ -55,6 +55,7 @@ import {
   getFirstCompletedRemoteData,
   getFirstSucceededRemoteDataPayload,
 } from '../../../core/shared/operators';
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import {
   hasValue,
   isNotEmpty,
@@ -71,6 +72,7 @@ import { getItemPageRoute } from '../../item-page-routing-paths';
     AsyncPipe,
     ReactiveFormsModule,
     NgIf,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })

src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html

@@ -16,7 +16,7 @@
             class="fas fa-undo-alt"></i>
       <span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.reinstate-button" | translate}}</span>
     </button>
-    <button class="btn btn-primary" [disabled]="(hasChanges$ | async) !== true || submitting"
+    <button class="btn btn-primary" [dsBtnDisabled]="(hasChanges$ | async) !== true || submitting"
             [attr.aria-label]="'item.edit.bitstreams.save-button' | translate"
             (click)="submit()"><i
             class="fas fa-save"></i>
@@ -24,7 +24,7 @@
     </button>
     <button class="btn btn-danger" *ngIf="(isReinstatable$ | async) !== true"
             [attr.aria-label]="'item.edit.bitstreams.discard-button' | translate"
-            [disabled]="(hasChanges$ | async) !== true || submitting"
+            [dsBtnDisabled]="(hasChanges$ | async) !== true || submitting"
             (click)="discard()"><i
             class="fas fa-times"></i>
       <span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.discard-button" | translate}}</span>
@@ -57,7 +57,7 @@
         class="fas fa-undo-alt"></i>
         <span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.reinstate-button" | translate}}</span>
       </button>
-      <button class="btn btn-primary" [disabled]="(hasChanges$ | async) !== true || submitting"
+      <button class="btn btn-primary" [dsBtnDisabled]="(hasChanges$ | async) !== true || submitting"
               [attr.aria-label]="'item.edit.bitstreams.save-button' | translate"
               (click)="submit()"><i
         class="fas fa-save"></i>
@@ -65,7 +65,7 @@
       </button>
       <button class="btn btn-danger" *ngIf="(isReinstatable$ | async) !== true"
               [attr.aria-label]="'item.edit.bitstreams.discard-button' | translate"
-              [disabled]="(hasChanges$ | async) !== true || submitting"
+              [dsBtnDisabled]="(hasChanges$ | async) !== true || submitting"
               (click)="discard()"><i
         class="fas fa-times"></i>
         <span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.discard-button" | translate}}</span>

src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.ts

@@ -51,6 +51,7 @@ import {
   getFirstSucceededRemoteData,
   getRemoteDataPayload,
 } from '../../../core/shared/operators';
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import {
   hasValue,
   isNotEmpty,
@@ -81,6 +82,7 @@ import { ItemEditBitstreamBundleComponent } from './item-edit-bitstream-bundle/i
     NgForOf,
     ThemedLoadingComponent,
     AlertComponent,
+    BtnDisabledDirective,
   ],
   providers: [ObjectValuesPipe],
   standalone: true,

src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.html

@@ -113,13 +113,13 @@
                           title="{{'item.edit.bitstreams.edit.buttons.edit' | translate}}">
                     <i class="fas fa-edit fa-fw"></i>
                   </button>
-                  <button [disabled]="!canRemove(update)" (click)="remove(entry.bitstream)"
+                  <button [dsBtnDisabled]="!canRemove(update)" (click)="remove(entry.bitstream)"
                           [attr.aria-label]=" 'item. edit bitstreams.edit.buttons.remove' | translate"
                           class="btn btn-outline-danger btn-sm"
                           title="{{'item.edit.bitstreams.edit.buttons.remove' | translate}}">
                     <i class="fas fa-trash-alt fa-fw"></i>
                   </button>
-                  <button [disabled]="!canUndo(update)" (click)="undo(entry.bitstream)"
+                  <button [dsBtnDisabled]="!canUndo(update)" (click)="undo(entry.bitstream)"
                           [attr.aria-label]="'item.edit.bitstreams.edit.buttons.undo' | translate"
                           class="btn btn-outline-warning btn-sm"
                           title="{{'item.edit.bitstreams.edit.buttons.undo' | translate}}">

src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.ts

@@ -52,6 +52,7 @@ import {
   getAllSucceededRemoteData,
   paginatedListToArray,
 } from '../../../../core/shared/operators';
+import { BtnDisabledDirective } from '../../../../shared/btn-disabled.directive';
 import {
   hasNoValue,
   hasValue,
@@ -87,6 +88,7 @@ import {
     NgbDropdownModule,
     CdkDrag,
     BrowserOnlyPipe,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })

src/app/item-page/edit-item-page/item-delete/item-delete.component.html

@@ -86,10 +86,10 @@
             </ng-container>
 
             <div class="space-children-mr">
-              <button [disabled]="isDeleting$ | async" (click)="performAction()"
+              <button [dsBtnDisabled]="isDeleting$ | async" (click)="performAction()"
                       class="btn btn-outline-secondary perform-action">{{confirmMessage | translate}}
               </button>
-              <button [disabled]="isDeleting$ | async" [routerLink]="[itemPageRoute, 'edit']"
+              <button [dsBtnDisabled]="isDeleting$ | async" [routerLink]="[itemPageRoute, 'edit']"
                       class="btn btn-outline-secondary cancel">
                 {{cancelMessage| translate}}
               </button>

src/app/item-page/edit-item-page/item-delete/item-delete.component.ts

@@ -56,6 +56,7 @@ import {
   getRemoteDataPayload,
 } from '../../../core/shared/operators';
 import { ViewMode } from '../../../core/shared/view-mode.model';
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import {
   hasValue,
   isNotEmpty,
@@ -109,6 +110,7 @@ class RelationshipDTO {
     VarDirective,
     NgForOf,
     RouterLink,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })

src/app/item-page/edit-item-page/item-move/item-move.component.html

@@ -40,7 +40,7 @@
               <button [routerLink]="[(itemPageRoute$ | async), 'edit']" class="btn btn-outline-secondary">
                 <i class="fas fa-arrow-left"></i> {{'item.edit.move.cancel' | translate}}
               </button>
-              <button class="btn btn-primary" [disabled]="!canMove" (click)="moveToCollection()">
+              <button class="btn btn-primary" [dsBtnDisabled]="!canMove" (click)="moveToCollection()">
               <span *ngIf="!processing">
                 <i class="fas fa-save"></i> {{'item.edit.move.save-button' | translate}}
               </span>
@@ -48,7 +48,7 @@
                 <i class="fas fa-circle-notch fa-spin"></i> {{'item.edit.move.processing' | translate}}
               </span>
               </button>
-              <button class="btn btn-danger" [disabled]="!canSubmit" (click)="discard()">
+              <button class="btn btn-danger" [dsBtnDisabled]="!canSubmit" (click)="discard()">
                 <i class="fas fa-times"></i> {{"item.edit.move.discard-button" | translate}}
               </button>
             </div>

src/app/item-page/edit-item-page/item-move/item-move.component.ts

@@ -37,6 +37,7 @@ import {
   getRemoteDataPayload,
 } from '../../../core/shared/operators';
 import { SearchService } from '../../../core/shared/search/search.service';
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import { AuthorizedCollectionSelectorComponent } from '../../../shared/dso-selector/dso-selector/authorized-collection-selector/authorized-collection-selector.component';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
 import { followLink } from '../../../shared/utils/follow-link-config.model';
@@ -56,6 +57,7 @@ import {
     AsyncPipe,
     AuthorizedCollectionSelectorComponent,
     NgIf,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })

src/app/item-page/edit-item-page/item-operation/item-operation.component.html

@@ -5,12 +5,12 @@
 </div>
 <div class="col-12 col-md-9 float-left action-button">
   <span *ngIf="operation.authorized">
-    <button class="btn btn-outline-primary" [disabled]="operation.disabled" [routerLink]="operation.operationUrl" [attr.aria-label]="'item.edit.tabs.status.buttons.' + operation.operationKey + '.button' | translate">
+    <button class="btn btn-outline-primary" [dsBtnDisabled]="operation.disabled" [routerLink]="operation.operationUrl" [attr.aria-label]="'item.edit.tabs.status.buttons.' + operation.operationKey + '.button' | translate">
       {{'item.edit.tabs.status.buttons.' + operation.operationKey + '.button' | translate}}
     </button>
   </span>
   <span *ngIf="!operation.authorized" [ngbTooltip]="'item.edit.tabs.status.buttons.unauthorized' | translate">
-    <button class="btn btn-outline-primary" [disabled]="true" [attr.aria-label]="'item.edit.tabs.status.buttons.' + operation.operationKey + '.button' | translate">
+    <button class="btn btn-outline-primary" [dsBtnDisabled]="true" [attr.aria-label]="'item.edit.tabs.status.buttons.' + operation.operationKey + '.button' | translate">
       {{'item.edit.tabs.status.buttons.' + operation.operationKey + '.button' | translate}}
     </button>
   </span>

src/app/item-page/edit-item-page/item-operation/item-operation.component.spec.ts

@@ -6,6 +6,7 @@ import { By } from '@angular/platform-browser';
 import { RouterTestingModule } from '@angular/router/testing';
 import { TranslateModule } from '@ngx-translate/core';
 
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import { ItemOperationComponent } from './item-operation.component';
 import { ItemOperation } from './itemOperation.model';
 
@@ -17,7 +18,7 @@ describe('ItemOperationComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([]), ItemOperationComponent],
+      imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([]), ItemOperationComponent, BtnDisabledDirective],
     }).compileComponents();
   }));
 
@@ -43,7 +44,8 @@ describe('ItemOperationComponent', () => {
     const span = fixture.debugElement.query(By.css('.action-label span')).nativeElement;
     expect(span.textContent).toContain('item.edit.tabs.status.buttons.key1.label');
     const button = fixture.debugElement.query(By.css('button')).nativeElement;
-    expect(button.disabled).toBeTrue();
+    expect(button.getAttribute('aria-disabled')).toBe('true');
+    expect(button.classList.contains('disabled')).toBeTrue();
     expect(button.textContent).toContain('item.edit.tabs.status.buttons.key1.button');
   });
 });

src/app/item-page/edit-item-page/item-operation/item-operation.component.ts

@@ -7,6 +7,7 @@ import { RouterLink } from '@angular/router';
 import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
 
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import { ItemOperation } from './itemOperation.model';
 
 @Component({
@@ -17,6 +18,7 @@ import { ItemOperation } from './itemOperation.model';
     RouterLink,
     NgbTooltipModule,
     NgIf,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })

src/app/item-page/edit-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.html

@@ -1,6 +1,6 @@
 <h2 class="h4">
     {{relationshipMessageKey$ | async | translate}}
-    <button class="ml-2 btn btn-success" [disabled]="(hasChanges | async)" (click)="openLookup()">
+    <button class="ml-2 btn btn-success" [dsBtnDisabled]="(hasChanges | async)" (click)="openLookup()">
         <i class="fas fa-plus"></i>
         <span class="d-none d-sm-inline">&nbsp;{{"item.edit.relationships.edit.buttons.add" | translate}}</span>
     </button>

src/app/item-page/edit-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.spec.ts

@@ -388,7 +388,8 @@ describe('EditRelationshipListComponent', () => {
           comp.hasChanges = observableOf(true);
           fixture.detectChanges();
           const element = de.query(By.css('.btn-success'));
-          expect(element.nativeElement?.disabled).toBeTrue();
+          expect(element.nativeElement?.getAttribute('aria-disabled')).toBe('true');
+          expect(element.nativeElement?.classList.contains('disabled')).toBeTrue();
         });
       });
 

src/app/item-page/edit-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.ts

@@ -65,6 +65,7 @@ import {
   getFirstSucceededRemoteDataPayload,
   getRemoteDataPayload,
 } from '../../../../core/shared/operators';
+import { BtnDisabledDirective } from '../../../../shared/btn-disabled.directive';
 import {
   hasNoValue,
   hasValue,
@@ -100,6 +101,7 @@ import { EditRelationshipComponent } from '../edit-relationship/edit-relationshi
     TranslateModule,
     NgClass,
     ThemedLoadingComponent,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })

src/app/item-page/edit-item-page/item-relationships/edit-relationship/edit-relationship.component.html

@@ -9,12 +9,12 @@
   </div>
   <div class="col-2">
     <div class="btn-group relationship-action-buttons">
-      <button [disabled]="!canRemove()" (click)="openVirtualMetadataModal(virtualMetadataModal)"
+      <button [dsBtnDisabled]="!canRemove()" (click)="openVirtualMetadataModal(virtualMetadataModal)"
               class="btn btn-outline-danger btn-sm"
               title="{{'item.edit.metadata.edit.buttons.remove' | translate}}">
         <i class="fas fa-trash-alt fa-fw"></i>
       </button>
-      <button [disabled]="!canUndo()" (click)="undo()"
+      <button [dsBtnDisabled]="!canUndo()" (click)="undo()"
               class="btn btn-outline-warning btn-sm"
               title="{{'item.edit.metadata.edit.buttons.undo' | translate}}">
         <i class="fas fa-undo-alt fa-fw"></i>

src/app/item-page/edit-item-page/item-relationships/edit-relationship/edit-relationship.component.ts

@@ -37,6 +37,7 @@ import {
   getRemoteDataPayload,
 } from '../../../../core/shared/operators';
 import { ViewMode } from '../../../../core/shared/view-mode.model';
+import { BtnDisabledDirective } from '../../../../shared/btn-disabled.directive';
 import {
   hasValue,
   isNotEmpty,
@@ -54,6 +55,7 @@ import { VirtualMetadataComponent } from '../../virtual-metadata/virtual-metadat
     NgIf,
     TranslateModule,
     VirtualMetadataComponent,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })

src/app/item-page/edit-item-page/item-relationships/item-relationships.component.html

@@ -35,7 +35,7 @@
 <ng-template #buttons>
   <div class="d-flex space-children-mr justify-content-end">
     <button class="btn btn-danger" *ngIf="(isReinstatable$ | async) !== true"
-            [disabled]="(hasChanges$ | async) !== true"
+            [dsBtnDisabled]="(hasChanges$ | async) !== true"
             (click)="discard()">
       <i aria-hidden="true" class="fas fa-times"></i>
       <span class="d-none d-sm-inline">&nbsp;{{ 'item.edit.metadata.discard-button' | translate }}</span>
@@ -45,7 +45,7 @@
       <span class="d-none d-sm-inline">&nbsp;{{ 'item.edit.metadata.reinstate-button' | translate }}</span>
     </button>
     <button class="btn btn-primary"
-            [disabled]="(hasChanges$ | async) !== true || (isSaving$ | async) === true"
+            [dsBtnDisabled]="(hasChanges$ | async) !== true || (isSaving$ | async) === true"
             (click)="submit()">
       <span *ngIf="isSaving$ | async" aria-hidden="true" class="spinner-border spinner-border-sm" role="status"></span>
       <i *ngIf="(isSaving$ | async) !== true" aria-hidden="true" class="fas fa-save"></i>

src/app/item-page/edit-item-page/item-relationships/item-relationships.component.ts

@@ -42,6 +42,7 @@ import {
 } from '../../../core/shared/operators';
 import { AlertComponent } from '../../../shared/alert/alert.component';
 import { AlertType } from '../../../shared/alert/alert-type';
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import { ThemedLoadingComponent } from '../../../shared/loading/themed-loading.component';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
 import { followLink } from '../../../shared/utils/follow-link-config.model';
@@ -67,6 +68,7 @@ import { EditRelationshipListWrapperComponent } from './edit-relationship-list-w
     TranslateModule,
     VarDirective,
     EditRelationshipListWrapperComponent,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })

src/app/item-page/media-viewer/media-viewer-video/media-viewer-video.component.html

@@ -19,7 +19,7 @@
 <div class="buttons" *ngIf="medias?.length > 1">
   <button
     class="btn btn-primary previous"
-    [disabled]="currentIndex === 0"
+    [dsBtnDisabled]="currentIndex === 0"
     (click)="prevMedia()"
   >
     {{ "media-viewer.previous" | translate }}
@@ -27,7 +27,7 @@
 
   <button
     class="btn btn-primary next"
-    [disabled]="currentIndex === medias.length - 1"
+    [dsBtnDisabled]="currentIndex === medias.length - 1"
     (click)="nextMedia()"
   >
     {{ "media-viewer.next" | translate }}

src/app/item-page/media-viewer/media-viewer-video/media-viewer-video.component.ts

@@ -12,6 +12,7 @@ import { Bitstream } from 'src/app/core/shared/bitstream.model';
 
 import { DSONameService } from '../../../core/breadcrumbs/dso-name.service';
 import { MediaViewerItem } from '../../../core/shared/media-viewer-item.model';
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import { CaptionInfo } from './caption-info';
 import { languageHelper } from './language-helper';
 
@@ -27,6 +28,7 @@ import { languageHelper } from './language-helper';
     NgbDropdownModule,
     TranslateModule,
     NgIf,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })

src/app/item-page/orcid-page/orcid-auth/orcid-auth.component.html

@@ -48,7 +48,7 @@
     <div class="row" *ngIf="(ownerCanDisconnectProfileFromOrcid() | async)" data-test="unlinkOwner">
       <div class="col">
         <button type="submit" class="btn btn-danger float-right" (click)="unlinkOrcid()"
-                [disabled]="(unlinkProcessing | async)">
+                [dsBtnDisabled]="(unlinkProcessing | async)">
           <span *ngIf="(unlinkProcessing | async) !== true"><i
             class="fas fa-unlink"></i> {{ 'person.page.orcid.unlink' | translate }}</span>
           <span *ngIf="(unlinkProcessing | async)"><i

src/app/item-page/orcid-page/orcid-auth/orcid-auth.component.ts

@@ -34,6 +34,7 @@ import {
 import { Item } from '../../../core/shared/item.model';
 import { getFirstCompletedRemoteData } from '../../../core/shared/operators';
 import { AlertComponent } from '../../../shared/alert/alert.component';
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
 import { createFailedRemoteDataObjectFromError$ } from '../../../shared/remote-data.utils';
 
@@ -47,6 +48,7 @@ import { createFailedRemoteDataObjectFromError$ } from '../../../shared/remote-d
     NgIf,
     NgForOf,
     AlertComponent,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })

src/app/item-page/versions/item-versions-row-element-version/item-versions-row-element-version.component.html

@@ -31,7 +31,7 @@
         <!--CREATE-->
         <ng-container *ngIf="canCreateVersion$ | async">
           <button class="btn btn-outline-primary btn-sm version-row-element-create"
-                  [disabled]="isAnyBeingEdited() || hasDraftVersion"
+                  [dsBtnDisabled]="isAnyBeingEdited() || hasDraftVersion"
                   (click)="createNewVersion(version)"
                   title="{{createVersionTitle | translate }}">
             <i class="fas fa-code-branch fa-fw"></i>
@@ -41,7 +41,7 @@
         <ng-container *ngIf="canDeleteVersion$ | async">
           <button class="btn btn-sm version-row-element-delete"
                   [ngClass]="isAnyBeingEdited() ? 'btn-outline-primary' : 'btn-outline-danger'"
-                  [disabled]="isAnyBeingEdited()"
+                  [dsBtnDisabled]="isAnyBeingEdited()"
                   (click)="deleteVersion(version, version.id === itemVersion.id)"
                   title="{{'item.version.history.table.action.deleteVersion' | translate}}">
             <i class="fas fa-trash fa-fw"></i>

src/app/item-page/versions/item-versions-row-element-version/item-versions-row-element-version.component.ts

@@ -49,6 +49,7 @@ import { VersionHistory } from '../../../core/shared/version-history.model';
 import { WorkspaceItem } from '../../../core/submission/models/workspaceitem.model';
 import { WorkflowItemDataService } from '../../../core/submission/workflowitem-data.service';
 import { WorkspaceitemDataService } from '../../../core/submission/workspaceitem-data.service';
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
 import {
   getItemEditVersionhistoryRoute,
@@ -67,6 +68,7 @@ import { ItemVersionsSummaryModalComponent } from '../item-versions-summary-moda
     TranslateModule,
     NgClass,
     NgIf,
+    BtnDisabledDirective,
   ],
   templateUrl: './item-versions-row-element-version.component.html',
   styleUrl: './item-versions-row-element-version.component.scss',

src/app/item-page/versions/item-versions.component.html

@@ -67,7 +67,7 @@
               <ng-template #notThisBeingEdited>
                 <!--EDIT-->
                 <button class="btn btn-outline-primary btn-sm version-row-element-edit"
-                        [disabled]="isAnyBeingEdited()"
+                        [dsBtnDisabled]="isAnyBeingEdited()"
                         (click)="enableVersionEditing(versionDTO.version)"
                         title="{{'item.version.history.table.action.editSummary' | translate}}">
                   <i class="fas fa-edit fa-fw"></i>

src/app/item-page/versions/item-versions.component.spec.ts

@@ -42,6 +42,7 @@ import { VersionHistory } from '../../core/shared/version-history.model';
 import { WorkflowItemDataService } from '../../core/submission/workflowitem-data.service';
 import { WorkspaceitemDataService } from '../../core/submission/workspaceitem-data.service';
 import { AlertComponent } from '../../shared/alert/alert.component';
+import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { PaginationComponent } from '../../shared/pagination/pagination.component';
 import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
@@ -158,7 +159,7 @@ describe('ItemVersionsComponent', () => {
   beforeEach(waitForAsync(() => {
 
     TestBed.configureTestingModule({
-      imports: [TranslateModule.forRoot(), RouterModule.forRoot([]), CommonModule, FormsModule, ReactiveFormsModule, BrowserModule, ItemVersionsComponent, VarDirective],
+      imports: [TranslateModule.forRoot(), RouterModule.forRoot([]), CommonModule, FormsModule, ReactiveFormsModule, BrowserModule, ItemVersionsComponent, VarDirective, BtnDisabledDirective],
       providers: [
         { provide: PaginationService, useValue: new PaginationServiceStub() },
         { provide: UntypedFormBuilder, useValue: new UntypedFormBuilder() },
@@ -234,8 +235,9 @@ describe('ItemVersionsComponent', () => {
     it('should not disable the delete button', () => {
       const deleteButtons: DebugElement[] = fixture.debugElement.queryAll(By.css('.version-row-element-delete'));
       expect(deleteButtons.length).not.toBe(0);
-      deleteButtons.forEach((btn: DebugElement) => {
+      deleteButtons.forEach((btn) => {
-        expect(btn.nativeElement.disabled).toBe(false);
+        expect(btn.nativeElement.getAttribute('aria-disabled')).toBe('false');
+        expect(btn.nativeElement.classList.contains('disabled')).toBeFalse();
       });
     });
 

src/app/item-page/versions/item-versions.component.ts

@@ -50,6 +50,7 @@ import { Version } from '../../core/shared/version.model';
 import { VersionHistory } from '../../core/shared/version-history.model';
 import { AlertComponent } from '../../shared/alert/alert.component';
 import { AlertType } from '../../shared/alert/alert-type';
+import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
 import {
   hasValue,
   hasValueOperator,
@@ -78,7 +79,7 @@ interface VersionDTO {
   templateUrl: './item-versions.component.html',
   styleUrls: ['./item-versions.component.scss'],
   standalone: true,
-  imports: [VarDirective, NgIf, AlertComponent, PaginationComponent, NgFor, RouterLink, NgClass, FormsModule, AsyncPipe, DatePipe, TranslateModule, ItemVersionsRowElementVersionComponent],
+  imports: [VarDirective, NgIf, AlertComponent, PaginationComponent, NgFor, RouterLink, NgClass, FormsModule, AsyncPipe, DatePipe, TranslateModule, ItemVersionsRowElementVersionComponent, BtnDisabledDirective],
 })
 
 /**

src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-external-dropdown/my-dspace-new-external-dropdown.component.html

@@ -1,6 +1,6 @@
   <div class="add" *ngIf="(moreThanOne$ | async) !== true">
     <button class="btn btn-lg btn-outline-primary mt-1 ml-2"
-            [attr.aria-label]="'mydspace.new-submission-external' | translate" [disabled]="(initialized$ | async) !== true"
+            [attr.aria-label]="'mydspace.new-submission-external' | translate" [dsBtnDisabled]="(initialized$ | async) !== true"
             (click)="openPage(singleEntity)" role="button"
             title="{{'mydspace.new-submission-external' | translate}}">
       <i class="fa fa-file-import" aria-hidden="true"></i>
@@ -10,7 +10,7 @@
        ngbDropdown
        *ngIf="(moreThanOne$ | async)">
     <button class="btn btn-lg btn-outline-primary mt-1 ml-2" id="dropdownImport" ngbDropdownToggle
-            type="button" [disabled]="(initialized$ | async) !== true"
+            type="button" [dsBtnDisabled]="(initialized$ | async) !== true"
             [attr.aria-label]="'mydspace.new-submission-external' | translate"
             [attr.data-test]="'import-dropdown' | dsBrowserOnly"
             title="{{'mydspace.new-submission-external' | translate}}">

src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-external-dropdown/my-dspace-new-external-dropdown.component.ts

@@ -27,6 +27,7 @@ import { FindListOptions } from '../../../core/data/find-list-options.model';
 import { PaginatedList } from '../../../core/data/paginated-list.model';
 import { RemoteData } from '../../../core/data/remote-data';
 import { ItemType } from '../../../core/shared/item-relationships/item-type.model';
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import { hasValue } from '../../../shared/empty.util';
 import { EntityDropdownComponent } from '../../../shared/entity-dropdown/entity-dropdown.component';
 import { BrowserOnlyPipe } from '../../../shared/utils/browser-only.pipe';
@@ -45,6 +46,7 @@ import { BrowserOnlyPipe } from '../../../shared/utils/browser-only.pipe';
     TranslateModule,
     BrowserOnlyPipe,
     NgIf,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })

src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-submission-dropdown/my-dspace-new-submission-dropdown.component.html

@@ -1,6 +1,6 @@
   <div class="add" *ngIf="(moreThanOne$ | async) !== true">
     <button class="btn btn-lg btn-primary mt-1 ml-2" [attr.aria-label]="'mydspace.new-submission' | translate"
-            [disabled]="(initialized$ | async) !== true" (click)="openDialog(singleEntity)" role="button">
+            [dsBtnDisabled]="(initialized$ | async) !== true" (click)="openDialog(singleEntity)" role="button">
       <i class="fa fa-plus-circle" aria-hidden="true"></i>
     </button>
   </div>
@@ -8,7 +8,7 @@
        ngbDropdown
        *ngIf="(moreThanOne$ | async)">
     <button class="btn btn-lg btn-primary mt-1 ml-2" id="dropdownSubmission" ngbDropdownToggle
-            type="button"  [disabled]="(initialized$ | async) !== true"
+            type="button"  [dsBtnDisabled]="(initialized$ | async) !== true"
             [attr.aria-label]="'mydspace.new-submission' | translate"
             [attr.data-test]="'submission-dropdown' | dsBrowserOnly"
             title="{{'mydspace.new-submission' | translate}}">

src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-submission-dropdown/my-dspace-new-submission-dropdown.component.ts

@@ -28,6 +28,7 @@ import { FindListOptions } from '../../../core/data/find-list-options.model';
 import { PaginatedList } from '../../../core/data/paginated-list.model';
 import { RemoteData } from '../../../core/data/remote-data';
 import { ItemType } from '../../../core/shared/item-relationships/item-type.model';
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import { ThemedCreateItemParentSelectorComponent } from '../../../shared/dso-selector/modal-wrappers/create-item-parent-selector/themed-create-item-parent-selector.component';
 import { hasValue } from '../../../shared/empty.util';
 import { EntityDropdownComponent } from '../../../shared/entity-dropdown/entity-dropdown.component';
@@ -47,6 +48,7 @@ import { BrowserOnlyPipe } from '../../../shared/utils/browser-only.pipe';
     TranslateModule,
     BrowserOnlyPipe,
     NgIf,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })

src/app/notifications/qa/events/quality-assurance-events.component.html

@@ -138,7 +138,7 @@
                       <div class="btn-group">
                         <button *ngIf="!eventElement.hasProject"
                                 class="btn btn-outline-primary btn-sm"
-                                [disabled]="eventElement.isRunning"
+                                [dsBtnDisabled]="eventElement.isRunning"
                                 (click)="openModalLookup(eventElement); $event.stopPropagation();"
                                 [attr.aria-label]="'quality-assurance.event.modal.project.select' | translate"
                         >
@@ -146,7 +146,7 @@
                         </button>
                         <button *ngIf="eventElement.hasProject"
                                 class="btn btn-outline-danger btn-sm"
-                                [disabled]="eventElement.isRunning"
+                                [dsBtnDisabled]="eventElement.isRunning"
                                 (click)="removeProject(eventElement)"
                                 [attr.aria-label]="'quality-assurance.event.modal.project.remove' | translate"
                         >
@@ -161,7 +161,7 @@
                               class="btn btn-outline-success btn-sm button-width"
                               ngbTooltip="{{'quality-assurance.event.action.import' | translate}}"
                               container="body"
-                              [disabled]="eventElement.isRunning"
+                              [dsBtnDisabled]="eventElement.isRunning"
                               (click)="modalChoice('ACCEPTED', eventElement, acceptModal)"
                               [attr.aria-label]="'quality-assurance.event.action.import' | translate"
                       >
@@ -171,7 +171,7 @@
                               class="btn btn-outline-success btn-sm button-width"
                               ngbTooltip="{{'quality-assurance.event.action.accept' | translate}}"
                               container="body"
-                              [disabled]="eventElement.isRunning"
+                              [dsBtnDisabled]="eventElement.isRunning"
                               (click)="executeAction('ACCEPTED', eventElement)"
                               [attr.aria-label]="'quality-assurance.event.action.accept' | translate"
                       >
@@ -180,7 +180,7 @@
                       <button class="btn btn-outline-dark btn-sm button-width"
                               ngbTooltip="{{'quality-assurance.event.action.ignore' | translate}}"
                               container="body"
-                              [disabled]="eventElement.isRunning"
+                              [dsBtnDisabled]="eventElement.isRunning"
                               (click)="openModal('DISCARDED', eventElement, ignoreModal)"
                               [attr.aria-label]="'quality-assurance.event.action.ignore' | translate"
                       >
@@ -190,7 +190,7 @@
                               *ngIf="(isAdmin$ | async)"
                               ngbTooltip="{{'quality-assurance.event.action.reject' | translate}}"
                               container="body"
-                              [disabled]="eventElement.isRunning"
+                              [dsBtnDisabled]="eventElement.isRunning"
                               (click)="openModal('REJECTED', eventElement, rejectModal)"
                               [attr.aria-label]="'quality-assurance.event.action.reject' | translate"
                       >
@@ -200,7 +200,7 @@
                               *ngIf="(isAdmin$ | async) === false"
                               ngbTooltip="{{'quality-assurance.event.action.undo' | translate }}"
                               container="body"
-                              [disabled]="eventElement.isRunning"
+                              [dsBtnDisabled]="eventElement.isRunning"
                               [attr.aria-label]="'quality-assurance.event.action.undo' | translate"
                               (click)="openModal('UNDO', eventElement, undoModal)">
                         <i class="fas fa-trash-alt"></i>
@@ -210,7 +210,7 @@
                       <button class="btn btn-outline-danger btn-sm button-width"
                               ngbTooltip="{{'quality-assurance.event.action.undo' | translate}}"
                               container="body"
-                              [disabled]="eventElement.isRunning"
+                              [dsBtnDisabled]="eventElement.isRunning"
                               [attr.aria-label]="'quality-assurance.event.action.undo' | translate"
                               (click)="openModal('UNDO', eventElement, undoModal)">
                         <i class="fas fa-trash-alt"></i>

src/app/notifications/qa/events/quality-assurance-events.component.ts

@@ -65,6 +65,7 @@ import {
 } from '../../../core/shared/operators';
 import { getItemPageRoute } from '../../../item-page/item-page-routing-paths';
 import { AlertComponent } from '../../../shared/alert/alert.component';
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import { hasValue } from '../../../shared/empty.util';
 import { ThemedLoadingComponent } from '../../../shared/loading/themed-loading.component';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
@@ -86,7 +87,7 @@ import { EPersonDataComponent } from './ePerson-data/ePerson-data.component';
   templateUrl: './quality-assurance-events.component.html',
   styleUrls: ['./quality-assurance-events.component.scss'],
   standalone: true,
-  imports: [AlertComponent, NgIf, ThemedLoadingComponent, PaginationComponent, NgFor, RouterLink, NgbTooltipModule, AsyncPipe, TranslateModule, EPersonDataComponent],
+  imports: [AlertComponent, NgIf, ThemedLoadingComponent, PaginationComponent, NgFor, RouterLink, NgbTooltipModule, AsyncPipe, TranslateModule, EPersonDataComponent, BtnDisabledDirective],
 })
 export class QualityAssuranceEventsComponent implements OnInit, OnDestroy {
   /**

src/app/notifications/qa/project-entry-import-modal/project-entry-import-modal.component.html

@@ -32,8 +32,8 @@
     <div id="project-search" class="input-group mb-3">
       <input type="text" class="form-control" (keyup.enter)="search(projectTitle)" [(ngModel)]="projectTitle" placeholder="{{labelPrefix + label + '.placeholder' |translate}}" aria-label="" aria-describedby="">
       <div class="input-group-append">
-        <button type="button" class="btn btn-outline-secondary" [disabled]="projectTitle === ''" (click)="projectTitle = ''">{{(labelPrefix + label + '.clear'|translate)}}</button>
+        <button type="button" class="btn btn-outline-secondary" [dsBtnDisabled]="projectTitle === ''" (click)="projectTitle = ''">{{(labelPrefix + label + '.clear'|translate)}}</button>
-        <button type="button" class="btn btn-primary" [disabled]="projectTitle === ''" (click)="search(projectTitle)">{{(labelPrefix + label + '.search'|translate)}}</button>
+        <button type="button" class="btn btn-primary" [dsBtnDisabled]="projectTitle === ''" (click)="search(projectTitle)">{{(labelPrefix + label + '.search'|translate)}}</button>
       </div>
     </div>
 
@@ -66,6 +66,6 @@
     <button type="button" class="btn btn-outline-secondary" (click)="close()">{{ (labelPrefix + label + '.cancel' | translate) }}</button>
   </div>
   <div>
-    <button type="button" class="btn btn-primary" [disabled]="selectedImportType === importType.None" (click)="bound()">{{ (labelPrefix + label + '.bound' | translate) }}</button>
+    <button type="button" class="btn btn-primary" [dsBtnDisabled]="selectedImportType === importType.None" (click)="bound()">{{ (labelPrefix + label + '.bound' | translate) }}</button>
   </div>
 </div>

src/app/notifications/qa/project-entry-import-modal/project-entry-import-modal.component.ts

@@ -30,6 +30,7 @@ import { DSpaceObject } from '../../../core/shared/dspace-object.model';
 import { Item } from '../../../core/shared/item.model';
 import { SearchService } from '../../../core/shared/search/search.service';
 import { AlertComponent } from '../../../shared/alert/alert.component';
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import {
   hasValue,
   isNotEmpty,
@@ -105,7 +106,7 @@ export interface QualityAssuranceEventData {
   styleUrls: ['./project-entry-import-modal.component.scss'],
   templateUrl: './project-entry-import-modal.component.html',
   standalone: true,
-  imports: [RouterLink, NgIf, FormsModule, ThemedLoadingComponent, ThemedSearchResultsComponent, AlertComponent, AsyncPipe, TranslateModule],
+  imports: [RouterLink, NgIf, FormsModule, ThemedLoadingComponent, ThemedSearchResultsComponent, AlertComponent, AsyncPipe, TranslateModule, BtnDisabledDirective],
 })
 /**
  * Component to display a modal window for linking a project to an Quality Assurance event

src/app/notifications/suggestion-actions/suggestion-actions.component.html

@@ -21,7 +21,7 @@
   </div>
   <button (click)="ignoreSuggestion()" class="btn btn-danger ml-2"><i class="fa fa-ban"></i>
     {{ ignoreSuggestionLabel() | translate}}</button>
-  <button *ngIf="!isBulk" (click)="toggleSeeEvidences()" [disabled]="!hasEvidence" class="btn btn-info ml-2">
+  <button *ngIf="!isBulk" (click)="toggleSeeEvidences()" [dsBtnDisabled]="!hasEvidence" class="btn btn-info ml-2">
     <i class="fa fa-eye"></i>
     <ng-container *ngIf="!seeEvidence"> {{ 'suggestion.seeEvidence' | translate}}</ng-container>
     <ng-container *ngIf="seeEvidence"> {{ 'suggestion.hideEvidence' | translate}}</ng-container>

src/app/notifications/suggestion-actions/suggestion-actions.component.ts

@@ -15,6 +15,7 @@ import { take } from 'rxjs/operators';
 import { Suggestion } from '../../core/notifications/suggestions/models/suggestion.model';
 import { Collection } from '../../core/shared/collection.model';
 import { ItemType } from '../../core/shared/item-relationships/item-type.model';
+import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
 import { ThemedCreateItemParentSelectorComponent } from '../../shared/dso-selector/modal-wrappers/create-item-parent-selector/themed-create-item-parent-selector.component';
 import { EntityDropdownComponent } from '../../shared/entity-dropdown/entity-dropdown.component';
 import { SuggestionApproveAndImport } from '../suggestion-list-element/suggestion-approve-and-import';
@@ -31,6 +32,7 @@ import { SuggestionApproveAndImport } from '../suggestion-list-element/suggestio
     TranslateModule,
     NgIf,
     NgbDropdownModule,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })

src/app/process-page/overview/process-overview.component.html

@@ -64,10 +64,10 @@
                 <span> {{ 'process.overview.delete.processing' | translate: {count: processBulkDeleteService.getAmountOfSelectedProcesses()} }}</span>
             </div>
             <div class="mt-4">
-                <button class="btn btn-primary mr-2" [disabled]="processBulkDeleteService.isProcessing$() |async"
+                <button class="btn btn-primary mr-2" [dsBtnDisabled]="processBulkDeleteService.isProcessing$() |async"
                         (click)="closeModal()">{{'process.detail.delete.cancel' | translate}}</button>
                 <button id="delete-confirm" class="btn btn-danger"
-                        [disabled]="processBulkDeleteService.isProcessing$() |async"
+                        [dsBtnDisabled]="processBulkDeleteService.isProcessing$() |async"
                         (click)="deleteSelected()">{{ 'process.overview.delete' | translate: {count: processBulkDeleteService.getAmountOfSelectedProcesses()}  }}
                 </button>
             </div>

src/app/process-page/overview/process-overview.component.ts

@@ -16,6 +16,7 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
 import { Subscription } from 'rxjs';
 
+import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
 import { hasValue } from '../../shared/empty.util';
 import { PaginationComponent } from '../../shared/pagination/pagination.component';
 import { VarDirective } from '../../shared/utils/var.directive';
@@ -31,7 +32,7 @@ import { ProcessOverviewTableComponent } from './table/process-overview-table.co
   selector: 'ds-process-overview',
   templateUrl: './process-overview.component.html',
   standalone: true,
-  imports: [NgIf, RouterLink, PaginationComponent, NgFor, VarDirective, AsyncPipe, DatePipe, TranslateModule, NgTemplateOutlet, ProcessOverviewTableComponent],
+  imports: [NgIf, RouterLink, PaginationComponent, NgFor, VarDirective, AsyncPipe, DatePipe, TranslateModule, NgTemplateOutlet, ProcessOverviewTableComponent, BtnDisabledDirective],
 })
 /**
  * Component displaying a list of all processes in a paginated table

src/app/profile-page/profile-claim-item-modal/profile-claim-item-modal.component.html

@@ -29,7 +29,7 @@
       <input type="checkbox" [checked]="checked" (change)="toggleCheckbox()"/>
       {{ 'dso-selector.claim.item.not-mine-label' | translate }}
     </div>
-    <button type="submit" class="btn btn-primary ml-5 mr-2" (click)="createFromScratch()" [disabled]="!checked">
+    <button type="submit" class="btn btn-primary ml-5 mr-2" (click)="createFromScratch()" [dsBtnDisabled]="!checked">
       <i class="fas fa-plus"></i>
       {{ 'dso-selector.claim.item.create-from-scratch' | translate }}
     </button>

src/app/profile-page/profile-claim-item-modal/profile-claim-item-modal.component.ts

@@ -25,6 +25,7 @@ import { Item } from '../../core/shared/item.model';
 import { getFirstCompletedRemoteData } from '../../core/shared/operators';
 import { ViewMode } from '../../core/shared/view-mode.model';
 import { getItemPageRoute } from '../../item-page/item-page-routing-paths';
+import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
 import { DSOSelectorModalWrapperComponent } from '../../shared/dso-selector/modal-wrappers/dso-selector-modal-wrapper.component';
 import { CollectionElementLinkType } from '../../shared/object-collection/collection-element-link.type';
 import { ListableObjectComponentLoaderComponent } from '../../shared/object-collection/shared/listable-object/listable-object-component-loader.component';
@@ -42,6 +43,7 @@ import { ProfileClaimService } from '../profile-claim/profile-claim.service';
     AsyncPipe,
     TranslateModule,
     NgForOf,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })

src/app/profile-page/profile-page-researcher-form/profile-page-researcher-form.component.html

@@ -13,7 +13,7 @@
     <p>{{'researcher.profile.not.associated' | translate}}</p>
   </div>
   <button *ngIf="!researcherProfile" class="btn btn-primary mr-2"
-          [disabled]="(isProcessingCreate() | async)"
+          [dsBtnDisabled]="(isProcessingCreate() | async)"
           (click)="createProfile()">
     <span *ngIf="(isProcessingCreate() | async)">
         <i class='fas fa-circle-notch fa-spin'></i> {{'researcher.profile.action.processing' | translate}}
@@ -23,10 +23,10 @@
     </span>
   </button>
   <ng-container *ngIf="researcherProfile">
-    <button class="btn btn-primary mr-2" [disabled]="!researcherProfile" (click)="viewProfile(researcherProfile)">
+    <button class="btn btn-primary mr-2" [dsBtnDisabled]="!researcherProfile" (click)="viewProfile(researcherProfile)">
       <i class="fas fa-info-circle"></i> {{'researcher.profile.view' | translate}}
     </button>
-    <button class="btn btn-danger" [disabled]="!researcherProfile" (click)="deleteProfile(researcherProfile)">
+    <button class="btn btn-danger" [dsBtnDisabled]="!researcherProfile" (click)="deleteProfile(researcherProfile)">
         <span *ngIf="(isProcessingDelete() | async)">
             <i class='fas fa-circle-notch fa-spin'></i> {{'researcher.profile.action.processing' | translate}}
         </span>

src/app/profile-page/profile-page-researcher-form/profile-page-researcher-form.component.ts

@@ -36,6 +36,7 @@ import {
   getFirstCompletedRemoteData,
   getFirstSucceededRemoteDataPayload,
 } from '../../core/shared/operators';
+import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
 import { ConfirmationModalComponent } from '../../shared/confirmation-modal/confirmation-modal.component';
 import { isNotEmpty } from '../../shared/empty.util';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
@@ -53,6 +54,7 @@ import { ProfileClaimItemModalComponent } from '../profile-claim-item-modal/prof
     TranslateModule,
     UiSwitchModule,
     VarDirective,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })

src/app/register-email-form/register-email-form.component.html

@@ -51,13 +51,13 @@
     </div>
 
     <ng-container *ngIf="(!registrationVerification  || ((googleRecaptchaService.captchaVersion() | async) !== 'v2' && (googleRecaptchaService.captchaMode() | async) === 'invisible')); else v2Invisible">
-      <button class="btn btn-primary" [disabled]="form.invalid || registrationVerification && !isRecaptchaCookieAccepted() || disableUntilChecked" (click)="register()">
+      <button class="btn btn-primary" [dsBtnDisabled]="form.invalid || registrationVerification && !isRecaptchaCookieAccepted() || disableUntilChecked" (click)="register()">
         {{ MESSAGE_PREFIX + '.submit' | translate }}
       </button>
     </ng-container>
 
     <ng-template #v2Invisible>
-      <button class="btn btn-primary" [disabled]="form.invalid" (click)="executeRecaptcha()">
+      <button class="btn btn-primary" [dsBtnDisabled]="form.invalid" (click)="executeRecaptcha()">
         {{ MESSAGE_PREFIX + '.submit' | translate }}
       </button>
     </ng-template>

src/app/register-email-form/register-email-form.component.ts

@@ -54,6 +54,7 @@ import {
 import { Registration } from '../core/shared/registration.model';
 import { AlertComponent } from '../shared/alert/alert.component';
 import { AlertType } from '../shared/alert/alert-type';
+import { BtnDisabledDirective } from '../shared/btn-disabled.directive';
 import { KlaroService } from '../shared/cookies/klaro.service';
 import { isNotEmpty } from '../shared/empty.util';
 import { GoogleRecaptchaComponent } from '../shared/google-recaptcha/google-recaptcha.component';
@@ -66,7 +67,7 @@ export const TYPE_REQUEST_REGISTER = 'register';
   selector: 'ds-base-register-email-form',
   templateUrl: './register-email-form.component.html',
   standalone: true,
-  imports: [NgIf, FormsModule, ReactiveFormsModule, AlertComponent, GoogleRecaptchaComponent, AsyncPipe, TranslateModule],
+  imports: [NgIf, FormsModule, ReactiveFormsModule, AlertComponent, GoogleRecaptchaComponent, AsyncPipe, TranslateModule, BtnDisabledDirective],
 })
 /**
  * Component responsible to render an email registration form.

src/app/register-page/create-profile/create-profile.component.html

@@ -81,7 +81,7 @@
     <div class="row">
         <div class="col-12">
             <button
-                    [disabled]="isInValidPassword || userInfoForm.invalid"
+                    [dsBtnDisabled]="isInValidPassword || userInfoForm.invalid"
                     class="btn btn-default btn-primary"
                     (click)="submitEperson()">{{'register-page.create-profile.submit' | translate}}</button>
         </div>

src/app/register-page/create-profile/create-profile.component.ts

@@ -43,6 +43,7 @@ import {
 } from '../../core/shared/operators';
 import { Registration } from '../../core/shared/registration.model';
 import { ProfilePageSecurityFormComponent } from '../../profile-page/profile-page-security-form/profile-page-security-form.component';
+import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
 import { isEmpty } from '../../shared/empty.util';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 
@@ -60,6 +61,7 @@ import { NotificationsService } from '../../shared/notifications/notifications.s
     AsyncPipe,
     ReactiveFormsModule,
     NgForOf,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })

src/app/request-copy/email-request-copy/email-request-copy.component.html

@@ -13,7 +13,7 @@
   <ng-content></ng-content>
   <div class="d-flex flex-row-reverse">
     <button (click)="submit()"
-            [disabled]="!subject || subject.length === 0"
+            [dsBtnDisabled]="!subject || subject.length === 0"
             class="btn btn-primary"
             title="{{'grant-deny-request-copy.email.send' | translate }}">
       <i class="fas fa-envelope"></i> {{'grant-deny-request-copy.email.send' | translate }}

src/app/request-copy/email-request-copy/email-request-copy.component.ts

@@ -12,6 +12,7 @@ import {
 import { FormsModule } from '@angular/forms';
 import { TranslateModule } from '@ngx-translate/core';
 
+import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
 import { RequestCopyEmail } from './request-copy-email.model';
 
 
@@ -20,7 +21,7 @@ import { RequestCopyEmail } from './request-copy-email.model';
   styleUrls: ['./email-request-copy.component.scss'],
   templateUrl: './email-request-copy.component.html',
   standalone: true,
-  imports: [FormsModule, NgClass, NgIf, TranslateModule],
+  imports: [FormsModule, NgClass, NgIf, TranslateModule, BtnDisabledDirective],
 })
 /**
  * A form component for an email to send back to the user requesting an item

src/app/shared/access-control-form-container/access-control-array-form/access-control-array-form.component.html

@@ -47,7 +47,7 @@
             <div class="input-group-append">
               <button
                 class="btn btn-outline-secondary fas fa-calendar"
-                [disabled]="ngForm.disabled"
+                [dsBtnDisabled]="ngForm.disabled"
                 (click)="d.toggle()" type="button">
               </button>
             </div>
@@ -76,7 +76,7 @@
             <div class="input-group-append">
               <button
                 type="button" class="btn btn-outline-secondary fas fa-calendar"
-                [disabled]="ngForm.disabled"
+                [dsBtnDisabled]="ngForm.disabled"
                 (click)="d1.toggle()">
               </button>
             </div>
@@ -93,7 +93,7 @@
 
           <button type="button" class="btn btn-outline-danger"
                   [attr.aria-label]="'access-control-remove' | translate"
-                  [disabled]="ngForm.disabled || form.accessControls.length === 1"
+                  [dsBtnDisabled]="ngForm.disabled || form.accessControls.length === 1"
                   (click)="removeAccessControlItem(control.id)">
             <i class="fas fa-trash"></i>
           </button>
@@ -103,7 +103,7 @@
   </ng-container>
 
   <button type="button" id="add-btn-{{type}}" class="btn btn-outline-primary mt-3"
-          [disabled]="ngForm.disabled"
+          [dsBtnDisabled]="ngForm.disabled"
           (click)="addAccessControlItem()">
     <i class="fas fa-plus"></i>
     {{'access-control-add-more' | translate}}

src/app/shared/access-control-form-container/access-control-array-form/access-control-array-form.component.ts

@@ -16,6 +16,7 @@ import { NgbDatepickerModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
 
 import { AccessesConditionOption } from '../../../core/config/models/config-accesses-conditions-options.model';
+import { BtnDisabledDirective } from '../../btn-disabled.directive';
 import { dateToISOFormat } from '../../date.util';
 import { ToDatePipe } from './to-date.pipe';
 
@@ -25,7 +26,7 @@ import { ToDatePipe } from './to-date.pipe';
   styleUrls: ['./access-control-array-form.component.scss'],
   exportAs: 'accessControlArrayForm',
   standalone: true,
-  imports: [FormsModule, NgIf, NgFor, NgbDatepickerModule, TranslateModule, ToDatePipe],
+  imports: [FormsModule, NgIf, NgFor, NgbDatepickerModule, TranslateModule, ToDatePipe, BtnDisabledDirective],
 })
 export class AccessControlArrayFormComponent implements OnInit {
   @Input() dropdownOptions: AccessesConditionOption[] = [];

src/app/shared/access-control-form-container/access-control-form-container.component.html

@@ -103,7 +103,7 @@
                   <button
                     *ngIf="itemRD"
                     [attr.aria-label]="'access-control-bitstreams-select' | translate"
-                    [disabled]="!state.bitstream.toggleStatus || state.bitstream.changesLimit !== 'selected'"
+                    [dsBtnDisabled]="!state.bitstream.toggleStatus || state.bitstream.changesLimit !== 'selected'"
                     (click)="openSelectBitstreamsModal(itemRD.payload)"
                     class="btn btn-outline-dark border-0" type="button">
                     <i class="fa fa-search"></i>
@@ -161,7 +161,7 @@
           {{ 'access-control-cancel' | translate }}
         </button>
         <button class="btn btn-primary"
-                [disabled]="!state.item.toggleStatus && !state.bitstream.toggleStatus"
+                [dsBtnDisabled]="!state.item.toggleStatus && !state.bitstream.toggleStatus"
                 (click)="submit()" type="submit">
           {{ 'access-control-execute' | translate }}
         </button>

src/app/shared/access-control-form-container/access-control-form-container.component.ts

@@ -31,6 +31,7 @@ import { Item } from '../../core/shared/item.model';
 import { getFirstCompletedRemoteData } from '../../core/shared/operators';
 import { AlertComponent } from '../alert/alert.component';
 import { AlertType } from '../alert/alert-type';
+import { BtnDisabledDirective } from '../btn-disabled.directive';
 import { SelectableListService } from '../object-list/selectable-list/selectable-list.service';
 import { AccessControlArrayFormComponent } from './access-control-array-form/access-control-array-form.component';
 import { createAccessControlInitialFormState } from './access-control-form-container-intial-state';
@@ -46,7 +47,7 @@ import {
   styleUrls: ['./access-control-form-container.component.scss'],
   exportAs: 'dsAccessControlForm',
   standalone: true,
-  imports: [NgIf, AlertComponent, UiSwitchModule, FormsModule, AccessControlArrayFormComponent, AsyncPipe, TranslateModule],
+  imports: [NgIf, AlertComponent, UiSwitchModule, FormsModule, AccessControlArrayFormComponent, AsyncPipe, TranslateModule, BtnDisabledDirective],
 })
 export class AccessControlFormContainerComponent<T extends DSpaceObject> implements OnDestroy {
 

src/app/shared/btn-disabled.directive.ts

@@ -0,0 +1,63 @@
+import {
+  Directive,
+  HostBinding,
+  HostListener,
+  Input,
+} from '@angular/core';
+
+@Directive({
+  selector: '[dsBtnDisabled]',
+  standalone: true,
+})
+
+/**
+ * This directive can be added to a html element to disable it (make it non-interactive).
+ * It acts as a replacement for HTML's disabled attribute.
+ *
+ * This directive should always be used instead of the HTML disabled attribute as it is more accessible.
+ */
+export class BtnDisabledDirective {
+
+    @Input() set dsBtnDisabled(value: boolean) {
+    this.isDisabled = !!value;
+  }
+
+    /**
+     * Binds the aria-disabled attribute to the directive's isDisabled property.
+     * This is used to make the element accessible to screen readers. If the element is disabled, the screen reader will announce it as such.
+     */
+    @HostBinding('attr.aria-disabled') isDisabled = false;
+
+    /**
+     * Binds the class attribute to the directive's isDisabled property.
+     * This is used to style the element when it is disabled (make it look disabled).
+     */
+    @HostBinding('class.disabled') get disabledClass() { return this.isDisabled; }
+
+    /**
+     * Prevents the default action and stops the event from propagating when the element is disabled.
+     * This is used to prevent the element from being interacted with when it is disabled (via mouse click).
+     * @param event The click event.
+     */
+    @HostListener('click', ['$event'])
+    handleClick(event: Event) {
+      if (this.isDisabled) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      }
+    }
+
+    /**
+     * Prevents the default action and stops the event from propagating when the element is disabled.
+     * This is used to prevent the element from being interacted with when it is disabled (via keystrokes).
+     * @param event The keydown event.
+     */
+  @HostListener('keydown', ['$event'])
+    handleKeydown(event: KeyboardEvent) {
+      if (this.isDisabled && (event.key === 'Enter' || event.key === 'Space')) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      }
+    }
+}
+

src/app/shared/disabled-directive.spec.ts

@@ -0,0 +1,105 @@
+import {
+  Component,
+  DebugElement,
+} from '@angular/core';
+import {
+  ComponentFixture,
+  TestBed,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+import { BtnDisabledDirective } from './btn-disabled.directive';
+
+@Component({
+  template: `
+    <button [dsBtnDisabled]="isDisabled">Test Button</button>
+  `,
+})
+class TestComponent {
+  isDisabled = false;
+}
+
+describe('DisabledDirective', () => {
+  let component: TestComponent;
+  let fixture: ComponentFixture<TestComponent>;
+  let button: DebugElement;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [BtnDisabledDirective],
+      declarations: [TestComponent],
+    });
+    fixture = TestBed.createComponent(TestComponent);
+    component = fixture.componentInstance;
+    button = fixture.debugElement.query(By.css('button'));
+    fixture.detectChanges();
+  });
+
+  it('should bind aria-disabled to false initially', () => {
+    expect(button.nativeElement.getAttribute('aria-disabled')).toBe('false');
+    expect(button.nativeElement.classList.contains('disabled')).toBeFalse();
+  });
+
+  it('should bind aria-disabled to true and add disabled class when isDisabled is true', () => {
+    component.isDisabled = true;
+    fixture.detectChanges();
+
+    expect(button.nativeElement.getAttribute('aria-disabled')).toBe('true');
+    expect(button.nativeElement.classList.contains('disabled')).toBeTrue();
+  });
+
+  it('should bind aria-disabled to false and not have disabled class when isDisabled is false', () => {
+    component.isDisabled = false;
+    fixture.detectChanges();
+
+    expect(button.nativeElement.getAttribute('aria-disabled')).toBe('false');
+    expect(button.nativeElement.classList.contains('disabled')).toBeFalse();
+  });
+
+  it('should prevent click events when disabled', () => {
+    component.isDisabled = true;
+    fixture.detectChanges();
+
+    let clickHandled = false;
+    button.nativeElement.addEventListener('click', () => clickHandled = true);
+
+    button.nativeElement.click();
+
+    expect(clickHandled).toBeFalse();
+  });
+
+  it('should prevent Enter or Space keydown events when disabled', () => {
+    component.isDisabled = true;
+    fixture.detectChanges();
+
+    let keydownHandled = false;
+    button.nativeElement.addEventListener('keydown', () => keydownHandled = true);
+
+    const enterEvent = new KeyboardEvent('keydown', { key: 'Enter' });
+    const spaceEvent = new KeyboardEvent('keydown', { key: 'Space' });
+
+    button.nativeElement.dispatchEvent(enterEvent);
+    button.nativeElement.dispatchEvent(spaceEvent);
+
+    expect(keydownHandled).toBeFalse();
+  });
+
+  it('should allow click and keydown events when not disabled', () => {
+    let clickHandled = false;
+    let keydownHandled = false;
+
+    button.nativeElement.addEventListener('click', () => clickHandled = true);
+    button.nativeElement.addEventListener('keydown', () => keydownHandled = true);
+
+    button.nativeElement.click();
+
+    const enterEvent = new KeyboardEvent('keydown', { key: 'Enter' });
+    const spaceEvent = new KeyboardEvent('keydown', { key: 'Space' });
+
+    button.nativeElement.dispatchEvent(enterEvent);
+    button.nativeElement.dispatchEvent(spaceEvent);
+
+    expect(clickHandled).toBeTrue();
+    expect(keydownHandled).toBeTrue();
+  });
+});

src/app/shared/ds-select/ds-select.component.html

@@ -13,7 +13,7 @@
             class="btn btn-outline-primary selection"
             (blur)="close.emit($event)"
             (click)="close.emit($event)"
-            [disabled]="disabled"
+            [dsBtnDisabled]="disabled"
             ngbDropdownToggle>
       <ng-content select=".selection"></ng-content>
     </button>

src/app/shared/ds-select/ds-select.component.ts

@@ -8,6 +8,8 @@ import {
 import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
 
+import { BtnDisabledDirective } from '../btn-disabled.directive';
+
 /**
  * Component which represent a DSpace dropdown selector.
  */
@@ -16,7 +18,7 @@ import { TranslateModule } from '@ngx-translate/core';
   templateUrl: './ds-select.component.html',
   styleUrls: ['./ds-select.component.scss'],
   standalone: true,
-  imports: [NgbDropdownModule, NgIf, TranslateModule],
+  imports: [NgbDropdownModule, NgIf, TranslateModule, BtnDisabledDirective],
 })
 export class DsSelectComponent {