Make anchor behave like native anchor when contenteditable

[m-akinc]

Pull Request

🤨 Rationale

Fixes #1502

👩‍💻 Implementation

By design, the content-editable state is not inherited across the shadow boundary, but that is really what we want. To mimic this, I introduced a new wrapper div* around the native anchor element that we can set contenteditable on, so that the native anchor behaves as we want. Ideally, we would set it based on the value of isContentEditable of the host nimble-anchor. However, reacting to changes in the host's isContentEditable state is a problem. isContentEditable is a read-only property that is implemented by walking the ancestry chain until an elmement with contenteditable set is found. There is no practical way to detect changes to this value. We will instead require that clients explicitly set contenteditable on the nimble-anchor whenever it is inside a content-editable area. We can reflect the value of that attribute to the wrapper div.

*Note that the new wrapper div is necessary, because if we instead set contenteditable directly on the native anchor, it behaves differently (than when it is contained by a content-editable element): it remains focusable.

🧪 Testing

Manually tested in Storybook, and wrote new unit tests.

✅ Checklist

• I have updated the project documentation to reflect my changes or determined no changes are needed.

[m-akinc]

@atmgrifter00 could I get a buddy on this?

[rajsite]

Just a thought that occurred. In the future if we find ourselves having to do more with contenteditable we should treat it like lang and dir as a DesignToken that has to be configured on theme provider / DesignToken for nimble to be aware.