Rich text editor | Fix for updating "tabindex" of button in toolbar when clicking on the icon

change/@ni-nimble-components-f4a15d51-6bb8-4ee2-8980-eb1b3325b788.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Update tabindex when clicking icon of a button in rich text editor toolbar.",
+  "packageName": "@ni/nimble-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/nimble-components/src/rich-text/editor/styles.ts

@@ -218,6 +218,16 @@ export const styles = css`
         gap: ${standardPadding};
         place-items: center;
     }
+    ${
+        /**
+         * Restricting the pointer-events for the slot="start" where the icon is rendered.
+         * This can be removed after the below issue is fixed.
+         * https://github.com/ni/nimble/issues/1422
+         */ ''
+    }
+    nimble-toggle-button::part(start) {
+        pointer-events: none;
+    }
 
     :host([error-visible]) .error-icon {
         display: none;

packages/nimble-components/src/rich-text/editor/testing/rich-text-editor.pageobject.ts

@@ -82,6 +82,12 @@ export class RichTextEditorPageObject {
         await waitForUpdatesAsync();
     }
 
+    public async clickFooterIconSlot(button: ToolbarButton): Promise<void> {
+        const icon = this.getIconSlot(button);
+        icon!.click();
+        await waitForUpdatesAsync();
+    }
+
     public getButtonCheckedState(button: ToolbarButton): boolean {
         const toggleButton = this.getFormattingButton(button);
         return toggleButton!.checked;
@@ -217,4 +223,11 @@ export class RichTextEditorPageObject {
         );
         return buttons[button];
     }
+
+    private getIconSlot(
+        button: ToolbarButton
+    ): HTMLSpanElement | null | undefined {
+        const toggleButton = this.getFormattingButton(button);
+        return toggleButton?.shadowRoot?.querySelector('.start');
+    }
 }

packages/nimble-components/src/rich-text/editor/tests/rich-text-editor.spec.ts

@@ -208,6 +208,28 @@ describe('RichTextEditor', () => {
         }
     });
 
+    describe('clicking icon slots should update the tab index of the button', () => {
+        const focused: string[] = [];
+        const disabled: string[] = [];
+
+        for (const value of formattingButtons) {
+            const specType = getSpecTypeByNamedList(value, focused, disabled);
+            specType(
+                `"${value.name}" button icon click check`,
+                // eslint-disable-next-line @typescript-eslint/no-loop-func
+                async () => {
+                    await pageObject.clickFooterIconSlot(
+                        value.toolbarButtonIndex
+                    );
+
+                    expect(
+                        pageObject.getButtonTabIndex(value.toolbarButtonIndex)
+                    ).toBe(0);
+                }
+            );
+        }
+    });
+
     describe('space key press should update the checked state of the buttons', () => {
         const focused: string[] = [];
         const disabled: string[] = [];