feat(text-editor): align hyperlink dialog with fusion DS by tomdavies73 · Pull Request #7857 · Sage/carbon

tomdavies73 · 2026-03-25T11:20:02Z

Proposed behaviour

Aligns the "hyperlink" Dialog within the TextEditor component with designs from the fusion DS. This fixes a current accessibility issue where the "Save" Button is disabled if any of the required fields are empty. This has instead been replaced with validation when the parent form is submitted.

This PR also introduces some new behaviour, when a user selects text before pressing the "Hyperlink" Button this selected text is populated in the "link text" Textbox when the Dialog opens

Current behaviour

Currently, the "hyperlink" Dialog within the TextEditor component is not aligned with the fusion DS and misses some key functionality. There is also an accessibility issue due to the use of a disabled button instead of form validation.

Checklist

QA

Tested in provided StackBlitz sandbox/Storybook
Add new Playwright test coverage if required
Carbon implementation matches Design System/designs
UI Tests GitHub check reviewed if required

Additional context

Testing instructions

Open the "hyperlink" Dialog on this branch. See that the button is not disabled, and instead form validation is used if required fields are left empty
Compare the open "hyperlink" Dialog when open to the available designs to check for proper continuity, these can be found by finding the linked Figma in the corresponding Jira tickets comments.
Pre-select some text using your cursor. See that the selected text is now populated inside the "link text" Textbox when the Dialog opens

Copilot

Pull request overview

Aligns the TextEditor “Insert link” dialog with the Fusion design system and improves accessibility by moving from a disabled “Save” button to submit-time validation, while also enhancing UX by pre-filling link text from the current selection.

Changes:

Updated hyperlink dialog copy/labels and introduced new i18n keys for required-field guidance and validation messages.
Implemented submit-time validation (instead of disabling the Save button) and auto-population of “Link text” from selected editor content.
Added/updated Storybook interaction coverage and unit tests for the new behaviors.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
src/locales/locale.ts	Extends TextEditor hyperlink locale shape with new optional keys.
src/locales/en-gb.ts	Updates hyperlink dialog copy and adds required-field + validation message strings.
src/components/text-editor/text-editor-interaction.stories.tsx	Adds an interaction story to open the hyperlink dialog.
src/components/text-editor/internal/ui/Toolbar/toolbar.test.tsx	Adds unit tests for selected-text prefill and submit-time validation.
src/components/text-editor/internal/ui/Toolbar/toolbar.component.tsx	Implements new dialog layout, selection prefill, and validation flow.
src/components/text-editor/internal/ui/Toolbar/buttons/hyperlink.test.tsx	Updates expected dialog title text.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-30T12:29:41Z

+    <CarbonProvider validationRedesignOptIn>
+      <StyledToolbarWrapper


Wrapping the Toolbar in CarbonProvider will override any theme provided by a parent ThemeProvider/CarbonProvider (it defaults theme to sageTheme) and also re-initialises scoped tokens + modal context. This can cause the TextEditor toolbar/dialog to render with a different theme than the rest of the app. Instead, only opt into the new validation UI by providing NewValidationContext.Provider with validationRedesignOptIn: true around the dialog (or the specific Textboxes), without introducing a nested ThemeProvider.

nineteen88

comment: address baking in CarbonProvider into toolbar.component as discussed offline

Copilot

Pull request overview

Copilot reviewed 6 out of 6 changed files in this pull request and generated 4 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-10T10:38:25Z

  /** Omitted from coverage, tested in hyperlink button */
  /* istanbul ignore next */
  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault();

+    // Validate that both fields are not empty
+    const hasTextError = !linkText.trim();
+    const hasUrlError = !linkUrl.trim();
+


handleSubmit is still marked with /* istanbul ignore next */, but it now contains the new validation behavior being introduced in this PR. Keeping it ignored will exclude the new logic from coverage reports and the comment is no longer accurate. Consider removing the ignore or narrowing it to only the truly untestable branch(es).

This function is intentionally excluded from coverage. Lexical's internal architecture makes deterministic test coverage difficult to achieve, and this is a known ongoing challenge across the codebase.

Existing tests provide meaningful behavioural coverage, but removing the /* istanbul ignore next */ directive would introduce disproportionate overhead to satisfy the 100% threshold without a commensurate improvement in test quality.

LaiaSage

It’s possible that Accessibility may require an error summary in the future, but for now the current error handling is sufficient.

LaiaSage · 2026-04-17T08:56:48Z

As discussed via DM, thanks @tomdavies73 for working on moving the focus state to the first wrong field after error displayed. It will help a lot our keyboard users 😉

LaiaSage · 2026-04-20T08:20:52Z

Thanks for the updates, @tomdavies73 .
Although some of the spacing doesn’t exactly match the designs, I agree that this isn’t the main focus of this PR and can be addressed later if needed. So.. no blockers from my side 😊👍

aligns the hyperlink dialog within the TextEditor component with designs from the fusion DS. This fixes a current accessibility issue where the "Save" button is disabled if any of the required fields are empty. This has instead been replaced with validation when the parent form is submitted. This PR also introduces some new behaviour, when a user selects text before pressing the "Hyperlink button" this selected text is populated in the "link text" textbox when the dialog opens fix #7826

carbonci · 2026-04-21T15:22:35Z

🎉 This PR is included in version 158.46.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

tomdavies73 self-assigned this Mar 25, 2026

tomdavies73 added DO NOT MERGE Work in progress This is a WIP PR so may not be ready for review labels Mar 25, 2026

tomdavies73 force-pushed the FE-7626 branch from 63c7f3d to 7ae9044 Compare March 25, 2026 13:22

tomdavies73 added Pending Review Pending QA Pending UX QA Design System Review Required DS team to review changes and removed DO NOT MERGE Work in progress This is a WIP PR so may not be ready for review Pending UX QA labels Mar 25, 2026

DipperTheDan self-requested a review March 27, 2026 09:58

DipperTheDan reviewed Mar 27, 2026

View reviewed changes

Comment thread src/components/text-editor/__internal__/__ui__/Toolbar/toolbar.component.tsx

nineteen88 requested a review from Copilot March 30, 2026 12:21

Copilot started reviewing on behalf of nineteen88 March 30, 2026 12:21 View session

Copilot AI reviewed Mar 30, 2026

View reviewed changes

nineteen88 reviewed Mar 30, 2026

View reviewed changes

tomdavies73 force-pushed the FE-7626 branch 2 times, most recently from 8080a6d to 4ed9c3e Compare April 1, 2026 14:48

DipperTheDan previously approved these changes Apr 7, 2026

View reviewed changes

nineteen88 requested a review from Copilot April 10, 2026 10:31

Copilot started reviewing on behalf of nineteen88 April 10, 2026 10:31 View session

Copilot AI reviewed Apr 10, 2026

View reviewed changes

tomdavies73 dismissed DipperTheDan’s stale review via c9ec109 April 10, 2026 14:08

tomdavies73 force-pushed the FE-7626 branch 2 times, most recently from c9ec109 to ef88610 Compare April 10, 2026 14:56

DipperTheDan previously approved these changes Apr 13, 2026

View reviewed changes

nineteen88 previously approved these changes Apr 13, 2026

View reviewed changes

tomdavies73 force-pushed the FE-7626 branch from ef88610 to a015675 Compare April 13, 2026 10:00

tomdavies73 removed the Pending Review label Apr 13, 2026

tomdavies73 added the Passed Review label Apr 13, 2026

tomdavies73 marked this pull request as ready for review April 13, 2026 10:01

tomdavies73 requested review from a team as code owners April 13, 2026 10:01

tomdavies73 added Pending a11y Review Passed a11y Review and removed Pending a11y Review labels Apr 13, 2026

LaiaSage reviewed Apr 17, 2026

View reviewed changes

tomdavies73 dismissed stale reviews from DipperTheDan and nineteen88 via 6b8f434 April 17, 2026 14:02

tomdavies73 force-pushed the FE-7626 branch from a015675 to 6b8f434 Compare April 17, 2026 14:02

LaiaSage added Passed UX QA and removed Design System Review Required DS team to review changes labels Apr 20, 2026

tomdavies73 marked this pull request as draft April 20, 2026 08:25

tomdavies73 force-pushed the FE-7626 branch from 6b8f434 to 5aa1fd0 Compare April 20, 2026 08:44

DipperTheDan approved these changes Apr 20, 2026

View reviewed changes

nineteen88 approved these changes Apr 20, 2026

View reviewed changes

tomdavies73 marked this pull request as ready for review April 20, 2026 09:58

divyajindel approved these changes Apr 21, 2026

View reviewed changes

divyajindel added Passed QA and removed Pending QA labels Apr 21, 2026

Merge branch 'master' into FE-7626

6563b58

tomdavies73 merged commit ed3eed9 into master Apr 21, 2026
29 checks passed

tomdavies73 deleted the FE-7626 branch April 21, 2026 15:20

carbonci added the released label Apr 21, 2026

		<CarbonProvider validationRedesignOptIn>
		<StyledToolbarWrapper

Conversation

tomdavies73 commented Mar 25, 2026 • edited by divyajindel Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed behaviour

Current behaviour

Checklist

QA

Additional context

Testing instructions

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

nineteen88 left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Copilot AI Apr 10, 2026

Choose a reason for hiding this comment

Uh oh!

tomdavies73 Apr 10, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

LaiaSage left a comment

Choose a reason for hiding this comment

Uh oh!

LaiaSage commented Apr 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

LaiaSage commented Apr 20, 2026

Uh oh!

Uh oh!

carbonci commented Apr 21, 2026

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

7 participants

tomdavies73 commented Mar 25, 2026 •

edited by divyajindel

Loading

LaiaSage commented Apr 17, 2026 •

edited

Loading