Merge pull request #238 from biig-io/feature/accessibility-modal

marco10024 · web-flow · commit f7bb678f22ec · 2019-11-28T16:02:02.000+01:00
Add a11y for modal composant. Add documentation about it
diff --git a/src/app/demo/autostart/autostart.component.html b/src/app/demo/autostart/autostart.component.html
@@ -23,7 +23,8 @@ <h1 class="title">Autostarted modal</h1>
 <!-- Classic modal -->
 <ngx-smart-modal #classicModal
                  [identifier]="'classicModal'"
-                 [autostart]="true">
+                 [autostart]="true"
+                 ariaLabel="Autostarted modal">
   <h1>Hey, I'm an autostarted modal!</h1>
   <img class="modal-image"
        src="https://placeimg.com/627/200/tech"
diff --git a/src/app/demo/bootstrap/bootstrap.component.html b/src/app/demo/bootstrap/bootstrap.component.html
@@ -15,8 +15,11 @@ <h1 class="display-1">Boostrap Modal</h1>
   </div>
 </div>
 
-<ngx-smart-modal #myBootstrapModal identifier="myBootstrapModal" [closable]="false"
-                 customClass="modal-content no-padding">
+<ngx-smart-modal #myBootstrapModal
+                 identifier="myBootstrapModal"
+                 customClass="modal-content no-padding"
+                 ariaLabel="Boostrap modal"
+                 [closable]="false">
   <div class="modal-header">
     <h5 class="modal-title">Modal title</h5>
     <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="myBootstrapModal.close()">
diff --git a/src/app/demo/feature/feature.component.html b/src/app/demo/feature/feature.component.html
@@ -22,7 +22,8 @@ <h1 class="title">ngx-smart-modal with feature module</h1>
 
 <!-- Classic modal -->
 <ngx-smart-modal #classicModal
-                 [identifier]="'classicModal'">
+                 [identifier]="'classicModal'"
+                 ariaLabel="Simple modal">
     <h1>Hey, I'm a simple modal!</h1>
     <img class="modal-image"
          src="https://placeimg.com/627/200/tech"
diff --git a/src/app/demo/foundation/foundation.component.html b/src/app/demo/foundation/foundation.component.html
@@ -15,7 +15,11 @@ <h1>Foundation Modal</h1>
   </div>
 </div>
 
-<ngx-smart-modal #myFoundationModal identifier="myFoundationModal" [closable]="false" customClass="reveal">
+<ngx-smart-modal #myFoundationModal
+                 identifier="myFoundationModal"
+                 customClass="reveal"
+                 ariaLabel="Foundation modal"
+                 [closable]="false">
   <h5>Modal title</h5>
   <img src="https://placeimg.com/1000/400/tech" alt="Responsive image">
   <p><code>NgxSmartModal</code> fits with any CSS framework. <strong>A N Y!</strong></p>
diff --git a/src/app/demo/main/main.component.html b/src/app/demo/main/main.component.html
@@ -97,7 +97,8 @@ <h3 class="title">Examples with CSS frameworks</h3>
 
 <!-- Classic modal -->
 <ngx-smart-modal #classicModal
-                 identifier="classicModal">
+                 identifier="classicModal"
+                 ariaLabel="Classic modal">
     <h1>Hey, I'm a simple modal!</h1>
     <img class="modal-image"
          src="https://placeimg.com/627/200/tech"
@@ -109,7 +110,8 @@ <h1>Hey, I'm a simple modal!</h1>
 
 <!-- Modal inception -->
 <ngx-smart-modal #modalInception
-                 identifier="modalInception">
+                 identifier="modalInception"
+                 arialLabel="Inception modal">
     <h1>Howdy how, I'm a modal that opens another one!</h1>
     <p>{{ sampleText[1] }}</p>
 
@@ -124,7 +126,8 @@ <h1>Howdy how, I'm a modal that opens another one!</h1>
 <!-- Data in modal -->
 <ngx-smart-modal #modalData
                  identifier="modalData"
-                 customClass="nsm-dialog-animation-ltr">
+                 customClass="nsm-dialog-animation-ltr"
+                 ariaLabel="Data modal">
     <h1>Hey, I'm a modal with some data!</h1>
     <p>
         <strong>Code below comes from
@@ -145,6 +148,7 @@ <h1>Hey, I'm a modal with some data!</h1>
 <ngx-smart-modal #modalEvents
                  identifier="modalEvents"
                  customClass="nsm-dialog-animation-ttb nsm-centered"
