117544: PR feedback

- added typedocs
- changed directive to only be present for buttons
- various other small fixes

Author: Jens Vannerum

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

@@ -6,6 +6,53 @@
     <textarea class="form-control" rows="5" *ngIf="mdValue.editing && !mdRepresentation" [(ngModel)]="mdValue.newValue.value"
               [attr.aria-label]="(dsoType + '.edit.metadata.edit.value') | translate"
               [dsDebounce]="300" (onDebounce)="confirm.emit(false)"></textarea>
+    <ds-dynamic-scrollable-dropdown *ngIf="mdValue.editing && (isScrollableVocabulary() | async)"
+                                    [bindId]="mdField"
+                                    [group]="group"
+                                    [model]="getModel()"
+                                    (change)="onChangeAuthorityField($event)">
+    </ds-dynamic-scrollable-dropdown>
+    <ds-dynamic-onebox *ngIf="mdValue.editing && ((isHierarchicalVocabulary() | async) || (isSuggesterVocabulary() | async))"
+                      [group]="group"
+                      [model]="getModel()"
+                      (change)="onChangeAuthorityField($event)">
+    </ds-dynamic-onebox>
+    <div *ngIf="!isVirtual && !mdValue.editing && mdValue.newValue.authority && mdValue.newValue.confidence !== ConfidenceTypeEnum.CF_UNSET && mdValue.newValue.confidence !== ConfidenceTypeEnum.CF_NOVALUE">
+      <span class="badge badge-light border" >
+        <i dsAuthorityConfidenceState
+           class="fas fa-fw p-0"
+           aria-hidden="true"
+           [authorityValue]="mdValue.newValue"
+           [iconMode]="true"
+        ></i>
+        {{ dsoType + '.edit.metadata.authority.label' | translate }} {{ mdValue.newValue.authority }}
+      </span>
+    </div>
+    <div class="mt-2" *ngIf=" mdValue.editing && (isAuthorityControlled() | async) && (isSuggesterVocabulary() | async)">
+      <div class="btn-group w-75">
+        <i dsAuthorityConfidenceState
+          class="fas fa-fw p-0 mr-1 mt-auto mb-auto"
+          aria-hidden="true"
+          [authorityValue]="mdValue.newValue.confidence"
+          [iconMode]="true"
+      ></i>
+        <input class="form-control form-outline" data-test="authority-input" [(ngModel)]="mdValue.newValue.authority" [disabled]="!editingAuthority"
+              [attr.aria-label]="(dsoType + '.edit.metadata.edit.authority.key') | translate"
+              (change)="onChangeAuthorityKey()" />
+        <button class="btn btn-outline-secondary btn-sm ng-star-inserted" id="metadata-confirm-btn" *ngIf="!editingAuthority"
+                [title]="dsoType + '.edit.metadata.edit.buttons.open-authority-edition' | translate"
+                ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.open-authority-edition' | translate }}"
+                (click)="onChangeEditingAuthorityStatus(true)">
+          <i class="fas fa-lock fa-fw"></i>
+        </button>
+        <button class="btn btn-outline-success btn-sm ng-star-inserted" id="metadata-confirm-btn" *ngIf="editingAuthority"
+                [title]="dsoType + '.edit.metadata.edit.buttons.close-authority-edition' | translate"
+                ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.close-authority-edition' | translate }}"
+                (click)="onChangeEditingAuthorityStatus(false)">
+          <i class="fas fa-lock-open fa-fw"></i>
+        </button>
+      </div>
+    </div>
     <div class="d-flex" *ngIf="mdRepresentation">
       <a class="mr-2" target="_blank" [routerLink]="mdRepresentationItemRoute$ | async">{{ mdRepresentationName$ | async }}</a>
       <ds-themed-type-badge [object]="mdRepresentation"></ds-themed-type-badge>

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

@@ -18,7 +18,7 @@ <h1>{{headerMessage | translate: {id: item.handle} }}</h1>
 
                             <div class="m-2" (click)="setSelected(typeDto.relationshipType, !selected)">
                                 <label>
-                                    <input type="checkbox" [checked]="selected" [dsDisabled]="isDeleting$ | async">
+                                    <input type="checkbox" [checked]="selected" [disabled]="isDeleting$ | async">
                                 </label>
                             </div>
 

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

@@ -13,7 +13,7 @@
           </label>
           <select
             id="accesscontroloption-{{control.id}}"
-            [dsDisabled]="ngForm.disabled"
+            [disabled]="ngForm.disabled"
             [(ngModel)]="control.itemName"
             (ngModelChange)="accessControlChanged(control, $event)"
             name="itemName-{{control.id}}"

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

@@ -31,7 +31,7 @@ <h2 class="h3 mb-0 mr-4">
                 <div class="form-check">
                   <input class="form-check-input" type="radio"
                          name="itemMode" id="itemReplace" value="replace"
-                         [dsDisabled]="!state.item.toggleStatus"
+                         [disabled]="!state.item.toggleStatus"
                          [(ngModel)]="state.item.accessMode">
                   <label class="form-check-label" for="itemReplace">
                     {{'access-control-replace-all' | translate}}
