<uui-key> - Would <kbd> be more suitable?

[leekelleher]

👋 Hello! I've been exploring the UI Library (Storybook), I'm liking it. Great work!

I'd like to get involved, but want to start small, so an easy question first. 😃

With the <uui-key> component, (source link), it appears to be presentational rather than functional.

Would the native <kbd> element be more suitable?

With the <uui-keyboard-shortcut> component, it'd be...

<uui-keyboard-shortcut>
  <kbd>CTRL</kbd> + <kbd>S</kbd>
</uui-keyboard-shortcut>

[leekelleher]

It dawned on me that with using a custom components it can be styled, so the <uui-key> would have it's own styles applied to itself (and nothing else). (Apologies, this may be me getting my dinosaur brain up to speed with web-components). 🙏

OK, then <uui-key> makes sense to me now. About the <kbd> element, I'm wondering if there are semantic benefits in using it within the component's markup?

[julczka]

Hi Lee!
Nice to meet you and I'm super happy that you like the UI Library.
It never even crossed my mind that there is a native element for that. HTML is really full of surprises 😁
I was thinking the same - if we use the native element we'd loose the benefit of scoped styles that custom elements provide.
I don't know if there are any accessibility benefits coming from using the native one but that would probably be the only factor to speak for using it instead of the our custom one. I'll take a look into it!

[leekelleher]

Thanks @julczka, nice to meet you too. 👋

HTML is really full of surprises

Maybe my dinosaur brain might come in helpful. 🦕🤔😆

I don't know if there are any accessibility benefits coming from using the native one but that would probably be the only factor to speak for using it instead of the our custom one. I'll take a look into it!

I had a look too, <kbd> doesn't appear to have any special treatment in terms of accessibility.
ref: https://stackoverflow.com/questions/15190247/does-the-kbd-element-help-at-all-in-terms-of-accessibility

I'll close off this issue. 👍