117544: First implementation of an aria friendly disabled state

Author: Jens Vannerum

src/app/shared/disabled-directive.ts

@@ -0,0 +1,31 @@
+import { Directive, Input, HostBinding, HostListener } from '@angular/core';
+
+@Directive({
+    selector: '[dsDisabled]'
+})
+export class DisabledDirective {
+
+    @Input() set dsDisabled(value: boolean) {
+        this.isDisabled = value;
+    }
+
+    @HostBinding('attr.aria-disabled') isDisabled = false;
+    @HostBinding('class.disabled') get disabledClass() { return this.isDisabled; }
+
+    @HostListener('click', ['$event'])
+    handleClick(event: Event) {
+        if (this.isDisabled) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+    }
+
+    @HostListener('keydown', ['$event'])
+    handleKeydown(event: KeyboardEvent) {
+        if (this.isDisabled && (event.key === 'Enter' || event.key === 'Space')) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+    }
+}
+

src/app/shared/shared.module.ts

@@ -284,6 +284,7 @@ import {
 } from '../item-page/simple/field-components/specific-field/title/themed-item-page-field.component';
 import { BitstreamListItemComponent } from './object-list/bitstream-list-item/bitstream-list-item.component';
 import { NgxPaginationModule } from 'ngx-pagination';
+import {DisabledDirective} from './disabled-directive';
 
 const MODULES = [
   CommonModule,
@@ -491,6 +492,7 @@ const DIRECTIVES = [
   MetadataFieldValidator,
   HoverClassDirective,
   ContextHelpDirective,
+  DisabledDirective,
 ];
 
 @NgModule({

src/styles/_global-styles.scss

@@ -267,3 +267,14 @@ ul.dso-edit-menu-dropdown > li .nav-item.nav-link {
 .table td {
   vertical-align: middle;
 }
+
+// An element that is disabled should not have focus styles to avoid confusion
+// It however is still focusable for screen readers and keyboard navigation
+.disabled {
+    pointer-events: none;
+}
+
+.disabled:focus {
+    outline: none;
+    box-shadow: none;
+}