feat: improve menu accessibility

sibiraj-s · May 12, 2024 · 041c167 · 041c167
1 parent aee35ff
commit 041c167
Show file tree

Hide file tree

Showing 10 changed files with 62 additions and 20 deletions.
diff --git a/projects/demo/src/app/components/custom-menu/custom-menu.component.html b/projects/demo/src/app/components/custom-menu/custom-menu.component.html
@@ -1,5 +1,7 @@
 <div class="NgxEditor__Seperator"></div>
 <div
+  role="button"
+  tabindex="0"
   class="NgxEditor__MenuItem NgxEditor__MenuItem--Text"
   (mousedown)="onClick($event)"
   [ngClass]="{ 'NgxEditor__MenuItem--Active': isActive, 'NgxEditor--Disabled': isDisabled }"

diff --git a/projects/demo/src/app/components/custom-menu/custom-menu.component.scss b/projects/demo/src/app/components/custom-menu/custom-menu.component.scss
@@ -1,3 +1,8 @@
 :host {
   display: flex;
 }
+
+.NgxEditor__MenuItem {
+  all: unset;
+  appearance: none;
+}
diff --git a/projects/ngx-editor/src/lib/editor.component.scss b/projects/ngx-editor/src/lib/editor.component.scss
@@ -21,6 +21,11 @@ $menubar-padding: 3px;
 $menu-item-spacing: 5px;
 $menubar-text-padding: 0 $menu-item-spacing;
 
+@mixin button-reset {
+  all: unset;
+  appearance: none;
+}
+
 .NgxEditor {
   background: white;
   color: black;
@@ -45,7 +50,7 @@ $menubar-text-padding: 0 $menu-item-spacing;
     content: attr(data-placeholder);
   }
 
