UX/UI issue on All Traffic pie chart tabs when in gathering state

Bug Description

On a site that is in gathering state. I noticed a UX/UI issue on the All traffic widget on main and entity dashboard. At the top of the pie chart, tabs appear active and when the user clicks on them, nothing happens. It would be better if we can make these tabs look disabled in this state.

https://user-images.githubusercontent.com/73545194/159525757-0a793a50-54e6-48da-9290-05b6ec29cea1.mp4

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• When in “gathering data” state, the tabs in the “All Traffic” widget should appear disabled.
• The cursor should also change to the disabled cursor when hovering over them.

Implementation Brief

• Using assets/js/modules/analytics/components/dashboard/DashboardAllTrafficWidget/DimensionTabs.js,
  • Check if there is zero data by querying the analytics data store via the hasZeroData selector.
  • Update the Tab and Select components to be disabled by adding whether hasZeroData is true or gatheringData [existing] is true.
• Using assets/sass/widgets/_googlesitekit-widget-analyticsAllTraffic.scss,
  • Add the following styles for:
    • .mdc-tab[disabled]:
      • cursor: default;
    • .mdc-tab[disabled] .mdc-tab__ripple:
      • display: none;
    • .mdc-tab[disabled] .mdc-tab__text-label:
      • opacity: 0.6;
      • color: $c-jumbo;
    • .mdc-tab--active[disabled] .mdc-tab-indicator__content--underline
      • background-color: $c-jumbo;
      • opacity: 0.6;

Test Coverage

• No new tests to be added.

QA Brief

• Visit the Site Kit dashboard with Analytics connected in a gathering data state.
• Try to interact with the tabs here:
• They should not be accessible by either keyboard navigation nor mouse input; they should not respond to focus/hover states and essentially be totally disabled.

Also try the above steps, with the zeroDataStates enabled and a site with “zero data” for Analytics. The same outcome should be observed, eg. tabs that are entirely disabled.

Also test both states on mobile and ensure the dropdown is disabled, eg:

The story at https://google.github.io/site-kit-wp/storybook/develop/?path=/story/analytics-module-components-dashboard-all-traffic-widget--zero-data-zerodatastates-enabled should also have disabled tabs instead of tabs that can be interacted with, as this issue also disables the tabs when in a zero data state.

Changelog entry

• Disable All Traffic pie chart tabs when in gathering or zero data state.

[asvinb]

@tofumatt I checked and when the tabs are disabled, they are not tabb-able. I’ve updated the IB, can you review?

[tofumatt]

I think disabling them here is the best compromise, but we do need to make sure they’re also not interact-able at all, including for keyboard users. So I think the IB is missing removing them from the tab order because they should have no interaction when activated. This probably means ensuring clicking on them doesn’t trigger the tab order changing—is this already the case?

The tabs currently move when there is zero data:

But we should ensure (with a tabIndex="-1" and onClick={undefined} that nothing happens when users click/activate these, even when they appear disabled.