fix: add ids to form elements for a11y

sibiraj-s · Mar 5, 2024 · b9f142e · b9f142e
1 parent 463fc5c
commit b9f142e
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 24 deletions.
diff --git a/projects/ngx-editor/src/lib/modules/menu/image/image.component.html b/projects/ngx-editor/src/lib/modules/menu/image/image.component.html
@@ -1,15 +1,20 @@
-<div class="NgxEditor__MenuItem--IconContainer" [class.NgxEditor__MenuItem--Active]="isActive || showPopup"
-  [innerHTML]="icon | sanitizeHtml" (mousedown)="onMouseDown($event)" [title]="getLabel('insertImage') | async">
-</div>
+<div
+  class="NgxEditor__MenuItem--IconContainer"
+  [class.NgxEditor__MenuItem--Active]="isActive || showPopup"
+  [innerHTML]="icon | sanitizeHtml"
+  (mousedown)="onMouseDown($event)"
+  [title]="getLabel('insertImage') | async"
+></div>
 
 <!-- popup -->
 <div *ngIf="showPopup" class="NgxEditor__Popup">
   <form class="NgxEditor__Popup--Form" [formGroup]="form" (ngSubmit)="insertLink($event)">
-
     <div class="NgxEditor__Popup--FormGroup">
       <div class="NgxEditor__Popup--Col">
-        <label class="NgxEditor__Popup--Label">{{getLabel('url') | async}}</label>
-        <input type="href" id="href" formControlName="src" autofocus autocomplete="off" />
+        <label class="NgxEditor__Popup--Label" [htmlFor]="getId('image-popup-url')">{{
+          getLabel('url') | async
+        }}</label>
+        <input type="href" [id]="getId('image-popup-url')" formControlName="src" autocomplete="off" />
         <div *ngIf="src.touched && src.invalid" class="NgxEditor__HelpText NgxEditor__HelpText--Error">
           {{ src.errors?.['pattern'] && 'Please enter valid url.' }}
         </div>
@@ -18,19 +23,22 @@
 
     <div class="NgxEditor__Popup--FormGroup">
       <div class="NgxEditor__Popup--Col">
-        <label class="NgxEditor__Popup--Label">{{getLabel('altText') | async}}</label>
-        <input type="text" formControlName="alt" autocomplete="off" />
+        <label class="NgxEditor__Popup--Label" [htmlFor]="getId('image-popup-label')">{{
+          getLabel('altText') | async
+        }}</label>
+        <input type="text" [id]="getId('image-popup-label')" formControlName="alt" autocomplete="off" />
       </div>
     </div>
 
     <div class="NgxEditor__Popup--FormGroup">
       <div class="NgxEditor__Popup--Col">
-        <label class="NgxEditor__Popup--Label">{{getLabel('title') | async}}</label>
-        <input type="text" formControlName="title" autocomplete="off" />
+        <label class="NgxEditor__Popup--Label" [htmlFor]="getId('image-popup-title')">{{
+          getLabel('title') | async
+        }}</label>
+        <input type="text" [id]="getId('image-popup-title')" formControlName="title" autocomplete="off" />
       </div>
     </div>
 
-    <button type="submit" [disabled]="!form.valid || !form.dirty">{{getLabel('insert') | async}}</button>
-
+    <button type="submit" [disabled]="!form.valid || !form.dirty">{{ getLabel('insert') | async }}</button>
   </form>
 </div>
diff --git a/projects/ngx-editor/src/lib/modules/menu/image/image.component.ts b/projects/ngx-editor/src/lib/modules/menu/image/image.component.ts
@@ -6,6 +6,7 @@ import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/fo
 import { NodeSelection } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
 import { Observable, Subscription } from 'rxjs';
+import { nanoid } from 'nanoid';
 
 import { NgxEditorService } from '../../../editor.service';
 import { MenuService } from '../menu.service';
@@ -20,6 +21,7 @@ import { HTML } from '../../../trustedTypesUtil';
 export class ImageComponent implements OnInit, OnDestroy {
   showPopup = false;
   isActive = false;
+  private componentId = nanoid();
   private updateSubscription: Subscription;
 
   form = new FormGroup({
@@ -53,6 +55,10 @@ export class ImageComponent implements OnInit, OnDestroy {
     }
   }
 
+  getId(name:string): string {
+    return `${name}-${this.componentId}`;
+  }
+
   getLabel(key: string): Observable<string> {
     return this.ngxeService.locals.get(key);
   }

diff --git a/projects/ngx-editor/src/lib/modules/menu/link/link.component.html b/projects/ngx-editor/src/lib/modules/menu/link/link.component.html
@@ -1,16 +1,19 @@
-<div class="NgxEditor__MenuItem--IconContainer" [class.NgxEditor__MenuItem--Active]="isActive || showPopup"
-  [class.NgxEditor--Disabled]="!canExecute" [innerHTML]="icon | sanitizeHtml" (mousedown)="onMouseDown($event)"
-  [title]="title | async">
-</div>
+<div
+  class="NgxEditor__MenuItem--IconContainer"
+  [class.NgxEditor__MenuItem--Active]="isActive || showPopup"
+  [class.NgxEditor--Disabled]="!canExecute"
+  [innerHTML]="icon | sanitizeHtml"
+  (mousedown)="onMouseDown($event)"
+  [title]="title | async"
+></div>
 
 <!-- popup -->
 <div *ngIf="showPopup" class="NgxEditor__Popup">
   <form class="NgxEditor__Popup--Form" [formGroup]="form" (ngSubmit)="insertLink($event)">
-
     <div class="NgxEditor__Popup--FormGroup">
       <div class="NgxEditor__Popup--Col">
-        <label class="NgxEditor__Popup--Label">{{getLabel('url') | async}}</label>
-        <input type="href" id="href" formControlName="href" autofocus autocomplete="off" />
+        <label class="NgxEditor__Popup--Label" [htmlFor]="getId('link-popup-url')">{{ getLabel('url') | async }}</label>
+        <input type="href" [id]="getId('link-popup-url')" formControlName="href" autocomplete="off" />
         <div *ngIf="href.touched && href.invalid" class="NgxEditor__HelpText NgxEditor__HelpText--Error">
           {{ href.errors?.['pattern'] && 'Please enter valid url.' }}
         </div>
@@ -19,8 +22,10 @@
 
     <div class="NgxEditor__Popup--FormGroup">
       <div class="NgxEditor__Popup--Col">
-        <label class="NgxEditor__Popup--Label">{{getLabel('text') | async}}</label>
-        <input type="text" formControlName="text" autocomplete="off" />
+        <label class="NgxEditor__Popup--Label" [htmlFor]="getId('link-popup-label')">{{
+          getLabel('text') | async
+        }}</label>
+        <input type="text" [id]="getId('link-popup-label')" formControlName="text" autocomplete="off" />
         <div *ngIf="text.touched && text.invalid" class="NgxEditor__HelpText NgxEditor__HelpText--Error">
           {{ text.errors?.['required'] && 'This is required' }}
         </div>
@@ -31,12 +36,11 @@
       <div class="NgxEditor__Popup--Col">
         <label>
           <input type="checkbox" formControlName="openInNewTab" />
-          {{getLabel('openInNewTab') | async}}
+          {{ getLabel('openInNewTab') | async }}
         </label>
       </div>
     </div>
 
-    <button type="submit" [disabled]="!form.valid">{{getLabel('insert') | async}}</button>
-
+    <button type="submit" [disabled]="!form.valid">{{ getLabel('insert') | async }}</button>
   </form>
 </div>
diff --git a/projects/ngx-editor/src/lib/modules/menu/link/link.component.ts b/projects/ngx-editor/src/lib/modules/menu/link/link.component.ts
@@ -10,6 +10,7 @@ import { NgxEditorService } from '../../../editor.service';
 import { MenuService } from '../menu.service';
 import { Link as LinkCommand } from '../MenuCommands';
 import { HTML } from '../../../trustedTypesUtil';
+import { nanoid } from 'nanoid';
 
 @Component({
   selector: 'ngx-link',
@@ -21,6 +22,7 @@ export class LinkComponent implements OnInit, OnDestroy {
   showPopup = false;
   isActive = false;
   canExecute = true;
+  private componentId = nanoid();
   form: FormGroup;
 
   private editorView: EditorView;
@@ -54,6 +56,10 @@ export class LinkComponent implements OnInit, OnDestroy {
     }
   }
 
+  getId(name:string): string {
+    return `${name}-${this.componentId}`;
+  }
+
   getLabel(key: string): Observable<string> {
     return this.ngxeService.locals.get(key);
   }