-  &[data-align="right"] {
+  &[data-align='right'] {
     &::before {
       position: relative;
     }
@@ -57,7 +62,7 @@ $menubar-text-padding: 0 $menu-item-spacing;
   white-space: pre-wrap;
   outline: none;
   font-variant-ligatures: none;
-  font-feature-settings: "liga" 0;
+  font-feature-settings: 'liga' 0;
 
   p {
     margin: 0 0 10px;
@@ -124,6 +129,7 @@ $menubar-text-padding: 0 $menu-item-spacing;
   }
 
   .NgxEditor__MenuItem--IconContainer {
+    @include button-reset;
     display: flex;
     height: 100%;
     width: 100%;
@@ -154,6 +160,7 @@ $menubar-text-padding: 0 $menu-item-spacing;
   }
 
   .NgxEditor__Dropdown--Text {
+    @include button-reset;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -163,7 +170,7 @@ $menubar-text-padding: 0 $menu-item-spacing;
 
     &::after {
       display: inline-block;
-      content: "";
+      content: '';
       margin-left: 24px;
       vertical-align: 4px;
       border-top: 4px solid;
@@ -182,9 +189,12 @@ $menubar-text-padding: 0 $menu-item-spacing;
     z-index: 10;
     width: 100%;
     top: calc(#{$menubar-height} + 2px);
+    display: flex;
+    flex-direction: column;
   }
 
   .NgxEditor__Dropdown--Item {
+    @include button-reset;
     padding: 8px;
     white-space: nowrap;
     color: inherit;
@@ -245,8 +255,8 @@ $menubar-text-padding: 0 $menu-item-spacing;
       margin-bottom: 3px;
     }
 
-    input[type="text"],
-    input[type="url"] {
+    input[type='text'],
+    input[type='url'] {
       padding: 2px 4px;
     }
   }

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
@@ -1,11 +1,13 @@
-<div
+<button
+  type="button"
   class="NgxEditor__MenuItem--IconContainer"
   [class.NgxEditor__MenuItem--Active]="isActive || showPopup"
   [class.NgxEditor--Disabled]="!canExecute"
   [innerHTML]="icon | sanitizeHtml"
   (mousedown)="togglePopup($event)"
   [title]="title | async"
-></div>
+  [ariaLabel]="title | async"
+></button>
 
 <div *ngIf="showPopup" class="NgxEditor__Popup">
   <div *ngFor="let colorGroup of presets; trackBy: trackByIndex" class="NgxEditor__ColorContainer">

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
@@ -1,22 +1,30 @@
-<div
+<button
+  type="button"
   class="NgxEditor__Dropdown--Text"
   [class.NgxEditor__Dropdown--Selected]="isSelected"
   [class.NgxEditor--Disabled]="isDropdownDisabled"
   (mousedown)="toggleDropdown($event)"
+  [ariaLabel]="getName(activeItem || group) | async"
+  aria-haspopup="listbox"
+  [ariaExpanded]="isDropdownOpen"
 >
   {{ getName(activeItem || group) | async }}
-</div>
+</button>
 
-<div class="NgxEditor__Dropdown--DropdownMenu" *ngIf="isDropdownOpen">
-  <div
+<div class="NgxEditor__Dropdown--DropdownMenu" *ngIf="isDropdownOpen" role="listbox">
+  <button
+    type="button"
     class="NgxEditor__Dropdown--Item"
     *ngFor="let item of items; trackBy: trackByIndex"
     (mousedown)="onClick($event, item)"
     [ngClass]="{
       'NgxEditor__Dropdown--Active': item === activeItem,
       'NgxEditor--Disabled': disabledItems.includes(item)
     }"
+    [ariaLabel]="getName(item) | async"
+    role="option"
+    [attr.aria-selected]="item === activeItem"
   >
     {{ getName(item) | async }}
-  </div>
+  </button>
 </div>
diff --git a/projects/ngx-editor/src/lib/modules/menu/dropdown/dropdown.component.ts b/projects/ngx-editor/src/lib/modules/menu/dropdown/dropdown.component.ts
@@ -51,6 +51,10 @@ export class DropdownComponent implements OnInit, OnDestroy {
     return this.ngxeService.locals.get(key);
   }
 
+  getIsDropdownActive(item:string): boolean {
+    return this.activeItem === item;
+  }
+
   toggleDropdown(e: MouseEvent): void {
     e.preventDefault();
     this.isDropdownOpen = !this.isDropdownOpen;

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,10 +1,14 @@
-<div
+<button
+  type="button"
   class="NgxEditor__MenuItem--IconContainer"
   [class.NgxEditor__MenuItem--Active]="isActive || showPopup"
   [innerHTML]="icon | sanitizeHtml"
   (mousedown)="onMouseDown($event)"
   [title]="getLabel('insertImage') | async"
-></div>
+  [ariaLabel]="getLabel('insertImage') | async"
+  aria-haspopup="dialog"
+  [ariaExpanded]="showPopup"
+></button>
 
 <!-- popup -->
 <div *ngIf="showPopup" class="NgxEditor__Popup">

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
@@ -1,7 +1,8 @@
-<div
+<button
   class="NgxEditor__MenuItem--IconContainer"
   [class.NgxEditor--Disabled]="disabled"
   [innerHTML]="html | sanitizeHtml"
   (mousedown)="insert($event)"
   [title]="getTitle(name) | async"
-></div>
+  [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
@@ -1,11 +1,15 @@
-<div
+<button
+  type="button"
   class="NgxEditor__MenuItem--IconContainer"
   [class.NgxEditor__MenuItem--Active]="isActive || showPopup"
   [class.NgxEditor--Disabled]="!canExecute"
   [innerHTML]="icon | sanitizeHtml"
   (mousedown)="onMouseDown($event)"
   [title]="title | async"
-></div>
+  [ariaLabel]="title | async"
+  aria-haspopup="dialog"
+  [ariaExpanded]="showPopup"
+></button>
 
 <!-- popup -->
 <div *ngIf="showPopup" class="NgxEditor__Popup">

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
@@ -1,8 +1,10 @@
-<div
+<button
+  type="button"
   class="NgxEditor__MenuItem--IconContainer"
   [class.NgxEditor__MenuItem--Active]="isActive"
   [class.NgxEditor--Disabled]="disabled"
   [innerHTML]="html | sanitizeHtml"
   (mousedown)="toggle($event)"
   [title]="getTitle(name) | async"
-></div>
+  [ariaLabel]="getTitle(name) | async"
+></button>