Allow programatically focusing auro-hyperlink

[geoffrich]

Is your feature request related to a problem? Please describe.

I am unable to call focus() on an auro-hyperlink.

Describe the solution you'd like

Implement focus on auro-hyperlink. There's an example in auro-button.

Describe alternatives you've considered

None.

Additional context

n/a

[blackfalcon]

Here is what I do know. Not all elements are focusable. E.g. the :focus selector is allowed on elements that accept keyboard events or other user inputs. That means you need to drill into the anchor tag inside the element.

Also, there is no UI for hyperlink currently for just the :focus pseudo selector.

In the demo for hyperlink, if I were to add this...

function getFocus() {
  let foo = document.getElementById("foo").shadowRoot.querySelector('a');
  foo.focus();
}

then

<button onclick="getFocus()">click me for focus</button>

lastly

.hyperlink:focus {
    color: orange !important;
  }

I can get the following UI.

So this is supported, but what is it you are not getting from what you need to do?

[geoffrich]

The issue with that approach is that it requires the developer to query inside the shadowRoot, which I usually think of as being part of the component's private API. It's probably a reasonable assumption that auro-hyperlink contains an a tag, but I don't think this pattern is something we want to encourage.

This isn't a new pattern. We've done the same thing for [auro-button](https://github.com/AlaskaAirlines/auro-button/blob/ac72585e1df6fbd48a6c80ee024919c707862b9a/src/auro-button-light.js?q=focus()#L39-L41) and [auro-input](https://github.com/AlaskaAirlines/auro-input/blob/a13630541e129ca3bb1f48bc5ce31bf5abdd74a8/src/base-input.js?q=focus()#L269-L271). It allows developers to call focus on those elements just like they would a normal DOM <button> or <input>, without needing to know anything about the element's internals.

[blackfalcon]

The addition of the code addresses a focus, but there is a question of the UI feedback that needs to be resolved.

[blackfalcon]

:tada: This issue has been resolved in version 3.1.0 :tada:

The release is available on:

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

Your semantic-release bot :package::rocket: