feat(block-editor): enhance link editor with accessibility attributes

[nicobytes]

This pull request enhances the link editing experience in the block editor by adding support for accessibility and advanced HTML attributes on links. It introduces new UI controls for editing link title, aria-label, and rel attributes, updates the TipTap Link extension to persist these attributes, and adds comprehensive tests for the new functionality. The UI has been reorganized to provide a more accessible and user-friendly workflow for editing all link properties.

Accessibility & Advanced Link Attribute Support:

• The TipTap Link extension in dot-block-editor.component.ts is extended to support title, aria-label, and rel attributes, ensuring these are persisted in the editor's JSON and DOM output.
• The DotLinkEditorPopoverComponent now provides UI fields and logic for editing title, aria-label, and rel, including an "Advanced" section that auto-expands when these attributes are present. [1] [2] [3] [4]
• The available options for target and rel attributes are now clearly defined and selectable from dropdowns, replacing the previous checkbox for "Open in new window". [1] [2]

UI/UX Improvements:

• The link editor popover UI is reorganized for clarity, with new field groupings, advanced toggle, and improved styling for accessibility and usability. [1] [2]
• The "Remove Link" button is visually distinguished with a danger style.

Testing Enhancements:

• Comprehensive unit tests are added for the new link attribute logic, including initialization, attribute persistence, and advanced section behavior.

Codebase Maintenance:

• Refactors imports and removes unused components (e.g., Checkbox), and introduces clear documentation for new interfaces and constants. [1] [2]

These changes collectively improve accessibility, flexibility, and reliability when working with links in the block editor.

This PR fixes: #35234

This PR fixes: #35234

[claude]

Claude finished @nicobytes's task in 7m 11s —— View job

---

PR Review

• Read all 7 changed files
• Analyze for bugs, security issues, and design problems

---

Issues Found

1. TipTap rel default changed from 'noopener noreferrer' to null — security regression

In dot-block-editor.component.ts lines 690–694, the PR overrides TipTap's built-in rel attribute:

rel: {
    default: null,   // was 'noopener noreferrer' in TipTap's default
    parseHTML: (el) => el.getAttribute('rel'),
    renderHTML: (attrs) => (attrs.rel ? { rel: attrs.rel } : {})
}

TipTap's Link extension ships with rel defaulting to 'noopener noreferrer'. The ...this.parent?.() spread includes that default, but the immediate override sets it to null. Any link without an explicitly saved rel (e.g., all pre-existing content) will now render without a rel attribute — removing the noopener protection for target="_blank" links.

Fix: preserve TipTap's default (default: this.parent?.().rel?.default ?? null) or explicitly set default: 'noopener noreferrer' and only allow clearing it via the dropdown.

---

2. Image node silently drops new attributes in addLinkToNode()

In dot-link-editor-popover.component.ts lines 236–238:

if (isImageNode) {
    this.editor().chain().focus().setImageLink({ href: linkToSave, target }).run();
}

setImageLink only receives href and target. The title, aria-label, and rel values from the form signals are silently discarded for image links.

---

3. saveLinkAttributes() doesn't handle image nodes

saveLinkAttributes() always calls #applyLink() which uses setLink(), even when the current node is a dotImage. The Save button is visible for image links too (since showLinkDetails() doesn't differentiate), but clicking it will call setLink on an image node — likely a no-op or wrong behavior. The same image/text branching used in removeLinkFromEditor() and addLinkToNode() is missing here.

---

4. Advanced attributes unreachable when creating a new link

The Advanced section is inside @if (showLinkDetails()), which only renders when editing an existing link. When adding a brand-new link, title, aria-label, and rel can't be set until a second edit. May be intentional, but worth confirming.

---

5. VTL nested double quotes in aria-label getter (VM_global_library.vm line 32)

#if($mark.attrs.get("aria-label"))aria-label"))}"#end

The inner "aria-label" string literal is nested inside the outer HTML attribute double-quote context. Depending on the Velocity engine version, the nested quotes may terminate the outer attribute string prematurely. Use single quotes (get('aria-label')) or a #set temp variable to be safe.

---

Minor / Spec

• Copilot's concern about targetOptions/relOptions being protected is a false positive — both are public fields (no access modifier) in the component class, accessible from tests without issue.
• No test for saveLinkAttributes() early-return when existingLinkUrl() is null.
• No test for the image node code path in addLinkToNode().

[Copilot]

Pull request overview

This PR enhances dotCMS’s block editor link editing and rendering by adding support for additional HTML/accessibility attributes (title, aria-label, rel) and exposing them in the link editor popover UI, with accompanying unit tests.

Changes:

• Extend TipTap Link mark configuration to parse/render title, aria-label, and rel.
• Update link editor popover UI/logic to edit target, title, aria-label, and rel, including an “Advanced” section.
• Persist/render the new attributes in server-side Velocity rendering and the Angular SDK renderer; add unit tests for the new behavior.

Reviewed changes

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

Show a summary per file

File	Description
dotCMS/src/main/webapp/WEB-INF/velocity/VM_global_library.vm	Adds title/aria-label/rel attributes to server-side rendered anchor tags.
core-web/libs/sdk/angular/src/lib/components/dotcms-block-editor-renderer/blocks/text.component.ts	Adds attribute bindings so rendered links include title/aria-label/rel.
core-web/libs/block-editor/src/lib/elements/dot-bubble-menu/components/dot-link-editor-popover/dot-link-editor-popover.component.ts	Adds signals/options and applies extended link attributes via setLink.
core-web/libs/block-editor/src/lib/elements/dot-bubble-menu/components/dot-link-editor-popover/dot-link-editor-popover.component.html	Reworks the popover UI to use selects and an Advanced section for extra attributes.
core-web/libs/block-editor/src/lib/elements/dot-bubble-menu/components/dot-link-editor-popover/dot-link-editor-popover.component.css	Updates styles to match the new layout/controls.
core-web/libs/block-editor/src/lib/elements/dot-bubble-menu/components/dot-link-editor-popover/dot-link-editor-popover.component.spec.ts	Adds unit tests covering initialization, persistence, and advanced-section behavior.
core-web/libs/block-editor/src/lib/components/dot-block-editor/dot-block-editor.component.ts	Extends TipTap Link mark to persist title/aria-label/rel in JSON/DOM.

[claude]

Rollback safety analysis complete. All 7 changed files are frontend-only, additive changes. No unsafe categories matched. Label AI: Safe To Rollback has been applied.