Make anchor behave like native anchor when contenteditable

change/@ni-nimble-components-be72d648-96c1-403d-80e8-2a68c3752207.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Make anchor behave like native anchor when contenteditable",
+  "packageName": "@ni/nimble-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/nimble-components/src/anchor/index.ts

@@ -34,6 +34,39 @@ export class Anchor extends AnchorBase {
      */
     @attr
     public appearance: AnchorAppearance;
+
+    /**
+     * @internal
+     */
+    public container!: HTMLElement;
+
+    public override connectedCallback(): void {
+        super.connectedCallback();
+        this.updateContentEditable();
+    }
+
+    /**
+     * @internal
+     * We want our anchor to behave like a native anchor when in a content-editable
+     * region, i.e. not operable or focusable. The most reliable way to achieve this is
+     * to synchronize our shadow DOM's content-editable state with that of the host.
+     * We must look at the host's read-only isContentEditable property, which factors
+     * in any inherited value. Unfortunately, there is no way for us to detect when its
+     * value has changed, so the best we can do is to re-sync on specific events.
+     * This has shortcomings, e.g. if isContentEditable goes from true to false, our
+     * anchor will remain un-tabable until a mouseenter triggers a re-sync.
+     *
+     * Ideally, proper support for contenteditable should come from FAST.
+     * I have filed bug https://github.com/microsoft/fast/issues/6870 to them.
+     * If/when it is fixed, we can remove our logic.
+     */
+    public updateContentEditable(): void {
+        if (this.isContentEditable) {
+            this.container.setAttribute('contenteditable', '');
+        } else {
+            this.container.removeAttribute('contenteditable');
+        }
+    }
 }
 
 // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.

packages/nimble-components/src/anchor/styles.ts

