feat(#3407): add prop to tabs to not stack on mobile, and skip focus on initial load by twjeffery · Pull Request #3408 · GovAlta/ui-components

twjeffery · 2026-02-09T21:38:16Z

Summary

Add stackOnMobile prop to keep default tabs horizontal on mobile
Skip focus on initial page load to avoid visible focus ring when initialTab is set
Remove tabpanel from tab order for segmented variant (tabindex=-1)
Remove focus outline on segmented tabpanel (no content to focus)

Test plan

Run playground: npm run serve:prs:react → navigate to "V2 Tabs" in features
Test 1: Reload page - no focus ring on "Second (initial)" tab
Test 2: Default tabs stack on mobile (resize browser)
Test 3: Default tabs with stackOnMobile={false} stay horizontal on mobile
Test 4: Segmented tabs have no tabpanel focus when tabbing
Test 5: Segmented tabs stay horizontal on mobile by default

Closes

Closes #3407
Closes #2996
Closes #3268

chrisolsen · 2026-02-17T21:02:08Z

+  customElement={{
+    tag: "goa-tabs",
+    props: {
+      stackOnMobile: { attribute: "stack-on-mobile", type: "String" },


This should be a boolean type

chrisolsen · 2026-02-17T21:35:50Z

+  /** Visual style variant. "segmented" shows pill-style tabs with animation. */
  export let variant: "default" | "segmented" = "default";
+  /** When true, tabs stack vertically on mobile. Set to "false" to keep horizontal layout on all screen sizes. */
+  export let stackOnMobile: string = "true";


I am not sure a prop name like this is the best idea. It comes off like a hack to make something work.

Instead I would suggest something like orientation that accepts values of auto | horizontal | vertical. auto would be the default value that changes the orientation to vertical for mobile devices (current state). Setting it to horizontal would provide the functionality that this PR intended, and vertical would allow teams to use vertical tabs if the so desire (in the case that there are too many that don't fit horizontally on a normal desktop)

Good idea - I've already refactored stackOnMobile to orientation: auto | horizontal in this PR.

netlify · 2026-02-18T17:07:46Z

✅ Deploy Preview for goa-design-2 ready!

Name	Link
🔨 Latest commit	`319008f`
🔍 Latest deploy log	https://app.netlify.com/projects/goa-design-2/deploys/699e142de766ec000876d4e2
😎 Deploy Preview	https://deploy-preview-3408--goa-design-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

chrisolsen · 2026-02-18T20:41:33Z

+  /** Visual style variant. "segmented" shows pill-style tabs with animation. */
  export let variant: "default" | "segmented" = "default";
+  /** Tab layout orientation. "auto" stacks vertically on mobile, "horizontal" keeps horizontal on all screen sizes. */
+  export let orientation: string = "auto";


For clarity instead of string, use "auto" | "horizontal"

chrisolsen · 2026-02-24T20:44:44Z

@vanessatran-ddi looks like you need to rebase. Let me know via slack when you push it.

Co-Authored-By: Vanessa Tran <vanessa.m.tran@gov.ab.ca>

chrisolsen · 2026-02-24T22:48:38Z

🎉 This PR is included in version 1.41.0-dev.7 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-02-24T22:49:03Z

🎉 This PR is included in version 1.11.0-dev.3 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-02-24T22:49:30Z

🎉 This PR is included in version 6.11.0-dev.5 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-02-24T22:49:56Z

🎉 This PR is included in version 4.11.0-dev.6 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-03-31T23:24:41Z

🎉 This PR is included in version 2.0.0-next.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-03-31T23:33:05Z

🎉 This PR is included in version 2.0.0-next.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-03-31T23:41:30Z

🎉 This PR is included in version 7.0.0-next.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-03-31T23:50:09Z

🎉 This PR is included in version 5.0.0-next.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-04-01T00:33:35Z

🎉 This PR is included in version 2.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-04-01T00:41:59Z

🎉 This PR is included in version 7.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-04-01T00:50:21Z

🎉 This PR is included in version 5.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

twjeffery changed the title ~~feat(#3407): add stackOnMobile prop and fix segmented tabpanel focus~~ feat(#3407): add prop to tabs to not stack on mobile, and skip focus on initial load Feb 9, 2026

twjeffery requested a review from vanessatran-ddi February 9, 2026 21:51

vanessatran-ddi reviewed Feb 12, 2026

View reviewed changes

Comment thread libs/react-components/src/experimental/tabs/tabs.tsx Outdated

vanessatran-ddi reviewed Feb 12, 2026

View reviewed changes

Comment thread libs/react-components/src/lib/tabs/tabs.tsx Outdated

vanessatran-ddi marked this pull request as draft February 13, 2026 01:03

vanessatran-ddi force-pushed the tom/tabs-fixes branch 2 times, most recently from 779be6d to 5b1bc51 Compare February 17, 2026 17:51

vanessatran-ddi marked this pull request as ready for review February 17, 2026 18:14

vanessatran-ddi self-requested a review February 17, 2026 18:15

vanessatran-ddi assigned twjeffery and vanessatran-ddi Feb 17, 2026

vanessatran-ddi requested review from ArakTaiRoth, chrisolsen and vanessatran-ddi and removed request for vanessatran-ddi February 17, 2026 18:15

chrisolsen reviewed Feb 17, 2026

View reviewed changes

ArakTaiRoth reviewed Feb 17, 2026

View reviewed changes

vanessatran-ddi force-pushed the tom/tabs-fixes branch from a04a4a3 to 4f8e3a3 Compare February 18, 2026 01:01

vanessatran-ddi force-pushed the tom/tabs-fixes branch 2 times, most recently from 885e102 to a23fa2d Compare February 18, 2026 17:34

ArakTaiRoth reviewed Feb 18, 2026

View reviewed changes

Comment thread docs/src/data/configurations/tabs.ts Outdated

Comment thread docs/src/data/configurations/tabs.ts Outdated

ArakTaiRoth requested a review from chrisolsen February 18, 2026 20:21

ArakTaiRoth approved these changes Feb 18, 2026

View reviewed changes

chrisolsen reviewed Feb 18, 2026

View reviewed changes

vanessatran-ddi force-pushed the tom/tabs-fixes branch from c1f6fb4 to 82951df Compare February 18, 2026 21:14

vanessatran-ddi requested review from ArakTaiRoth and chrisolsen February 22, 2026 21:05

chrisolsen approved these changes Feb 24, 2026

View reviewed changes

feat(#3407): add orientation prop for tabs & skip focus when load

319008f

Co-Authored-By: Vanessa Tran <vanessa.m.tran@gov.ab.ca>

vanessatran-ddi force-pushed the tom/tabs-fixes branch from 82951df to 319008f Compare February 24, 2026 21:12

chrisolsen merged commit 82022fa into dev Feb 24, 2026
8 checks passed

chrisolsen deleted the tom/tabs-fixes branch February 24, 2026 21:39

chrisolsen added the released on @dev label Feb 24, 2026

chrisolsen added the released on @next label Mar 31, 2026

chrisolsen added the released Released into production. label Apr 1, 2026

Conversation

twjeffery commented Feb 9, 2026

Summary

Test plan

Closes

Uh oh!

Uh oh!

Uh oh!

chrisolsen Feb 17, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

chrisolsen Feb 17, 2026

Choose a reason for hiding this comment

Uh oh!

vanessatran-ddi Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

netlify Bot commented Feb 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for goa-design-2 ready!

Uh oh!

Uh oh!

Uh oh!

chrisolsen Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

chrisolsen commented Feb 24, 2026

Uh oh!

Uh oh!

chrisolsen commented Feb 24, 2026

Uh oh!

chrisolsen commented Feb 24, 2026

Uh oh!

chrisolsen commented Feb 24, 2026

Uh oh!

chrisolsen commented Feb 24, 2026

Uh oh!

chrisolsen commented Mar 31, 2026

Uh oh!

chrisolsen commented Mar 31, 2026

Uh oh!

chrisolsen commented Mar 31, 2026

Uh oh!

chrisolsen commented Mar 31, 2026

Uh oh!

chrisolsen commented Apr 1, 2026

Uh oh!

chrisolsen commented Apr 1, 2026

Uh oh!

chrisolsen commented Apr 1, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

netlify Bot commented Feb 18, 2026 •

edited

Loading