feat(switcher): automate max height, closes on bg click, update disabled tab index

[jnm2377]

Closes #840
Closes #856

As well as fixes a bug I found:

Changed

• Closes switcher if you click elsewhere on the page (previously, this only happened on mobile, lg breakpoints only closed via the close button)
• Automates max-height styles
• Updates tabindex so that switcher items aren't focusable if they are disabled

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/carbon-design-system/gatsby-theme-carbon/lbhxqp4uk
✅ Preview: https://gatsby-theme-carbon-git-fork-jnm2377-update-switcher.carbon-design-system.vercel.app

[andreancardona]

the build is failing :(

[vpicone]

Lookin good just some minor stuff

[andreancardona]

lgtm! :) @jnm2377

[vpicone]

@jnm2377 the disabled thing is actually intended. You want disabled form elements to be tabbable. Otherwise users navigating by keyboard won't know they exist at all, which is a different thing than the "exists but isn't selectable" info that sited users get from a disabled element.

[jnm2377]

@vpicone we don't do that in any of our carbon components. For example if a button is disabled, we it's not tabbable. How does that make sense here?

[vpicone]

@jnm2377 I think you're right just because they're disabled doesn't mean they're invisible to screen readers. Not sure if there's any screen reader hints that the link is disabled or if it'd show up as normal text. But either way I think taking them out of the tab order is the right move here.

[jnm2377]

@jnm2377 I think you're right just because they're disabled doesn't mean they're invisible to screen readers. Not sure if there's any screen reader hints that the link is disabled or if it'd show up as normal text. But either way I think taking them out of the tab order is the right move here.

@dakahn just want to confirm this is ok to do. We currently have a disabled item in the switcher and it's still tabbable. In this PR, I updated switcher items to not be tabbable if they're disabled. Is that ok? It seems like that's the pattern we do for everything else that's disabled.

[vpicone]

@jnm2377 yup, I'm on board with your change.

It's weird because there is no 'disabled' attribute for native links on the web (like there is for buttons or other for inputs), so its sort of a weird gray area but I think sticking to the Carbon Link component behavior is the right move for sure.

[jnm2377]

@vpicone looks like the changes are working correctly 🎉

[vpicone]

🚀