@@ -20,6 +20,10 @@ export const styles = css`
         font: ${linkFont};
     }
 
+    .top-container {
+        display: contents;
+    }
+
     [part='start'] {
         display: none;
     }

packages/nimble-components/src/anchor/template.ts

@@ -9,7 +9,10 @@ import type { Anchor } from '.';
 export const template: FoundationElementTemplate<
 ViewTemplate<Anchor>,
 AnchorOptions
-> = (_context, definition) => html<Anchor>`<a
+> = (_context, definition) => html<Anchor>`<div
+        ${ref('container')}
+        class="top-container"
+    ><a
         class="control"
         part="control"
         download="${x => x.download}"
@@ -40,6 +43,8 @@ AnchorOptions
         aria-owns="${x => x.ariaOwns}"
         aria-relevant="${x => x.ariaRelevant}"
         aria-roledescription="${x => x.ariaRoledescription}"
+        @mouseenter="${x => x.updateContentEditable()}"
+        @focus="${x => x.updateContentEditable()}"
         ${ref('control')}
     >${
     /* Start and End slot templates inlined to avoid extra whitespace.
@@ -74,4 +79,4 @@ AnchorOptions
             @slotchange="${x => x.handleEndContentChange()}">
             ${definition.end || ''}
         </slot
-    ></span></a>`;
+    ></span></a></div>`;

packages/nimble-components/src/anchor/tests/anchor.spec.ts

@@ -4,23 +4,7 @@ import { waitForUpdatesAsync } from '../../testing/async-helpers';
 import { fixture, Fixture } from '../../utilities/tests/fixture';
 import { getSpecTypeByNamedList } from '../../utilities/tests/parameterized';
 
-async function setup(): Promise<Fixture<Anchor>> {
-    return fixture<Anchor>(html`<nimble-anchor></nimble-anchor>`);
-}
-
 describe('Anchor', () => {
-    let element: Anchor;
-    let connect: () => Promise<void>;
-    let disconnect: () => Promise<void>;
-
-    beforeEach(async () => {
-        ({ element, connect, disconnect } = await setup());
-    });
-
-    afterEach(async () => {
-        await disconnect();
-    });
-
     it('should export its tag', () => {
         expect(anchorTag).toBe('nimble-anchor');
     });
@@ -29,66 +13,144 @@ describe('Anchor', () => {
         expect(document.createElement('nimble-anchor')).toBeInstanceOf(Anchor);
     });
 
-    it('should set the "control" class on the internal control', async () => {
-        await connect();
-        expect(element.control!.classList.contains('control')).toBe(true);
-    });
+    describe('element only', () => {
+        async function setup(): Promise<Fixture<Anchor>> {
+            return fixture<Anchor>(html`<nimble-anchor></nimble-anchor>`);
+        }
+        let element: Anchor;
+        let connect: () => Promise<void>;
+        let disconnect: () => Promise<void>;
 
-    it('should set the `part` attribute to "control" on the internal control', async () => {
-        await connect();
-        expect(element.control!.part.contains('control')).toBe(true);
-    });
+        beforeEach(async () => {
+            ({ element, connect, disconnect } = await setup());
+        });
 
-    const attributeNames: { name: string }[] = [
-        { name: 'download' },
-        { name: 'href' },
-        { name: 'hreflang' },
-        { name: 'ping' },
-        { name: 'referrerpolicy' },
-        { name: 'rel' },
-        { name: 'target' },
-        { name: 'type' },
-        { name: 'aria-atomic' },
-        { name: 'aria-busy' },
-        { name: 'aria-controls' },
-        { name: 'aria-current' },
-        { name: 'aria-describedby' },
-        { name: 'aria-details' },
-        { name: 'aria-disabled' },
-        { name: 'aria-errormessage' },
-        { name: 'aria-expanded' },
-        { name: 'aria-flowto' },
-        { name: 'aria-haspopup' },
-        { name: 'aria-hidden' },
-        { name: 'aria-invalid' },
-        { name: 'aria-keyshortcuts' },
-        { name: 'aria-label' },
-        { name: 'aria-labelledby' },
-        { name: 'aria-live' },
-        { name: 'aria-owns' },
-        { name: 'aria-relevant' },
-        { name: 'aria-roledescription' }
-    ];
-    describe('should reflect value to the internal control', () => {
-        const focused: string[] = [];
-        const disabled: string[] = [];
-        for (const attribute of attributeNames) {
-            const specType = getSpecTypeByNamedList(
-                attribute,
-                focused,
-                disabled
-            );
-            // eslint-disable-next-line @typescript-eslint/no-loop-func
-            specType(`for attribute ${attribute.name}`, async () => {
-                await connect();
+        afterEach(async () => {
+            await disconnect();
+        });
+
+        it('should set the "control" class on the internal control', async () => {
+            await connect();
+            expect(element.control!.classList.contains('control')).toBe(true);
+        });
 
-                element.setAttribute(attribute.name, 'foo');
-                await waitForUpdatesAsync();
+        it('should set the `part` attribute to "control" on the internal control', async () => {
+            await connect();
+            expect(element.control!.part.contains('control')).toBe(true);
+        });
 
-                expect(element.control!.getAttribute(attribute.name)).toBe(
-                    'foo'
+        const attributeNames: { name: string }[] = [
+            { name: 'download' },
+            { name: 'href' },
+            { name: 'hreflang' },
+            { name: 'ping' },
+            { name: 'referrerpolicy' },
+            { name: 'rel' },
+            { name: 'target' },
+            { name: 'type' },
+            { name: 'aria-atomic' },
+            { name: 'aria-busy' },
+            { name: 'aria-controls' },
+            { name: 'aria-current' },
+            { name: 'aria-describedby' },
+            { name: 'aria-details' },
+            { name: 'aria-disabled' },
+            { name: 'aria-errormessage' },
+            { name: 'aria-expanded' },
+            { name: 'aria-flowto' },
+            { name: 'aria-haspopup' },
+            { name: 'aria-hidden' },
+            { name: 'aria-invalid' },
+            { name: 'aria-keyshortcuts' },
+            { name: 'aria-label' },
+            { name: 'aria-labelledby' },
+            { name: 'aria-live' },
+            { name: 'aria-owns' },
+            { name: 'aria-relevant' },
+            { name: 'aria-roledescription' }
+        ];
+        describe('should reflect value to the internal control', () => {
+            const focused: string[] = [];
+            const disabled: string[] = [];
+            for (const attribute of attributeNames) {
+                const specType = getSpecTypeByNamedList(
+                    attribute,
+                    focused,
+                    disabled
                 );
-            });
+                // eslint-disable-next-line @typescript-eslint/no-loop-func
+                specType(`for attribute ${attribute.name}`, async () => {
+                    await connect();
+
+                    element.setAttribute(attribute.name, 'foo');
+                    await waitForUpdatesAsync();
+
+                    expect(element.control!.getAttribute(attribute.name)).toBe(
+                        'foo'
+                    );
+                });
+            }
+        });
+    });
+
+    describe('inner anchor isContentEditable', () => {
+        async function setup(): Promise<Fixture<HTMLDivElement>> {
+            return fixture<HTMLDivElement>(
+                html`<div><nimble-anchor></nimble-anchor></div>`
+            );
         }
+        let element: HTMLDivElement;
+        let anchor: Anchor;
+        let connect: () => Promise<void>;
+        let disconnect: () => Promise<void>;
+
+        beforeEach(async () => {
+            ({ element, connect, disconnect } = await setup());
+            anchor = element.firstElementChild as Anchor;
+        });
+
+        afterEach(async () => {
+            await disconnect();
+        });
+
+        it('is false by default', async () => {
+            await connect();
+            const innerAnchor = anchor.shadowRoot!.querySelector('a')!;
+            expect(innerAnchor.isContentEditable).toBeFalse();
+        });
+
+        it('is true when container has contenteditable before connecting', async () => {
+            element.setAttribute('contenteditable', '');
+            await connect();
+            const innerAnchor = anchor.shadowRoot!.querySelector('a')!;
+            expect(innerAnchor.isContentEditable).toBeTrue();
+        });
+
+        it('is true when container gets contenteditable after connecting, then anchor gets mouseenter event', async () => {
+            await connect();
+            element.setAttribute('contenteditable', '');
+            await waitForUpdatesAsync();
+            const innerAnchor = anchor.shadowRoot!.querySelector('a')!;
+            innerAnchor.dispatchEvent(new MouseEvent('mouseenter'));
+            expect(innerAnchor.isContentEditable).toBeTrue();
+        });
+
+        it('is true when container gets contenteditable after connecting, then anchor gets focus event', async () => {
+            await connect();
+            element.setAttribute('contenteditable', '');
+            await waitForUpdatesAsync();
+            const innerAnchor = anchor.shadowRoot!.querySelector('a')!;
+            innerAnchor.dispatchEvent(new Event('focus'));
+            expect(innerAnchor.isContentEditable).toBeTrue();
+        });
+
+        it('is false when container loses contenteditable, then anchor gets mouseenter event', async () => {
+            element.setAttribute('contenteditable', '');
+            await connect();
+            element.removeAttribute('contenteditable');
+            const innerAnchor = anchor.shadowRoot!.querySelector('a')!;
+            innerAnchor.dispatchEvent(new MouseEvent('mouseenter'));
+            expect(innerAnchor.isContentEditable).toBeFalse();
+        });
     });
 });