@domternal/angular 0.4.1 → 0.5.0

package/README.md

@@ -24,7 +24,7 @@ See <u>[Packages & Bundle Size](https://domternal.dev/v1/packages)</u> for a ful
 - **Tree-shakeable** - import only what you use, your bundler strips the rest
 - **~38 KB gzipped** (own code), <u>[~108 KB total](https://domternal.dev/v1/packages)</u> with ProseMirror
 - **TypeScript first** - 100% typed, zero `any`
-- **7,500+ tests** - 3,936 unit tests and 3,652 E2E tests across 76 Playwright specs
+- **6,400+ tests** - 2,677 unit tests and 3,767 E2E tests across 78 Playwright specs
 - **Light and dark theme** - 70+ CSS custom properties for full visual control
 - **Inline styles export** - `getHTML({ styled: true })` produces inline CSS ready for email clients, CMS, and Google Docs
 - **SSR helpers** - `generateHTML`, `generateJSON`, `generateText` for server-side rendering

package/dist/README.md

@@ -24,7 +24,7 @@ See <u>[Packages & Bundle Size](https://domternal.dev/v1/packages)</u> for a ful
 - **Tree-shakeable** - import only what you use, your bundler strips the rest
 - **~38 KB gzipped** (own code), <u>[~108 KB total](https://domternal.dev/v1/packages)</u> with ProseMirror
 - **TypeScript first** - 100% typed, zero `any`
-- **7,500+ tests** - 3,936 unit tests and 3,652 E2E tests across 76 Playwright specs
+- **6,400+ tests** - 2,677 unit tests and 3,767 E2E tests across 78 Playwright specs
 - **Light and dark theme** - 70+ CSS custom properties for full visual control
 - **Inline styles export** - `getHTML({ styled: true })` produces inline CSS ready for email clients, CMS, and Google Docs
 - **SSR helpers** - `generateHTML`, `generateJSON`, `generateText` for server-side rendering

package/dist/fesm2022/domternal-angular.mjs

@@ -470,6 +470,28 @@ class DomternalToolbarComponent {
                 this.controller.navigateLast();
                 this.focusCurrentButton();
                 break;
+            case 'ArrowDown': {
+                event.preventDefault();
+                if (this.openDropdown()) {
+                    this.focusDropdownItem(1);
+                }
+                else {
+                    const buttons = this.elRef.nativeElement.querySelectorAll('.dm-toolbar-button');
+                    const btn = buttons[this.controller?.focusedIndex ?? 0];
+                    if (btn?.getAttribute('aria-haspopup')) {
+                        btn.click();
+                        requestAnimationFrame(() => this.focusDropdownItem(0, true));
+                    }
+                }
+                break;
+            }
+            case 'ArrowUp': {
+                event.preventDefault();
+                if (this.openDropdown()) {
+                    this.focusDropdownItem(-1);
+                }
+                break;
+            }
             case 'Escape':
                 if (this.openDropdown()) {
                     event.preventDefault();
@@ -483,6 +505,24 @@ class DomternalToolbarComponent {
         }
     }
     // === Private ===
+    focusDropdownItem(direction, first) {
+        const panel = this.elRef.nativeElement.querySelector('.dm-toolbar-dropdown-panel');
+        if (!panel)
+            return;
+        const items = Array.from(panel.querySelectorAll('[role="menuitem"]'));
+        if (!items.length)
+            return;
+        if (first) {
+            items[0]?.focus();
+            return;
+        }
+        const current = document.activeElement;
+        const idx = items.indexOf(current);
+        const next = idx === -1
+            ? (direction > 0 ? 0 : items.length - 1)
+            : (idx + direction + items.length) % items.length;
+        items[next]?.focus();
+    }
     resolveIconSvg(name) {
         const customIcons = this.icons();
         if (customIcons) {
@@ -642,6 +682,7 @@ class DomternalToolbarComponent {
                           class="dm-color-swatch"
                           [class.dm-color-swatch--active]="isActive(sub.name)"
                           role="menuitem"
+                          [attr.tabindex]="-1"
                           [attr.aria-label]="sub.label"
                           [title]="sub.label"
                           [style.background-color]="sub.color"
@@ -653,8 +694,10 @@ class DomternalToolbarComponent {
                           type="button"
                           class="dm-color-palette-reset"
                           role="menuitem"
+                          [attr.tabindex]="-1"
                           [attr.aria-label]="sub.label"
                           [innerHTML]="getCachedItemContent(sub.icon, sub.label)"
+                          [attr.tabindex]="-1"
                           (mousedown)="$event.preventDefault()"
                           (click)="onDropdownItemClick(sub)"
                         ></button>
@@ -670,6 +713,7 @@ class DomternalToolbarComponent {
                         class="dm-toolbar-dropdown-item"
                         [class.dm-toolbar-dropdown-item--active]="isActive(sub.name)"
                         role="menuitem"
+                        [attr.tabindex]="-1"
                         [attr.aria-label]="sub.label"
                         [attr.style]="sub.style ?? null"
                         [innerHTML]="getCachedItemContent(sub.icon, sub.label, asDropdown(item).displayMode)"
@@ -752,6 +796,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                           class="dm-color-swatch"
                           [class.dm-color-swatch--active]="isActive(sub.name)"
                           role="menuitem"
+                          [attr.tabindex]="-1"
                           [attr.aria-label]="sub.label"
                           [title]="sub.label"
                           [style.background-color]="sub.color"
@@ -763,8 +808,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                           type="button"
                           class="dm-color-palette-reset"
                           role="menuitem"
+                          [attr.tabindex]="-1"
                           [attr.aria-label]="sub.label"
                           [innerHTML]="getCachedItemContent(sub.icon, sub.label)"
+                          [attr.tabindex]="-1"
                           (mousedown)="$event.preventDefault()"
                           (click)="onDropdownItemClick(sub)"
                         ></button>
@@ -780,6 +827,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                         class="dm-toolbar-dropdown-item"
                         [class.dm-toolbar-dropdown-item--active]="isActive(sub.name)"
                         role="menuitem"
+                        [attr.tabindex]="-1"
                         [attr.aria-label]="sub.label"
                         [attr.style]="sub.style ?? null"
                         [innerHTML]="getCachedItemContent(sub.icon, sub.label, asDropdown(item).displayMode)"
@@ -1115,13 +1163,14 @@ class DomternalBubbleMenuComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DomternalBubbleMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DomternalBubbleMenuComponent, isStandalone: true, selector: "domternal-bubble-menu", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null }, shouldShow: { classPropertyName: "shouldShow", publicName: "shouldShow", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, updateDelay: { classPropertyName: "updateDelay", publicName: "updateDelay", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, contexts: { classPropertyName: "contexts", publicName: "contexts", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "menuEl", first: true, predicate: ["menuEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <div #menuEl class="dm-bubble-menu">
+    <div #menuEl class="dm-bubble-menu" role="toolbar" aria-label="Text formatting">
       @for (item of resolvedItems(); track item.name) {
         @if (item.type === 'separator') {
-          <span class="dm-toolbar-separator"></span>
+          <span class="dm-toolbar-separator" role="separator"></span>
         } @else {
           <button type="button" class="dm-toolbar-button"
             [class.dm-toolbar-button--active]="isItemActive(item)"
+            [attr.aria-pressed]="isItemActive(item)"
             [disabled]="isItemDisabled(item)"
             [title]="item.label"
             [attr.aria-label]="item.label"
@@ -1137,13 +1186,14 @@ class DomternalBubbleMenuComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DomternalBubbleMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'domternal-bubble-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
-    <div #menuEl class="dm-bubble-menu">
+    <div #menuEl class="dm-bubble-menu" role="toolbar" aria-label="Text formatting">
       @for (item of resolvedItems(); track item.name) {
         @if (item.type === 'separator') {
-          <span class="dm-toolbar-separator"></span>
+          <span class="dm-toolbar-separator" role="separator"></span>
         } @else {
           <button type="button" class="dm-toolbar-button"
             [class.dm-toolbar-button--active]="isItemActive(item)"
+            [attr.aria-pressed]="isItemActive(item)"
             [disabled]="isItemDisabled(item)"
             [title]="item.label"
             [attr.aria-label]="item.label"
@@ -1301,6 +1351,45 @@ class DomternalEmojiPickerComponent {
             }
         });
     }
+    onGridKeydown(event) {
+        const grid = this.elRef.nativeElement.querySelector('.dm-emoji-picker-grid');
+        if (!grid)
+            return;
+        const swatches = Array.from(grid.querySelectorAll('.dm-emoji-swatch'));
+        if (!swatches.length)
+            return;
+        const current = document.activeElement;
+        const idx = swatches.indexOf(current);
+        if (idx === -1)
+            return;
+        const cols = 8;
+        let next = idx;
+        switch (event.key) {
+            case 'ArrowRight':
+                event.preventDefault();
+                next = Math.min(idx + 1, swatches.length - 1);
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                next = Math.max(idx - 1, 0);
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                next = Math.min(idx + cols, swatches.length - 1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                next = Math.max(idx - cols, 0);
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                swatches[idx]?.click();
+                return;
+            default: return;
+        }
+        swatches[next]?.focus();
+    }
     onGridScroll() {
         const grid = this.elRef.nativeElement.querySelector('.dm-emoji-picker-grid');
         if (!grid || this.searchQuery())
@@ -1423,6 +1512,7 @@ class DomternalEmojiPickerComponent {
             placeholder="Search emoji..."
             [value]="searchQuery()"
             (input)="onSearch($event)"
+            aria-label="Search emoji"
             (keydown.escape)="close()"
           />
         </div>
@@ -1433,6 +1523,8 @@ class DomternalEmojiPickerComponent {
               type="button"
               class="dm-emoji-picker-tab"
               [class.dm-emoji-picker-tab--active]="activeCategory() === cat"
+              role="tab"
+              [attr.aria-selected]="activeCategory() === cat"
               [title]="cat"
               [attr.aria-label]="cat"
               (mousedown)="$event.preventDefault()"
@@ -1441,12 +1533,13 @@ class DomternalEmojiPickerComponent {
           }
         </div>
 
-        <div class="dm-emoji-picker-grid" #grid (scroll)="onGridScroll()">
+        <div class="dm-emoji-picker-grid" #grid (scroll)="onGridScroll()" (keydown)="onGridKeydown($event)">
           @if (searchQuery()) {
             @for (item of filteredEmojis(); track item.name) {
               <button
                 type="button"
                 class="dm-emoji-swatch"
+                [attr.tabindex]="-1"
                 [title]="formatName(item.name)"
                 [attr.aria-label]="formatName(item.name)"
                 (mousedown)="$event.preventDefault()"
@@ -1463,6 +1556,7 @@ class DomternalEmojiPickerComponent {
                 <button
                   type="button"
                   class="dm-emoji-swatch"
+                  [attr.tabindex]="-1"
                   [title]="formatName(item.name)"
                   [attr.aria-label]="formatName(item.name)"
                   (mousedown)="$event.preventDefault()"
@@ -1476,6 +1570,7 @@ class DomternalEmojiPickerComponent {
                 <button
                   type="button"
                   class="dm-emoji-swatch"
+                  [attr.tabindex]="-1"
                   [title]="formatName(item.name)"
                   [attr.aria-label]="formatName(item.name)"
                   (mousedown)="$event.preventDefault()"
@@ -1506,6 +1601,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
             placeholder="Search emoji..."
             [value]="searchQuery()"
             (input)="onSearch($event)"
+            aria-label="Search emoji"
             (keydown.escape)="close()"
           />
         </div>
@@ -1516,6 +1612,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
               type="button"
               class="dm-emoji-picker-tab"
               [class.dm-emoji-picker-tab--active]="activeCategory() === cat"
+              role="tab"
+              [attr.aria-selected]="activeCategory() === cat"
               [title]="cat"
               [attr.aria-label]="cat"
               (mousedown)="$event.preventDefault()"
@@ -1524,12 +1622,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
           }
         </div>
 
-        <div class="dm-emoji-picker-grid" #grid (scroll)="onGridScroll()">
+        <div class="dm-emoji-picker-grid" #grid (scroll)="onGridScroll()" (keydown)="onGridKeydown($event)">
           @if (searchQuery()) {
             @for (item of filteredEmojis(); track item.name) {
               <button
                 type="button"
                 class="dm-emoji-swatch"
+                [attr.tabindex]="-1"
                 [title]="formatName(item.name)"
                 [attr.aria-label]="formatName(item.name)"
                 (mousedown)="$event.preventDefault()"
@@ -1546,6 +1645,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                 <button
                   type="button"
                   class="dm-emoji-swatch"
+                  [attr.tabindex]="-1"
                   [title]="formatName(item.name)"
                   [attr.aria-label]="formatName(item.name)"
                   (mousedown)="$event.preventDefault()"
@@ -1559,6 +1659,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                 <button
                   type="button"
                   class="dm-emoji-swatch"
+                  [attr.tabindex]="-1"
                   [title]="formatName(item.name)"
                   [attr.aria-label]="formatName(item.name)"
                   (mousedown)="$event.preventDefault()"