@@ -40,7 +40,7 @@ <h2 class="h3 mb-0 mr-4">
                 <div class="form-check">
                   <input class="form-check-input" type="radio"
                          name="itemMode" id="itemAdd" value="add"
-                         [dsDisabled]="!state.item.toggleStatus"
+                         [disabled]="!state.item.toggleStatus"
                          [(ngModel)]="state.item.accessMode">
                   <label class="form-check-label" for="itemAdd">
                     {{'access-control-add-to-existing' | translate}}
@@ -85,7 +85,7 @@ <h2 class="h3 mb-0 mr-4">
               <div class="form-check">
                 <input class="form-check-input" type="radio"
                        name="changesLimit" id="processAll" value="all"
-                       [dsDisabled]="!state.bitstream.toggleStatus"
+                       [disabled]="!state.bitstream.toggleStatus"
                        [(ngModel)]="state.bitstream.changesLimit">
                 <label class="form-check-label" for="processAll">
                   {{'access-control-process-all-bitstreams' | translate}}
@@ -94,7 +94,7 @@ <h2 class="h3 mb-0 mr-4">
               <div class="form-check">
                 <input class="form-check-input mt-2" type="radio"
                        name="changesLimit" id="processSelected" value="selected"
-                       [dsDisabled]="!state.bitstream.toggleStatus"
+                       [disabled]="!state.bitstream.toggleStatus"
                        [(ngModel)]="state.bitstream.changesLimit">
                 <label class="form-check-label" for="processSelected">
                   {{ state.bitstream.selectedBitstreams.length }}
@@ -123,7 +123,7 @@ <h2 class="h3 mb-0 mr-4">
               <div class="form-check">
                 <input class="form-check-input" type="radio"
                        name="bitstreamMode" id="bitstreamReplace" value="replace"
-                       [dsDisabled]="!state.bitstream.toggleStatus"
+                       [disabled]="!state.bitstream.toggleStatus"
                        [(ngModel)]="state.bitstream.accessMode">
                 <label class="form-check-label" for="bitstreamReplace">
                   {{'access-control-replace-all' | translate}}
@@ -132,7 +132,7 @@ <h2 class="h3 mb-0 mr-4">
               <div class="form-check">
                 <input class="form-check-input" type="radio"
                        name="bitstreamMode" id="bitstreamAdd" value="add"
-                       [dsDisabled]="!state.bitstream.toggleStatus"
+                       [disabled]="!state.bitstream.toggleStatus"
                        [(ngModel)]="state.bitstream.accessMode">
                 <label class="form-check-label" for="bitstreamAdd">
                   {{'access-control-add-to-existing' | translate}}

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

@@ -40,6 +40,14 @@ describe('DisabledDirective', () => {
         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();

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

@@ -3,15 +3,36 @@ import { Directive, Input, HostBinding, HostListener } from '@angular/core';
 @Directive({
     selector: '[dsDisabled]'
 })
+
+/**
+ * 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 DisabledDirective {
 
     @Input() set dsDisabled(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) {
@@ -20,7 +41,12 @@ export class DisabledDirective {
         }
     }
 
-    @HostListener('keydown', ['$event'])
+    /**
+     * 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();

src/app/shared/disabled-directive.ts

@@ -31,7 +31,7 @@
     <div *ngIf="model.languageCodes && model.languageCodes.length > 0" class="col-xs-2" >
       <select
         #language="ngModel"
-        [dsDisabled]="model.readOnly"
+        [disabled]="model.readOnly"
         [(ngModel)]="model.language"
         class="form-control"
         (blur)="onBlur($event)"

src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html

@@ -6,7 +6,7 @@
     <ds-number-picker
       tabindex="0"
       [id]="model.id + '_year'"
-      [dsDisabled]="model.disabled"
+      [disabled]="model.disabled"
       [min]="minYear"
       [max]="maxYear"
       [name]="'year'"
@@ -30,7 +30,7 @@
       [(ngModel)]="initialMonth"
       [value]="month"
       [placeholder]="monthPlaceholder"
-      [dsDisabled]="!year || model.disabled"
+      [disabled]="!year || model.disabled"
       (blur)="onBlur($event)"
       (change)="onChange($event)"
       (focus)="onFocus($event)"
@@ -46,7 +46,7 @@
       [(ngModel)]="initialDay"
       [value]="day"
       [placeholder]="dayPlaceholder"
-      [dsDisabled]="!month || model.disabled"
+      [disabled]="!month || model.disabled"
       (blur)="onBlur($event)"
       (change)="onChange($event)"
       (focus)="onFocus($event)"

src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.html

@@ -6,7 +6,7 @@
                  [id]="id"
                  [name]="model.name"
                  [value]="modelValuesString"
-                 [dsDisabled]="model.disabled"
+                 [disabled]="model.disabled"
                  [type]="model.inputType"
                  [placeholder]="model.placeholder | translate"
                  [readonly]="model.readOnly">