Generator: focus-visible nested polyfill support

[blackfalcon]

Alaska Airlines Pull Request

This PR will add new documentation and demo support for how the focus-visible pseudo class works when natively supported and when the polyfill is in use.

It has been discovered that the process from which to support nested elements and the polyfill is causing other issues and will not be included within the scope of this PR.

Resolves: #69

Type of change:

Please delete options that are not relevant.

• New capability
• Revision of an existing capability
• Infrastructure change (automation, etc.)
• Other (please elaborate)

Checklist:

• My update follows the CONTRIBUTING guidelines of this project
• I have performed a self-review of my own update

By submitting this Pull Request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

Pull Requests will be evaluated by their quality of update and whether it is consistent with the goals and values of this project. Any submission is to be considered a conversation between the submitter and the maintainers of this project and may require changes to your submission.

Thank you for your submission!

-- Auro Design System Team

[geoffrich]

Going to investigate further on Monday, but it seems that JSDOM throws an error when the polyfill is applied to a shadow root. I want to see if there's a way to mitigate this before adding it to the generator.

[blackfalcon]

Marked this issue as BLOCKED until I hear back from @geoffrich

Going to investigate further on Monday...

[geoffrich]

Working on it. Trying to make a minimal JSDOM repro.

[geoffrich]

Okay, turns out this is not a false alarm. Loading the polyfill in the constructor applies an attribute to the element, and this is a violation of the spec for custom element constructors:

The element must not gain any attributes or children, as this violates the expectations of consumers who use the createElement or createElementNS methods.

I think we need to move the polyfill loading to connectedCallback instead.

@blackfalcon I can apply the changes first in auro-button and then to this WC-Generator branch once everything works. I should be able to complete that work tomorrow.

[geoffrich]

See AlaskaAirlines/auro-button#112 for the associated button issue.

[blackfalcon]

I am thinking that the document update stays, but the code will not. And the days of supporting this polyfill are numbered.

[blackfalcon]

@geoffrich the scope of this PR has been reduced to only document and style changes. The issue related to nested elements is still an open discussion.

[AuroDesignSystem]

🎉 This PR is included in version 3.0.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