+                 ariaLabel="Events modal"
                  (onOpen)="log('Modal opened!')"
                  (onClose)="log('Modal closed!')"
                  (onOpenFinished)="log('Modal open finished!')"
@@ -163,6 +167,7 @@ <h2>And with customClass 'nsm-dialog-animation-ttb nsm-centered'</h2>
 <ngx-smart-modal #videoModal
                  identifier="videoModal"
                  customClass="nsm-dialog-animation-btt medium-modal"
+                 ariaLabel="Video modal"
                  [closable]="false"
                  [dismissable]="false"
                  [escapable]="false">
@@ -187,7 +192,8 @@ <h1>Hey, I Rickrolled You!</h1>
 
 <!-- Remote modal -->
 <ngx-smart-modal #remoteModal
-                 identifier="remoteModal">
+                 identifier="remoteModal"
+                 ariaLabel="Remote modal">
     <h1>Yo, I'm a remotely opened modal!</h1>
     <img class="modal-image"
          src="https://placeimg.com/627/200/tech"
@@ -208,6 +214,7 @@ <h1>Yo, I'm a remotely opened modal!</h1>
 <ngx-smart-modal #sampleModal
                  identifier="sampleModal"
                  customClass="large-modal"
+                 ariaLabel="Sample modal"
                  [backdrop]="false"
                  [hideDelay]="0">
     <h1>Hello! I'm a modal with a custom class, without backdrop, without animation effect and without delay!</h1>
@@ -220,7 +227,8 @@ <h1>Hello! I'm a modal with a custom class, without backdrop, without animation
 
 <!-- Big content modal -->
 <ngx-smart-modal #longTextModal
-                 identifier="longTextModal">
+                 identifier="longTextModal"
+                 ariaLabel="Big content modal">
     <h1>You wanna see my big content?</h1>
     <img class="modal-image"
          src="https://placeimg.com/627/200/tech"
@@ -293,7 +301,8 @@ <h1>You wanna see my big content?</h1>
 <!-- Undismissable modal -->
 <ngx-smart-modal #undismissable
                  identifier="undismissable"
-                 [dismissable]="false">
+                 aria-label="Undismissable modal">
+                 [dismissable]="false"
     <h1>Hey, I'm a not dismissable modal!</h1>
     <p>Clicking on my backdrop
         <strong>won't</strong> close me.</p>
@@ -308,6 +317,7 @@ <h1>Hey, I'm a not dismissable modal!</h1>
 <!-- Inescapable modal -->
 <ngx-smart-modal #inescapable
                  identifier="inescapable"
+                 ariaLabel="Inescapable modal"
                  [escapable]="false">
     <h1>Hey, I'm an unescapable modal!</h1>
     <p>Pressing the escape key
@@ -323,7 +333,8 @@ <h1>Hey, I'm an unescapable modal!</h1>
 <!-- Custom target -->
 <ngx-smart-modal #customTarget
                  identifier="customTarget"
-                 target="button#targetElement">
+                 target="button#targetElement"
+                 ariaLabel="Custom target modal">
     <h1>Hey, I am a modal placed relatively to an element!</h1>
     <p>How to use : </p>
     <code>target="myElementSelector"</code>
diff --git a/src/app/demo/materialize/materialize.component.html b/src/app/demo/materialize/materialize.component.html
@@ -15,7 +15,11 @@ <h1 class="display-1">Materialize Modal</h1>
   </div>
 </div>
 
-<ngx-smart-modal #myMtrlzModal identifier="myMtrlzModal" [closable]="false" customClass="modal no-padding">
+<ngx-smart-modal #myMtrlzModal
+                 identifier="myMtrlzModal"
+                 customClass="modal no-padding"
+                 ariaLabel="Materialize modal"
+                 [closable]="false">
   <div class="modal-content">
     <div class="row">
       <div class="card z-depth-0" style="margin: 0;">
diff --git a/src/app/doc/parts/options/options.component.ts b/src/app/doc/parts/options/options.component.ts
@@ -25,7 +25,7 @@ export class OptionsComponent implements OnInit {
       name: 'escapable',
       type: 'boolean',
       defaultValue: 'true',
-      description: 'Enable / disable the modal for listening to the escape keypress event (if pressed and this option is set to true, it will close the current opened modal or the latest opened if you have several modals opened at the same time)'
+      description: 'Enable / disable the modal for listening to the escape keypress event (if pressed and this option is set to true, it will close the current opened modal or the latest opened if you have several modals opened at the same time).  ⚠️ NOT RECOMMANDED for accessibility reasons.'
     },
     {
       name: 'dismissable',
@@ -75,6 +75,24 @@ export class OptionsComponent implements OnInit {
       defaultValue: 'undefined',
       description: 'Displays the modal relatively to the targeted element. ⚠️ Only for NgxSmartModal >= 7.0.0!'
     },
+    {
+      name: 'ariaLabel',
+      type: 'string',
+      defaultValue: 'undefined',
+      description: 'Define a accessible title for your modal.'
+    },
+    {
+      name: 'ariaLabelledBy',
+      type: 'string',
+      defaultValue: 'undefined',
+      description: 'Define a accessible title for your modal. Enter the id of your title content.'
+    },
+    {
+      name: 'ariaDescribedBy',
+      type: 'string',
+      defaultValue: 'undefined',
+      description: 'Define a accessible description for your modal. Enter the id of your description content.'
+    }
   ];
   // tslint:enable:max-line-length
 
diff --git a/src/ngx-smart-modal/src/components/ngx-smart-modal.component.ts b/src/ngx-smart-modal/src/components/ngx-smart-modal.component.ts
@@ -26,7 +26,11 @@ import { NgxSmartModalConfig } from '../config/ngx-smart-modal.config';
          [ngClass]="{'transparent':!backdrop, 'overlay':true, 'nsm-overlay-open':openedClass}"
          (mousedown)="dismiss($event)" #nsmOverlay>
       <div [style.z-index]="visible ? layerPosition : -1"
-           [ngClass]="['nsm-dialog', customClass, openedClass ? 'nsm-dialog-open': 'nsm-dialog-close']" #nsmDialog>
+           [ngClass]="['nsm-dialog', customClass, openedClass ? 'nsm-dialog-open': 'nsm-dialog-close']" #nsmDialog
+           [attr.aria-hidden]="openedClass ? false : true"
+           [attr.aria-label]="ariaLabel"
+           [attr.aria-labelledby]="ariaLabelledBy"
+           [attr.aria-describedby]="ariaDescribedBy">
         <div class="nsm-content" #nsmContent>
           <div class="nsm-body">
             <ng-content></ng-content>
