From 6ed7575badd80333eb83408a9d2af1182bdf2328 Mon Sep 17 00:00:00 2001
From: Sibiraj <20282546+sibiraj-s@users.noreply.github.com>
Date: Mon, 13 May 2024 16:01:43 +0530
Subject: [PATCH] fix: improve editor accesibility for click events

---
 projects/ngx-editor/src/lib/editor.component.scss          | 2 +-
 .../src/lib/modules/menu/bubble/bubble.component.html      | 7 ++++---
 .../src/lib/modules/menu/bubble/bubble.component.scss      | 2 ++
 .../modules/menu/color-picker/color-picker.component.html  | 6 +++---
 .../modules/menu/color-picker/color-picker.component.scss  | 5 +++++
 .../src/lib/modules/menu/dropdown/dropdown.component.html  | 4 ++--
 .../src/lib/modules/menu/image/image.component.html        | 2 +-
 .../menu/insert-command/insert-command.component.html      | 2 +-
 .../src/lib/modules/menu/link/link.component.html          | 2 +-
 .../menu/toggle-command/toggle-command.component.html      | 2 +-
 10 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/projects/ngx-editor/src/lib/editor.component.scss b/projects/ngx-editor/src/lib/editor.component.scss
index 3a5aa041..6746777a 100644
--- 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
index e522c67b..3b822616 100644
--- 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
index cee0433e..5fa86eb8 100644
--- 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
index 712d3f7c..44c14e72 100644
--- 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
index 396883a0..01db5d5d 100644
--- 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
index 4f8a39ca..ea2f73eb 100644
--- 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
index 0a21e2f8..c16f6d75 100644
--- 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
index 7989c41e..50c771c1 100644
--- 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
index 744a70ac..d7bee8eb 100644
--- 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
index 4fc228db..c6077b24 100644
--- 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>