Update Analytics Dashboard time navigation to tabs

[Link2Twenty]

What type of PR is this? (check all applicable)

• Refactor
• Feature
• Bug Fix
• Optimization
• Documentation Update

Description

Move the time navigation to the more modern crayon layout, this will mean the theming stuff will work out the box.

Related Tickets & Documents

Closes #13214

QA Instructions, Screenshots, Recordings

UI accessibility concerns?

This should fix the UI accessibility issue mentioned in the original ticket

Added tests?

• Yes
• No, and this is why: old tests should still work
• I need help with writing tests

[optional] Are there any post deployment tasks we need to perform?

N/A

[optional] What gif best describes this PR or how it makes you feel?

[github-actions]

Thank you for opening this PR! We appreciate you!

For all pull requests coming from third-party forks we will need to
review the PR before we can process it through our CI pipelines.

A Forem Team member will review this contribution and get back to
you as soon as possible!

[rhymes]

Works really well @Link2Twenty, great job!

ps. does this close the issue as a whole? I noticed you haven't specified it in the description

[Link2Twenty]

does this close the issue as a whole?

It does, I've updated the original post 😅

[aitchiss]

Looking good! Thanks for this.

I think there is more work to do at a later time to make this more accessible as a tab panel, but we already have an over-arching issue to look at usage of tab groups in the app generally (#11853) 👍

[Link2Twenty]

I think there is more work to do at a later time to make this more accessible as a tab panel.

I think in this specific instance of tabs the tab list stuff should be super easy to add, would you like me to do a follow up PR?

[aitchiss]

I think there is more work to do at a later time to make this more accessible as a tab panel.

I think in this specific instance of tabs the tab list stuff should be super easy to add, would you like me to do a follow up PR?

Definitely happy if you'd like to have a look at it! I think it might be a significant piece of work though - it requires dynamic manipulation of the tabindex properties on the tab buttons, and also would need a bit of a refactor of how we present the tab panel content itself. At the moment, the HTML is only rendered in the DOM when the given tab is selected, but to follow the tab panel pattern we'd need it to be present in the DOM but hidden (so that we can add the appropriate aria-controls attributes)