fix(text-editor): fixes the formatting buttons when clicked to toggle without text selections

Author: damienrobson-sage

src/components/text-editor/__internal__/plugins/ContentEditor/content-editor.component.tsx

@@ -47,7 +47,19 @@ const ContentEditor = ({
         aria-labelledby={`${namespace}-label`}
         className={`${namespace}-editable`}
         data-role={`${namespace}-editable`}
-        onFocus={focusAtEnd}
+        onFocus={(event: React.FocusEvent<HTMLDivElement> | undefined) => {
+          /* istanbul ignore if */
+          if (!event) return;
+
+          // If the related target is not a toolbar button, focus at the end of the editor
+          /* istanbul ignore next */
+          if (
+            !event.relatedTarget ||
+            !event.relatedTarget.classList.contains("toolbar-button")
+          ) {
+            focusAtEnd(event);
+          }
+        }}
         /** The following are automatically added by Lexical but violate WCAG 4.1.2 Name, Role, Value and so have been overriden */
         aria-autocomplete={undefined}
         aria-readonly={undefined}

src/components/text-editor/__internal__/plugins/Toolbar/buttons/bold.component.tsx

@@ -40,6 +40,7 @@ const BoldButton = ({ isActive, namespace }: FormattingButtonProps) => {
       aria-pressed={isActive}
       data-role={`${namespace}-bold-button`}
       tabIndex={0}
+      className="toolbar-button"
     />
   );
 };

src/components/text-editor/__internal__/plugins/Toolbar/buttons/italic.component.tsx

@@ -37,6 +37,7 @@ const ItalicButton = ({ isActive, namespace }: FormattingButtonProps) => {
       aria-pressed={isActive}
       data-role={`${namespace}-italic-button`}
       tabIndex={-1}
+      className="toolbar-button"
     />
   );
 };

src/components/text-editor/__internal__/plugins/Toolbar/buttons/list.component.tsx

@@ -356,6 +356,7 @@ const ListControls = ({ namespace }: { namespace: string }) => {
         aria-pressed={isULActive}
         data-role={`${namespace}-unordered-list-button`}
         tabIndex={-1}
+        className="toolbar-button"
       />
       <FormattingButton
         size="small"
@@ -369,6 +370,7 @@ const ListControls = ({ namespace }: { namespace: string }) => {
         aria-pressed={isOLActive}
         data-role={`${namespace}-ordered-list-button`}
         tabIndex={-1}
+        className="toolbar-button"
       />
     </>
   );

src/components/text-editor/text-editor.test.tsx

@@ -488,3 +488,87 @@ test("should toggle the an indiviual list item's type when a list is active and
   await user.click(ulButton);
   expect(screen.queryAllByRole("list").length).toBe(1);
 });
+
+describe("shortcut keys", () => {
+  it("should toggle bold text when the bold shortcut is pressed", async () => {
+    const user = userEvent.setup();
+    const mockCancel = jest.fn();
+    const mockSave = jest.fn();
+    const value = JSON.stringify(initialValue);
+
+    // render the TextEditor component
+    render(
+      <TextEditor
+        labelText="Example"
+        onCancel={() => mockCancel()}
+        onSave={() => mockSave()}
+        value={value}
+        characterLimit={20}
+      />,
+    );
+
+    // Click the editor space and send a few key presses
+    const editor = screen.getByRole(`textbox`);
+    await user.click(editor);
+    await user.keyboard(" not bold");
+
+    // expect the edited value to be visible
+    expect(screen.getByText("Sample text not bold")).toBeInTheDocument();
+    await user.tripleClick(editor);
+    const commandKey =
+      navigator.userAgent.indexOf("Mac") !== -1 ? "Meta" : "Control";
+    await user.keyboard(`{${commandKey}>}b{/${commandKey}>}`);
+
+    // expect the text to be bold
+    expect(screen.getByText("Sample text not bold")).toHaveStyle(
+      "font-weight: bold",
+    );
+    await user.keyboard(`{${commandKey}>}b{/${commandKey}>}`);
+
+    // expect the text to be normal
+    expect(screen.getByText("Sample text not bold")).not.toHaveStyle(
+      "font-weight: bold",
+    );
+  });
+
+  it("should toggle italic text when the italic shortcut is pressed", async () => {
+    const user = userEvent.setup();
+    const mockCancel = jest.fn();
+    const mockSave = jest.fn();
+    const value = JSON.stringify(initialValue);
+
+    // render the TextEditor component
+    render(
+      <TextEditor
+        labelText="Example"
+        onCancel={() => mockCancel()}
+        onSave={() => mockSave()}
+        value={value}
+        characterLimit={20}
+      />,
+    );
+
+    // Click the editor space and send a few key presses
+    const editor = screen.getByRole(`textbox`);
+    await user.click(editor);
+    await user.keyboard(" not italic");
+
+    // expect the edited value to be visible
+    expect(screen.getByText("Sample text not italic")).toBeInTheDocument();
+    await user.tripleClick(editor);
+    const commandKey =
+      navigator.userAgent.indexOf("Mac") !== -1 ? "Meta" : "Control";
+    await user.keyboard(`{${commandKey}>}i{/${commandKey}>}`);
+
+    // expect the text to be bold
+    expect(screen.getByText("Sample text not italic")).toHaveStyle(
+      "font-style: italic",
+    );
+    await user.keyboard(`{${commandKey}>}i{/${commandKey}>}`);
+
+    // expect the text to be normal
+    expect(screen.getByText("Sample text not italic")).not.toHaveStyle(
+      "font-style: italic",
+    );
+  });
+});