feat(Tabs): replace mobile dropdown tabs with overflow nav buttons #6410

emyarod · 2020-07-08T01:07:09Z

This PR removes the dropdown tabs variant at small screen sizes and replaces it with a scrollable tab list and overflow nav buttons. Light component variants are also introduced. The overflow indicator fade effect is similar to the modal body and code snippet overflow indicator fade effect (and faces the same limitations when using CSS custom properties, and the same limitations with transparent gradients in Safari #4769)

Changelog

New

scrollable tab list with overflow navigation buttons
light tabs
light container tabs

Removed

mobile dropdown tabs variant

Testing / Reviewing

Confirm the overflow tabs and overflow container tabs match the component spec in visuals and behavior. The component should be navigable with the keyboard and with the mouse. When using the overflow nav buttons, reaching the end of the tab list will hide the overflow nav button at that edge and move focus to the currently selected tab

emyarod · 2020-07-08T01:10:09Z

the storybook preview will depend on #6403

netlify · 2020-07-08T01:17:21Z

Deploy preview for carbon-elements ready!

Built with commit 8de39bd

https://deploy-preview-6410--carbon-elements.netlify.app

netlify · 2020-07-08T01:25:58Z

Deploy preview for carbon-components-react ready!

Built with commit 8de39bd

https://deploy-preview-6410--carbon-components-react.netlify.app

netlify · 2020-07-08T01:27:46Z

Deploy preview for carbon-elements ready!

Built with commit 44d55cb

https://deploy-preview-6410--carbon-elements.netlify.app

netlify · 2020-07-08T01:45:32Z

Deploy preview for carbon-components-react ready!

Built without sensitive environment variables with commit 44d55cb

https://deploy-preview-6410--carbon-components-react.netlify.app

aagonzales · 2020-07-08T15:57:53Z

I'm getting this error in the storybook:

tw15egan · 2020-07-08T17:32:06Z

@aagonzales should be fixed once the storybook is re-deployed, fix was just merged in 👍

aagonzales

It's looking good! Just a couple of bugs.

The disabled border is disappearing in the light variants. Using disabled-02 won't work because it will actually make it higher contrast than the other unselected line. Let's update the disabled border-bottom to keep using ui-03 like the unselected tabs.
Container tabs label spacing is off. The label should be vertically centered in the tab.
- As is
- To be
Is there anything we can do about the scroll bar showing up when using the keyboard and when you click the arrow?

emyarod · 2020-07-09T17:31:40Z

locally I couldn't reproduce the container tab label issue but I think I resolved it in storybook. the light disabled tabs should now have the updated color token. as for the scroll bar issue, I'm not sure what we can do about that especially since it also changes depending on the user's operating system etc.

aagonzales

Looks good! 🎉

joshblack · 2020-07-14T18:39:53Z

Running into some weird situations with the scrollbar 🤔 To reproduce, I have a mouse connected (or scrollbars always visible) and am trying to drag across

Also ran into some issues with navigating with arrow keys, seems like it may cut off the label potentially of the tab that is focused:

emyarod · 2020-07-14T19:22:51Z

the mouse scrollbar issue is probably due to the component width changing when the overflow button is rendered, not sure why it is only present for mouse but I may have to check somehow if the user is scrolling with scroll wheel / track pad versus dragging the scroll bar

the auto scroll on focus is only implemented for the first and last tabs currently but I can look into recalculating scroll position for every navigation action

dakahn · 2020-07-14T20:47:43Z

packages/react/src/components/Tabs/Tabs.js

+        <div
+          {...other}
+          className={classes.tabs}
+          role={role}


Do we need this role="nav"? Having the tabs in a tablist should be enough as far as roles are concerned unless there's something I'm missing.

this is carried over from the existing implementation (carbon-design-system/carbon-components-react#2318). what is the recommendation here?

Just took a look at our design guidance for tabs

If the tabs are 'default' then the nav role makes sense actually. If it's a 'container' version then we can follow the APG guidance and leave it out. If that's a pain in the neck having the nav role in there isn't a blocker. Since it reads and operates fine, just a little wonky and verbose in JAWS.

Yes, please take out the nav for the 'container' Tabs. See: #2272

I'm not quite sure what 'default' Tabs are, but typically you would want to leave landmark design, like adding a nav, main, etc, up to the page author. (i.e. I think the nav should probably be taken out of 'default' Tabs, too).

dakahn · 2020-07-14T20:49:50Z

packages/react/src/components/Tabs/Tabs.js

+          className={classes.tabs}
+          role={role}
+          onScroll={this.handleScroll}>
+          <button


these overflow buttons should be aria-labeled

when using JAWS/NVDA/VoiceOver to navigate the tablist with these buttons the tabs (and their selection) isn't announced. Maybe an aria-live would help here?

during testing only the 'rendered when selected' tab is read when selected, which makes sense since the DOM is being updated. Unless there's something I'm forgetting we probably want the tab panels to be read when the tab is selected in the tablist. Like mentioned above aria-live in conjunction with aria-atomic could be cool here.

Worth noting as well here -- and maybe something we document somewhere -- is that NVDA and VO totally ignore the overflow buttons altogether and just let the user access the whole tablist. This seems like what we want (so of course JAWS doesn't do that lol)

Not a blocker, just wanted to note that here for future docs

just FYI we can add aria-live to the tab content container by default but the user can render any content they would like so we won't be able to account for that

Before you code any live regions, please watch Sarah Higley’s Live Regions talk. :)

I won't be adding that attribute, due to the users ultimately having control over the tab content as I mentioned previously!

dakahn · 2020-07-14T20:59:30Z

packages/react/src/components/Tabs/Tabs.js

+              this.handleOverflowNavButtonClick(event, { direction: 1 })
+            }>
+            <ChevronRight16 />
+          </button>
        </div>
        {tabContentWithProps}


Overflow tabpanel content is always read by my readers -- even if it isn't expanded. We could either fix that and have text read truncated and call out the expand button, or hide the button (consider it only a visual affordance) and just have screen reader users have immediate access to all the tab panel content. 🤔

The as-is is kinda weird in that the screen reader user can read the whole panel, and then sees the expand button that technically does nothing for them.

this behavior is also carried over from the existing non mobile tabs. given that mentioned a couple of options, what would be the recommendation here?

is truly truncating the text -- not just visually an option? If not we could just set aria-hidden on the show more button

by "show more button" are you referring to the overflow buttons? if so, would aria-hidden clash with the suggestion to add aria-labels above?

Oh, I meant the show more button for the tab panel content.

that's part of the code snippet and is separate from the tabs component

Ah, of course!

dakahn · 2020-07-14T21:10:25Z

Just a general question for the review team here -- are we testing on mobile? I have an Android and can test there if that's helpful. @tw15egan @aagonzales

aagonzales · 2020-07-14T21:11:47Z

Ha what a logical question @dakahn. No i didn't actually try it on a mobile device but I will now!

tw15egan · 2020-07-14T21:12:23Z

@dakahn I usually test mobile in-browser unless it's a mobile-specific fix. Will verify on a device with this one 👍

tw15egan

👍 ✅ 🎉

aagonzales

Skeleton looks good now!

cal-smith · 2020-09-08T22:22:37Z

FYI This ended up being a breaking change - Really would have appreciated a deprecation notice on the bx--tabs-trigger. Fixing this on our side (Angular) also means we would end up breaking users on older Carbon minor releases, so I'm not sure if there's an easy path forward here, outside of adding some slightly hacky styles.

…ttons (carbon-design-system#6410)" This reverts commit cdc96da.

emyarod added status: ready for review 👀 status: visual review 🔍 labels Jul 8, 2020

emyarod requested a review from aagonzales July 8, 2020 01:07

emyarod requested review from a team as code owners July 8, 2020 01:07

ghost requested review from dakahn and tw15egan July 8, 2020 01:07

aagonzales requested changes Jul 8, 2020

View reviewed changes

emyarod force-pushed the 4758-xs-tabs branch 3 times, most recently from 544de88 to 1264bc5 Compare July 9, 2020 17:30

emyarod requested a review from aagonzales July 9, 2020 17:32

emyarod force-pushed the 4758-xs-tabs branch from 1264bc5 to baafe1c Compare July 9, 2020 17:45

aagonzales approved these changes Jul 9, 2020

View reviewed changes

jeanservaas mentioned this pull request Jul 10, 2020

Exploring Container tabs effect on overall page styling. #5490

Closed

2 tasks

emyarod force-pushed the 4758-xs-tabs branch from baafe1c to 6b2cdeb Compare July 10, 2020 17:58

dakahn suggested changes Jul 14, 2020

View reviewed changes

emyarod added 5 commits August 17, 2020 12:37

chore: rebase

29580d3

chore: format

0bfce6b

feat(Tabs): place focus on opposite nav button when edge reached

d34165a

chore: resolve ESLint errors

c957ae2

docs(Tabs): update story format

2aeec77

emyarod force-pushed the 4758-xs-tabs branch from 09c9f7f to 11d17a9 Compare August 17, 2020 17:37

fix(tabs): update skeleton state

f4787ea

emyarod force-pushed the 4758-xs-tabs branch from 11d17a9 to f4787ea Compare August 17, 2020 19:03

tw15egan approved these changes Aug 17, 2020

View reviewed changes

Merge branch 'master' into 4758-xs-tabs

e56eafd

emyarod requested a review from aagonzales August 27, 2020 14:52

aagonzales approved these changes Aug 27, 2020

View reviewed changes

emyarod added status: ready to merge 🎉 and removed status: ready for review 👀 status: visual review 🔍 labels Aug 27, 2020

kodiakhq bot and others added 3 commits August 27, 2020 19:26

Merge branch 'master' into 4758-xs-tabs

146c4e0

Merge branch 'master' into 4758-xs-tabs

b33cd4a

Merge branch 'master' into 4758-xs-tabs

44d55cb

kodiakhq bot merged commit cdc96da into carbon-design-system:master Aug 27, 2020

emyarod deleted the 4758-xs-tabs branch August 28, 2020 14:35

huineng mentioned this pull request Sep 7, 2020

(Scrollable Tabs) Issues with newly released carbon v10.19.0 carbon-design-system/carbon-components-angular#1497

Closed

cal-smith mentioned this pull request Sep 9, 2020

10.19 broke tab styles #6798

Closed

emyarod added a commit to emyarod/carbon that referenced this pull request Sep 9, 2020

Revert "feat(Tabs): replace mobile dropdown tabs with overflow nav bu…

8eea5f5

…ttons (carbon-design-system#6410)" This reverts commit cdc96da.

emyarod added a commit to emyarod/carbon that referenced this pull request Sep 9, 2020

Revert "feat(Tabs): replace mobile dropdown tabs with overflow nav bu…

0a95cc0

…ttons (carbon-design-system#6410)" This reverts commit cdc96da.

emyarod added a commit to emyarod/carbon that referenced this pull request Sep 9, 2020

Revert "feat(Tabs): replace mobile dropdown tabs with overflow nav bu…

c6c2d5d

…ttons (carbon-design-system#6410)" This reverts commit cdc96da.

emyarod added a commit to emyarod/carbon that referenced this pull request Sep 18, 2020

Revert "feat(Tabs): replace mobile dropdown tabs with overflow nav bu…

b5ce813

…ttons (carbon-design-system#6410)" This reverts commit cdc96da.

emyarod added a commit to emyarod/carbon that referenced this pull request Sep 28, 2020

Revert "feat(Tabs): replace mobile dropdown tabs with overflow nav bu…

126f1b2

…ttons (carbon-design-system#6410)" This reverts commit cdc96da.

emyarod mentioned this pull request Sep 29, 2020

feat(Tabs): create scrollable Tabs variant #6928

Merged

apattni mentioned this pull request Feb 3, 2021

Support for scrolling tabs with overflow nav buttons carbon-design-system/carbon-components-angular#1724

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(Tabs): replace mobile dropdown tabs with overflow nav buttons #6410

feat(Tabs): replace mobile dropdown tabs with overflow nav buttons #6410

emyarod commented Jul 8, 2020

emyarod commented Jul 8, 2020

netlify bot commented Jul 8, 2020

netlify bot commented Jul 8, 2020

netlify bot commented Jul 8, 2020 •

edited

Loading

netlify bot commented Jul 8, 2020 •

edited

Loading

aagonzales commented Jul 8, 2020

tw15egan commented Jul 8, 2020

aagonzales left a comment

emyarod commented Jul 9, 2020

aagonzales left a comment

joshblack commented Jul 14, 2020 •

edited

Loading

emyarod commented Jul 14, 2020

dakahn Jul 14, 2020

emyarod Jul 14, 2020

dakahn Jul 14, 2020

carmacleod Jul 31, 2020

dakahn Jul 14, 2020

dakahn Jul 14, 2020 •

edited

Loading

emyarod Jul 21, 2020

carmacleod Jul 31, 2020

emyarod Aug 3, 2020

dakahn Jul 14, 2020 •

edited

Loading

emyarod Jul 14, 2020

dakahn Jul 14, 2020 •

edited

Loading

emyarod Jul 21, 2020

dakahn Jul 22, 2020

emyarod Jul 22, 2020

dakahn Jul 22, 2020

dakahn commented Jul 14, 2020

aagonzales commented Jul 14, 2020

tw15egan commented Jul 14, 2020

tw15egan left a comment

aagonzales left a comment

cal-smith commented Sep 8, 2020 •

edited

Loading

feat(Tabs): replace mobile dropdown tabs with overflow nav buttons #6410

feat(Tabs): replace mobile dropdown tabs with overflow nav buttons #6410

Conversation

emyarod commented Jul 8, 2020

Changelog

Testing / Reviewing

emyarod commented Jul 8, 2020

netlify bot commented Jul 8, 2020

netlify bot commented Jul 8, 2020

netlify bot commented Jul 8, 2020 • edited Loading

netlify bot commented Jul 8, 2020 • edited Loading

aagonzales commented Jul 8, 2020

tw15egan commented Jul 8, 2020

aagonzales left a comment

Choose a reason for hiding this comment

emyarod commented Jul 9, 2020

aagonzales left a comment

Choose a reason for hiding this comment

joshblack commented Jul 14, 2020 • edited Loading

emyarod commented Jul 14, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dakahn Jul 14, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dakahn Jul 14, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dakahn Jul 14, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dakahn commented Jul 14, 2020

aagonzales commented Jul 14, 2020

tw15egan commented Jul 14, 2020

tw15egan left a comment

Choose a reason for hiding this comment

aagonzales left a comment

Choose a reason for hiding this comment

cal-smith commented Sep 8, 2020 • edited Loading

netlify bot commented Jul 8, 2020 •

edited

Loading

netlify bot commented Jul 8, 2020 •

edited

Loading

joshblack commented Jul 14, 2020 •

edited

Loading

dakahn Jul 14, 2020 •

edited

Loading

dakahn Jul 14, 2020 •

edited

Loading

dakahn Jul 14, 2020 •

edited

Loading

cal-smith commented Sep 8, 2020 •

edited

Loading