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

core-web/libs/block-editor/src/lib/components/dot-block-editor/dot-block-editor.component.ts

@@ -670,7 +670,31 @@ export class DotBlockEditorComponent implements OnInit, OnChanges, OnDestroy, Co
             Underline,
             TextAlign.configure({ types: ['heading', 'paragraph', 'listItem', 'dotImage'] }),
             Highlight.configure({ HTMLAttributes: { style: 'background: #accef7;' } }),
-            Link.configure({ autolink: false, openOnClick: false })
+            // Extends the default Link mark with accessibility attributes (title, aria-label)
+            // and rel. These are persisted in the TipTap JSON and rendered in the editor DOM.
+            Link.extend({
+                addAttributes() {
+                    return {
+                        ...this.parent?.(),
+                        title: {
+                            default: null,
+                            parseHTML: (el) => el.getAttribute('title'),
+                            renderHTML: (attrs) => (attrs.title ? { title: attrs.title } : {})
+                        },
+                        'aria-label': {
+                            default: null,
+                            parseHTML: (el) => el.getAttribute('aria-label'),
+                            renderHTML: (attrs) =>
+                                attrs['aria-label'] ? { 'aria-label': attrs['aria-label'] } : {}
+                        },
+                        rel: {
+                            default: null,
+                            parseHTML: (el) => el.getAttribute('rel'),
+                            renderHTML: (attrs) => (attrs.rel ? { rel: attrs.rel } : {})
+                        }
+                    };
+                }
+            }).configure({ autolink: false, openOnClick: false })
         ];
     }
 

core-web/libs/block-editor/src/lib/elements/dot-bubble-menu/components/dot-link-editor-popover/dot-link-editor-popover.component.css

@@ -57,27 +57,39 @@
 }
 
 .current-link-view__icon {
-    @apply text-2xl;
+    @apply text-base text-gray-500;
 }
 
 .current-link-view__link {
-    @apply overflow-hidden text-ellipsis whitespace-nowrap max-w-[18.75rem] inline-block;
+    @apply overflow-hidden text-ellipsis whitespace-nowrap max-w-[18.75rem] inline-block text-xs;
 }
 
-.current-link-view__checkbox-container {
-    @apply flex items-center gap-3 mb-6;
+.current-link-view__actions {
+    @apply flex gap-2 mt-4 pt-4 border-t border-gray-200;
 }
 
-.current-link-view__checkbox {
-    @apply mr-1;
+.field {
+    @apply flex flex-col gap-1 mb-3;
 }
 
-.current-link-view__actions {
-    @apply flex gap-3;
+.field label {
+    @apply text-xs font-medium text-gray-600;
+}
+
+.field input {
+    @apply h-8 text-sm;
+}
+
+.toggle-advanced {
+    @apply flex items-center gap-1 text-xs font-medium text-gray-500 bg-transparent border-none cursor-pointer p-0 mb-2 hover:text-gray-700;
+}
+
+.toggle-advanced .pi {
+    @apply text-xs;
 }
 
-.current-link-view__action-button {
-    @apply w-1/2;
+.link-editor-popover__advanced {
+    @apply flex flex-col mb-1;
 }
 
 .listbox-item {

core-web/libs/block-editor/src/lib/elements/dot-bubble-menu/components/dot-link-editor-popover/dot-link-editor-popover.component.html

@@ -79,15 +79,81 @@
                     {{ existingLinkUrl() }}
                 </a>
             </div>
-            <div class="current-link-view__checkbox-container">
-                <p-checkbox
-                    [checked]="linkTargetAttribute() === '_blank'"
-                    (onChange)="updateLinkTargetAttribute($event)"
-                    [binary]="true"
-                    [inputId]="'openInNewWindow'" />
-                <label for="openInNewWindow">Open link in new window</label>
+
+            <div class="field" data-testid="link-target-field">
+                <label for="linkTarget">Target</label>
+                <p-select
+                    id="linkTarget"
+                    size="small"
+                    [(ngModel)]="linkTargetAttribute"
+                    [options]="targetOptions"
+                    optionLabel="label"
+                    optionValue="value"
+                    data-testid="link-target-select" />
             </div>
+
+            <button
+                type="button"
+                class="toggle-advanced"
+                data-testid="toggle-advanced"
+                aria-controls="advanced-section"
+                [attr.aria-expanded]="showAdvanced()"
+                (click)="showAdvanced.set(!showAdvanced())">
+                Advanced
+                <span
+                    class="pi"
+                    aria-hidden="true"
+                    [class.pi-chevron-down]="!showAdvanced()"
+                    [class.pi-chevron-up]="showAdvanced()"></span>
+            </button>
+
+            @if (showAdvanced()) {
+                <div
+                    id="advanced-section"
+                    class="link-editor-popover__advanced"
+                    data-testid="advanced-section">
+                    <div class="field">
+                        <label for="linkTitle">Title</label>
+                        <input
+                            pInputText
+                            id="linkTitle"
+                            [(ngModel)]="linkTitle"
+                            placeholder="Link title"
+                            data-testid="link-title-input" />
+                    </div>
+                    <div class="field">
+                        <label for="linkAriaLabel">Aria Label</label>
+                        <input
+                            pInputText
+                            id="linkAriaLabel"
+                            [(ngModel)]="linkAriaLabel"
+                            placeholder="Descriptive label for screen readers"
+                            data-testid="link-aria-label-input" />
+                    </div>
+                    <div class="field">
+                        <label for="linkRel">Rel</label>
+                        <p-select
+                            id="linkRel"
+                            size="small"
+                            [(ngModel)]="linkRel"
+                            [options]="relOptions"
+                            optionLabel="label"
+                            optionValue="value"
+                            [showClear]="true"
+                            placeholder="Select rel attribute"
+                            data-testid="link-rel-select" />
+                    </div>
+                </div>
+            }
+
             <div class="current-link-view__actions">
+                <p-button
+                    type="button"
+                    variant="outlined"
+                    size="small"
+                    (onClick)="saveLinkAttributes()"
+                    label="Save"
+                    data-testid="save-link-button" />
                 <p-button
                     type="button"
                     variant="outlined"
@@ -96,6 +162,7 @@
                     label="Copy Link" />
                 <p-button
                     type="button"
+                    severity="danger"
                     size="small"
                     (onClick)="removeLinkFromEditor()"
                     label="Remove Link" />