@@ -61,6 +65,9 @@ export class NgxSmartModalComponent implements OnInit, OnDestroy {
   @Input() public hideDelay: number = 500;
   @Input() public autostart: boolean = false;
   @Input() public target: string = '';
+  @Input() public ariaLabel: string | null = null;
+  @Input() public ariaLabelledBy: string | null = null;
+  @Input() public ariaDescribedBy: string | null = null;
 
   @Output() public visibleChange: EventEmitter<boolean> = new EventEmitter<boolean>();
   @Output() public onClose: EventEmitter<any> = new EventEmitter();
@@ -84,7 +91,7 @@ export class NgxSmartModalComponent implements OnInit, OnDestroy {
   private _data: any;
 
   @ViewChildren('nsmContent') private nsmContent: QueryList<ElementRef>;
-  @ViewChildren('nsmDialog') private nsmDialog: QueryList<ElementRef>;
+  @ViewChildren('nsmDialog') public nsmDialog: QueryList<ElementRef>;
   @ViewChildren('nsmOverlay') private nsmOverlay: QueryList<ElementRef>;
 
   constructor(
diff --git a/src/ngx-smart-modal/src/config/ngx-smart-modal.config.ts b/src/ngx-smart-modal/src/config/ngx-smart-modal.config.ts
@@ -13,4 +13,7 @@ export interface INgxSmartModalOptions {
     hideDelay?: number;
     autostart?: boolean;
     target?: string;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
 }
diff --git a/src/ngx-smart-modal/src/ngx-smart-modal.scss b/src/ngx-smart-modal/src/ngx-smart-modal.scss
@@ -67,6 +67,7 @@ body.dialog-open {
   max-width: 520px;
   margin: 0 auto;
   pointer-events: none;
+  outline: none;
 
   // When dialog is closing
   &.nsm-dialog-close {
diff --git a/src/ngx-smart-modal/src/services/ngx-smart-modal.service.ts b/src/ngx-smart-modal/src/services/ngx-smart-modal.service.ts
@@ -21,6 +21,8 @@ export type Content<T> = string | TemplateRef<T> | Type<T>;
 
 @Injectable()
 export class NgxSmartModalService {
+  private lastElementFocused: any;
+
   constructor(
     private _componentFactoryResolver: ComponentFactoryResolver,
     private _appRef: ApplicationRef,
@@ -236,6 +238,9 @@ export class NgxSmartModalService {
       if (typeof options.hideDelay === 'number') { componentRef.instance.hideDelay = options.hideDelay; }
       if (typeof options.autostart === 'boolean') { componentRef.instance.autostart = options.autostart; }
       if (typeof options.target === 'string') { componentRef.instance.target = options.target; }
+      if (typeof options.ariaLabel === 'string') { componentRef.instance.ariaLabel = options.ariaLabel; }
+      if (typeof options.ariaLabelledBy === 'string') { componentRef.instance.ariaLabelledBy = options.ariaLabelledBy; }
+      if (typeof options.ariaDescribedBy === 'string') { componentRef.instance.ariaDescribedBy = options.ariaDescribedBy; }
 
       this._appRef.attachView(componentRef.hostView);
 
@@ -294,6 +299,16 @@ export class NgxSmartModalService {
       return false;
     }
 
+    this.lastElementFocused = document.activeElement;
+
+    if (modal.escapable) {
+      window.addEventListener('keyup', this._escapeKeyboardEvent);
+    }
+
+    if (modal.backdrop) {
+      window.addEventListener('keydown', this._trapFocusModal);
+    }
+
     if (top) {
       modal.layerPosition = this.getHigherIndex();
     }
@@ -311,6 +326,11 @@ export class NgxSmartModalService {
         modal.targetPlacement();
       }
 
+      modal.nsmDialog.first.nativeElement.setAttribute('role', 'dialog');
+      modal.nsmDialog.first.nativeElement.setAttribute('tabIndex', '-1');
+      modal.nsmDialog.first.nativeElement.setAttribute('aria-modal', 'true');
+      modal.nsmDialog.first.nativeElement.focus();
+
       modal.markForCheck();
       modal.onOpenFinished.emit(modal);
     });
@@ -337,15 +357,19 @@ export class NgxSmartModalService {
 
     if (this.getOpenedModals().length < 2) {
       modal.removeBodyClass();
+      window.removeEventListener('keyup', this._escapeKeyboardEvent);
+      window.removeEventListener('keydown', this._trapFocusModal);
     }
 
     setTimeout(() => {
       modal.visibleChange.emit(modal.visible);
       modal.visible = false;
       modal.overlayVisible = false;
+      modal.nsmDialog.first.nativeElement.removeAttribute('tabIndex');
       modal.markForCheck();
       modal.onCloseFinished.emit(modal);
       modal.onAnyCloseEventFinished.emit(modal);
+      this.lastElementFocused.focus();
     }, modal.hideDelay);
 
     return true;
@@ -411,7 +435,7 @@ export class NgxSmartModalService {
    * @param event The Keyboard Event
    */
   private _escapeKeyboardEvent = (event: KeyboardEvent) => {
-    if (event.keyCode === 27) {
+    if (event.key === 'Escape') {
       try {
         const modal = this.getTopOpenedModal();
 
@@ -437,4 +461,28 @@ export class NgxSmartModalService {
   private get isBrowser(): boolean {
     return isPlatformBrowser(this._platformId);
   }
+
+  /**
+   * While modal is open, the focus stay on it
+   * @param event The Keyboar dEvent
+   */
+  private _trapFocusModal = (event: KeyboardEvent) => {
+    if (event.key === 'Tab') {
+      try {
+        const modal = this.getTopOpenedModal();
+
+        if (!modal.nsmDialog.first.nativeElement.contains(document.activeElement)) {
+          event.preventDefault();
+          event.stopPropagation();
+          modal.nsmDialog.first.nativeElement.focus();
+        }
+
+        return true;
+      } catch (e) {
+        return false;
+      }
+    }
+
+    return false;
+  }
 }
diff --git a/src/ngx-smart-modal/tests/services/ngx-smart-modal.service.spec.ts b/src/ngx-smart-modal/tests/services/ngx-smart-modal.service.spec.ts

Original file line number	Diff line number	Diff line change
`@@ -13,4 +13,7 @@ export interface INgxSmartModalOptions {`
`13`	`13`	`hideDelay?: number;`
`14`	`14`	`autostart?: boolean;`
`15`	`15`	`target?: string;`
	`16`	`+ ariaLabel?: string;`
	`17`	`+ ariaLabelledBy?: string;`
	`18`	`+ ariaDescribedBy?: string;`
`16`	`19`	`}`