Closed geoffrich closed 2 years ago
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?
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.
The addition of the code addresses a focus, but there is a question of the UI feedback that needs to be resolved.
:tada: This issue has been resolved in version 3.1.0 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
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