feat: add focus method

[geoffrich]

Alaska Airlines Pull Request

Fixes #124

Summary:

Adds a focus method to auro-hyperlink so that it's possible to do document.querySelector('auro-hyperlink').focus() without traversing the shadow root. This is the same implementation as auro-button.

The hyperlink's focus state will follow focus visible rules. If you are navigating with a keyboard when the hyperlink is programmatically focused, then the focus state will be visible. If you instead click to trigger the focus state, then the focus state will not be visible.

Navigating with keyboard and programmatically focusing the hyperlink (visible focus state)

See the below image -- the button is tabbed to with the keyboard and triggered with enter. The handler calls focus on the hyperlink, showing the focus state.

Type of change:

Please delete options that are not relevant.

• [x] New capability

Checklist:

• [x] My update follows the CONTRIBUTING guidelines of this project
• [x] 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]

The demo gif is from the old demo page, since I initially branched off of master. I've since rebased the change onto main.

[blackfalcon]

:tada: This PR is included in version 3.1.0 :tada:

The release is available on:

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

Your semantic-release bot :package::rocket: