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": "Fix for tabindex value change when clicked on icon of the buttons in rich text editor toolbar.",
+  "packageName": "@ni/nimble-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -219,6 +219,10 @@ export const styles = css`
         place-items: center;
     }
 
+    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

@@ -78,6 +78,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[] = [];