Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Tabs] Improve accessibility #16384

Merged
merged 4 commits into from
Jul 17, 2019
Merged

[Tabs] Improve accessibility #16384

merged 4 commits into from
Jul 17, 2019

Conversation

mbrookes
Copy link
Member

@mbrookes mbrookes commented Jun 26, 2019

This was an earlier attempt at improving the accessibility of the Tabs component. The plan was to complete the rest of the demos once the approach is agreed.

It originally had the beginnings of better keyboard support, but I removed that after it was going to be handled either separately or more holistically. As it stands better ARIA support without proper keyboard support is a bit pointless, but hopefully it's still a step in the right direction.

Regarding TabPanel, even though it's small, since we repeat it in every demo, I wonder if this should be a fully fledged component?

It would also be good to be able to get rid of the some of the boilerplate by automating the id generation, similar to what we do in SpeedDial. The simple tabs demo is a lot more verbose now.

@mui-pr-bot
Copy link

mui-pr-bot commented Jun 26, 2019

Details of bundle changes.

Comparing: 42f78c6...8d02f31

bundle parsed diff gzip diff prev parsed current parsed prev gzip current gzip
@material-ui/core 0.00% 0.00% 327,435 327,435 90,317 90,317
@material-ui/core/Paper 0.00% 0.00% 68,477 68,477 20,410 20,410
@material-ui/core/Paper.esm 0.00% 0.00% 61,761 61,761 19,177 19,177
@material-ui/core/Popper 0.00% 0.00% 28,896 28,896 10,394 10,394
@material-ui/core/Textarea 0.00% 0.00% 5,505 5,505 2,362 2,362
@material-ui/core/TrapFocus 0.00% 0.00% 3,753 3,753 1,577 1,577
@material-ui/core/styles/createMuiTheme 0.00% 0.00% 16,156 16,156 5,816 5,816
@material-ui/core/useMediaQuery 0.00% 0.00% 3,098 3,098 1,310 1,310
@material-ui/lab 0.00% 0.00% 141,740 141,740 43,809 43,809
@material-ui/styles 0.00% 0.00% 51,886 51,886 15,380 15,380
@material-ui/system 0.00% 0.00% 15,576 15,576 4,445 4,445
Button 0.00% 0.00% 79,713 79,713 24,354 24,354
Modal 0.00% 0.00% 14,548 14,548 5,102 5,102
Portal 0.00% 0.00% 3,471 3,471 1,568 1,568
Rating 0.00% 0.00% 70,267 70,267 22,068 22,068
Slider 0.00% 0.00% 75,098 75,098 23,309 23,309
colorManipulator 0.00% 0.00% 3,904 3,904 1,543 1,543
docs.landing 0.00% 0.00% 54,338 54,338 13,762 13,762
docs.main 0.00% 0.00% 647,615 647,615 204,234 204,234
packages/material-ui/build/umd/material-ui.production.min.js 0.00% 0.00% 299,850 299,850 86,090 86,091

Generated by 🚫 dangerJS against 8d02f31

@mbrookes mbrookes added the component: tabs This is the name of the generic UI component, not the React module! label Jun 26, 2019
Copy link
Member

@joshwooding joshwooding left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Whoops noticed it was a draft afterwards, Looks good so far :)

@mbrookes
Copy link
Member Author

Should add that I was already aware of typescript complaining about hidden. Someone might educate me on how to fix it.

Copy link
Member

@eps1lon eps1lon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I usuallly just check title and paragraph on drafts so I need a friendly ping in case something is open for discussion.

docs/src/pages/components/tabs/SimpleTabs.tsx Show resolved Hide resolved
@oliviertassinari
Copy link
Member

It will help with https://darekkay.com/blog/accessible-ui-frameworks/ :)

@mbrookes
Copy link
Member Author

I had forgotten, but that post was what originally inspired me to look at it!

@oliviertassinari oliviertassinari force-pushed the tabs-a11y branch 4 times, most recently from 85ddc9d to 36ddc06 Compare July 13, 2019 18:37
Copy link
Member

@oliviertassinari oliviertassinari left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mbrookes I have tried an approach to minimize the boilerplate as well as fix the build. Let me know what you think about it.

👍 for improving our demos 😍

@oliviertassinari oliviertassinari force-pushed the tabs-a11y branch 2 times, most recently from f88f6c2 to 8141a0e Compare July 13, 2019 18:49
@oliviertassinari oliviertassinari marked this pull request as ready for review July 15, 2019 09:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility a11y component: tabs This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants