RocketCommunicationsInc / astro

Astro UXDS is a collection of guidelines, patterns and components for designing space-based user interface applications.
https://astrouxds.com
Other
113 stars 25 forks source link

fix(rux-tabs) fix some keyboard functionality #1221

Closed kiley-mitti closed 1 year ago

kiley-mitti commented 1 year ago

Brief Description

Rux-tabs have been pretty well inextricably linked to rux-tab-panels. So much so that in order to run _addTabs() after the initial connection, rux-tabs needs to hear a 'ruxregisterpanels' event. This is fine, unless you're not using panels. For example, in React it sometimes makes sense to pull in tabs to change certain states but not explicitly set panels. example

This PR runs _addTabs on rux-tabs slots change since all addTabs does is look through rux-tabs and put every rux-tab found into an array so that keyboard commands can be run on them.

Secondarily, I've added a function that sets the first tab item to tabindex=0 when no tab is set to 'selected'. this way you can tab back into rux-tabs even when there is no explicitly set rux-tab.

JIRA Link

ASTRO-6828

Related Issue

General Notes

Motivation and Context

I've seen multiple apps and wireframes where tabs are used separately from explicitly called tab panels. The upcoming FDS app is probably going to be another example of this where tabs are in the GSB but we won't necessarily want to render all tabs at once and then swap hidden/visable. That is a strategy but it's not necessarily the one devs reach for.

Issues and Limitations

Types of changes

Checklist

changeset-bot[bot] commented 1 year ago

🦋 Changeset detected

Latest commit: b02041e1c1b23eb78b2d511c70020f876559ba2b

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

netlify[bot] commented 1 year ago

Deploy Preview for astro-stencil ready!

Name Link
Latest commit b02041e1c1b23eb78b2d511c70020f876559ba2b
Latest deploy log https://app.netlify.com/sites/astro-stencil/deploys/64f8816484a47600086bd82d
Deploy Preview https://deploy-preview-1221--astro-stencil.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] commented 1 year ago

Deploy Preview for astro-preview ready!

Name Link
Latest commit b02041e1c1b23eb78b2d511c70020f876559ba2b
Latest deploy log https://app.netlify.com/sites/astro-preview/deploys/64f881643914ae00087c8bc5
Deploy Preview https://deploy-preview-1221--astro-preview.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.