fix: improve editor accesibility for click events

sibiraj-s · May 13, 2024 · 6ed7575 · 6ed7575
1 parent 9e54a20
commit 6ed7575
Show file tree

Hide file tree

Showing 10 changed files with 21 additions and 13 deletions.
diff --git a/projects/ngx-editor/src/lib/editor.component.scss b/projects/ngx-editor/src/lib/editor.component.scss
@@ -11,7 +11,7 @@
   --ngx-editor-menu-item-active-bg-color: #e8f0fe;
   --ngx-editor-seperator-color: #ccc;
 
-  --ngx-editor-focus-ring-color: #93baff;
+  --ngx-editor-focus-ring-color: #5e9ed6;
 }
 
 $border-radius: var(--ngx-editor-border-radius);

diff --git a/projects/ngx-editor/src/lib/modules/menu/bubble/bubble.component.html b/projects/ngx-editor/src/lib/modules/menu/bubble/bubble.component.html
@@ -1,16 +1,17 @@
 <ng-container *ngFor="let toolbarItem of toolbar; let lastToolbarItem = last; trackBy: trackByIndex">
   <ng-container *ngFor="let item of toolbarItem; let lastItem = last; trackBy: trackByIndex">
-    <div
+    <button
+      type="button"
       class="NgxBubbleMenu__Icon"
       *ngIf="toggleCommands.includes(item)"
       [ngClass]="{
         'NgxBubbleMenu__Icon--Active': this.activeItems.includes(item),
         'NgxEditor--Disabled': !this.execulableItems.includes(item)
       }"
-      (mousedown)="onClick($event, item)"
+      (click)="onClick($event, item)"
       [title]="getTitle(item) | async"
       [innerHTML]="getIcon(item)"
-    ></div>
+    ></button>
     <div class="NgxBubbleMenu__Seperator" *ngIf="lastItem && !lastToolbarItem"></div>
   </ng-container>
 </ng-container>
diff --git a/projects/ngx-editor/src/lib/modules/menu/bubble/bubble.component.scss b/projects/ngx-editor/src/lib/modules/menu/bubble/bubble.component.scss
@@ -14,6 +14,8 @@
 }
 
 .NgxBubbleMenu__Icon {
+  all: unset;
+  appearance: none;
   height: 30px;
   width: 30px;
   transition: 0.3s ease-in-out;

diff --git a/projects/ngx-editor/src/lib/modules/menu/color-picker/color-picker.component.html b/projects/ngx-editor/src/lib/modules/menu/color-picker/color-picker.component.html
@@ -5,7 +5,7 @@
   [class.NgxEditor--Disabled]="!canExecute"
   [disabled]="!canExecute"
   [innerHTML]="icon | sanitizeHtml"
-  (mousedown)="togglePopup($event)"
+  (click)="togglePopup($event)"
   [title]="title | async"
   [ariaLabel]="title | async"
 ></button>
@@ -17,12 +17,12 @@
       *ngFor="let color of colorGroup; trackBy: trackByIndex"
       [ngStyle]="{ backgroundColor: color, color: getContrastYIQ(color) }"
       [title]="color"
-      (mousedown)="onColorSelect($event, color)"
+      (click)="onColorSelect($event, color)"
       [ngClass]="{ 'NgxEditor__Color--Active': activeColors.includes(color) }"
     ></button>
   </div>
 
-  <button class="NgxEditor__MenuItem--Button" (mousedown)="remove($event)" [disabled]="!isActive">
+  <button class="NgxEditor__MenuItem--Button" (click)="remove($event)" [disabled]="!isActive">
     {{ getLabel('remove') | async }}
   </button>
 </div>
diff --git a/projects/ngx-editor/src/lib/modules/menu/color-picker/color-picker.component.scss b/projects/ngx-editor/src/lib/modules/menu/color-picker/color-picker.component.scss
@@ -18,6 +18,11 @@
   width: 24px;
   height: 24px;
   flex-shrink: 0;
+
+  &:focus-visible {
+    outline: 1px solid var(--ngx-editor-focus-ring-color);
+    outline-offset: 1px;
+  }
 }
 
 .NgxEditor__Color--Active {

diff --git a/projects/ngx-editor/src/lib/modules/menu/dropdown/dropdown.component.html b/projects/ngx-editor/src/lib/modules/menu/dropdown/dropdown.component.html
@@ -4,7 +4,7 @@
   [class.NgxEditor__Dropdown--Selected]="isSelected"
   [disabled]="isDropdownDisabled"
   [class.NgxEditor--Disabled]="isDropdownDisabled"
-  (mousedown)="toggleDropdown($event)"
+  (click)="toggleDropdown($event)"
   [ariaLabel]="getName(activeItem || group) | async"
   aria-haspopup="listbox"
   [ariaExpanded]="isDropdownOpen"
@@ -17,7 +17,7 @@
     type="button"
     class="NgxEditor__Dropdown--Item"
     *ngFor="let item of items; trackBy: trackByIndex"
-    (mousedown)="onClick($event, item)"
+    (click)="onClick($event, item)"
     [ngClass]="{
       'NgxEditor__Dropdown--Active': item === activeItem,
       'NgxEditor--Disabled': disabledItems.includes(item)

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
@@ -3,7 +3,7 @@
   class="NgxEditor__MenuItem--Icon"
   [class.NgxEditor__MenuItem--Active]="isActive || showPopup"
   [innerHTML]="icon | sanitizeHtml"
-  (mousedown)="onMouseDown($event)"
+  (click)="onMouseDown($event)"
   [title]="getLabel('insertImage') | async"
   [ariaLabel]="getLabel('insertImage') | async"
   aria-haspopup="dialog"

diff --git a/projects/ngx-editor/src/lib/modules/menu/insert-command/insert-command.component.html b/projects/ngx-editor/src/lib/modules/menu/insert-command/insert-command.component.html
@@ -3,7 +3,7 @@
   [disabled]="disabled"
   [class.NgxEditor--Disabled]="disabled"
   [innerHTML]="html | sanitizeHtml"
-  (mousedown)="insert($event)"
+  (click)="insert($event)"
   [title]="getTitle(name) | async"
   [ariaLabel]="getTitle(name) | async"
 ></button>
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
@@ -5,7 +5,7 @@
   [class.NgxEditor--Disabled]="!canExecute"
   [disabled]="!canExecute"
   [innerHTML]="icon | sanitizeHtml"
-  (mousedown)="onMouseDown($event)"
+  (click)="onMouseDown($event)"
   [title]="title | async"
   [ariaLabel]="title | async"
   aria-haspopup="dialog"

diff --git a/projects/ngx-editor/src/lib/modules/menu/toggle-command/toggle-command.component.html b/projects/ngx-editor/src/lib/modules/menu/toggle-command/toggle-command.component.html
@@ -5,7 +5,7 @@
   [class.NgxEditor--Disabled]="disabled"
   [disabled]="disabled"
   [innerHTML]="html | sanitizeHtml"
-  (mousedown)="toggle($event)"
+  (click)="toggle($event)"
   [title]="getTitle(name) | async"
   [ariaLabel]="getTitle(name) | async"
 ></button>