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.

Sign up for GitHub

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

Jump to bottom

[docs] Improve lighthouse a11y score in demos #15901

Merged
merged 15 commits into from May 29, 2019
Merged

[docs] Improve lighthouse a11y score in demos #15901

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
d640565
[docs] Fix a11y lighthouse issues in breadcrumbs demos
eps1lon May 27, 2019
de8ab7f
[docs] Fix a11y lighthouse issues with Menu demos
eps1lon May 27, 2019
01111c5
[docs] Fix a11y lighthouse issues in grid-list demos
eps1lon May 28, 2019
7df1664
[docs] Fix a11y lighthouse issues in AppBar demos
eps1lon May 28, 2019
0440bf0
[docs] Fix lighthouse a11y issues in Card demos
eps1lon May 28, 2019
b32b928
[docs] Fix a11y lighthouse issues with Progress demos
eps1lon May 28, 2019
47ae147
[docs] Fix a11y lighthouse issues in Dialog demos
eps1lon May 28, 2019
045a417
[docs] Fix a11y lighthouse issues with List demos
eps1lon May 28, 2019
a7d9081
[docs] Fix a11y lighthouse issues in Table demos
eps1lon May 28, 2019
7443d55
[docs] Fix lighthouse a11y issues in Popper demos
eps1lon May 28, 2019
b8bfa52
[docs] Fix a11y lighthouse issues in Transition demos
eps1lon May 28, 2019
a3a0516
Apply suggestions from code review
eps1lon May 29, 2019
aacc9fd
[docs] Add a11y label to nav landmarks
eps1lon May 29, 2019
5a2b1ba
[docs] Add title to iframe demos
eps1lon May 29, 2019
6bdf61d
[docs] Fixup for a11y lighthouse issues in menu demos
eps1lon May 29, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/src/modules/components/AppTableOfContents.js
View file
Open in desktop
Expand Up @@ -223,7 +223,7 @@ function AppTableOfContents(props) {
);

return (
<nav className={classes.root}>
<nav className={classes.root} aria-label="Page table of contents">
{itemsServer.length > 0 ? (
<React.Fragment>
<Typography gutterBottom className={classes.contents}>
Expand Down
4 changes: 3 additions & 1 deletion docs/src/modules/components/Demo.js
View file
Open in desktop
Expand Up @@ -234,6 +234,8 @@ class Demo extends React.Component {
const demoData = this.getDemoData();
const DemoComponent = demoData.Component;
const gaCategory = demoOptions.demo;
// get the last alphanumeric pattern before the file extension
const demoName = demoData.githubLocation.replace(/(.+?)(\w+)\.\w+$$/, '$2');

return (
<div className={classes.root}>
Expand Down Expand Up @@ -360,7 +362,7 @@ class Demo extends React.Component {
maxWidth: demoOptions.maxWidth,
}}
>
<DemoSandboxed component={DemoComponent} iframe={demoOptions.iframe} />
<DemoSandboxed component={DemoComponent} iframe={demoOptions.iframe} name={demoName} />
</div>
</div>
);
Expand Down
9 changes: 6 additions & 3 deletions docs/src/modules/components/DemoSandboxed.js
View file
Open in desktop
Expand Up @@ -45,7 +45,7 @@ class DemoFrame extends React.Component {
};

render() {
const { children, classes } = this.props;
const { children, classes, theme, ...other } = this.props;

// NoSsr fixes a strange concurrency issue with iframe and quick React mount/unmount
return (
Expand All @@ -55,6 +55,7 @@ class DemoFrame extends React.Component {
className={classes.root}
contentDidMount={this.onContentDidMount}
contentDidUpdate={this.onContentDidUpdate}
{...other}
>
<div id="demo-frame-jss" />
{this.state.ready ? (
Expand All @@ -80,11 +81,12 @@ DemoFrame.propTypes = {
const StyledFrame = withStyles(styles, { withTheme: true })(DemoFrame);

function DemoSandboxed(props) {
const { component: Component, iframe } = props;
const { component: Component, iframe, name } = props;
const Sandbox = iframe ? StyledFrame : React.Fragment;
const sandboxProps = iframe ? { title: `${name} demo` } : {};

return (
<Sandbox>
<Sandbox {...sandboxProps}>
<Component />
</Sandbox>
);
Expand All @@ -93,6 +95,7 @@ function DemoSandboxed(props) {
DemoSandboxed.propTypes = {
component: PropTypes.elementType.isRequired,
iframe: PropTypes.bool,
name: PropTypes.string.isRequired,
};

export default React.memo(DemoSandboxed);
4 changes: 3 additions & 1 deletion docs/src/pages/components/app-bar/MenuAppBar.js
View file
Open in desktop
Expand Up @@ -61,7 +61,8 @@ function MenuAppBar() {
{auth && (
<div>
<IconButton
aria-owns={open ? 'menu-appbar' : undefined}
aria-label="Account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
onClick={handleMenu}
color="inherit"
Expand All @@ -75,6 +76,7 @@ function MenuAppBar() {
vertical: 'top',
horizontal: 'right',
}}
keepMounted
transformOrigin={{
vertical: 'top',
horizontal: 'right',
Expand Down
4 changes: 3 additions & 1 deletion docs/src/pages/components/app-bar/MenuAppBar.tsx
View file
Open in desktop
Expand Up @@ -63,7 +63,8 @@ function MenuAppBar() {
{auth && (
<div>
<IconButton
aria-owns={open ? 'menu-appbar' : undefined}
aria-label="Account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
onClick={handleMenu}
color="inherit"
Expand All @@ -77,6 +78,7 @@ function MenuAppBar() {
vertical: 'top',
horizontal: 'right',
}}
keepMounted
transformOrigin={{
vertical: 'top',
horizontal: 'right',
Expand Down
35 changes: 27 additions & 8 deletions docs/src/pages/components/app-bar/PrimarySearchAppBar.js
View file
Open in desktop
Expand Up @@ -103,10 +103,13 @@ function PrimarySearchAppBar() {
setMobileMoreAnchorEl(event.currentTarget);
}

const menuId = 'primary-search-account-menu';
const renderMenu = (
<Menu
anchorEl={anchorEl}
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
id={menuId}
keepMounted
transformOrigin={{ vertical: 'top', horizontal: 'right' }}
open={isMenuOpen}
onClose={handleMenuClose}
Expand All @@ -116,32 +119,40 @@ function PrimarySearchAppBar() {
</Menu>
);

const mobileMenuId = 'primary-search-account-menu-mobile';
const renderMobileMenu = (
<Menu
anchorEl={mobileMoreAnchorEl}
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
id={mobileMenuId}
keepMounted
transformOrigin={{ vertical: 'top', horizontal: 'right' }}
open={isMobileMenuOpen}
onClose={handleMobileMenuClose}
>
<MenuItem>
<IconButton color="inherit">
<IconButton aria-label="Show 4 new mails" color="inherit">
<Badge badgeContent={4} color="secondary">
<MailIcon />
</Badge>
</IconButton>
<p>Messages</p>
</MenuItem>
<MenuItem>
<IconButton color="inherit">
<IconButton aria-label="Show 11 new notifications" color="inherit">
<Badge badgeContent={11} color="secondary">
<NotificationsIcon />
</Badge>
</IconButton>
<p>Notifications</p>
</MenuItem>
<MenuItem onClick={handleProfileMenuOpen}>
<IconButton color="inherit">
<IconButton
aria-label="Account of current user"
aria-controls="primary-search-account-menu"
aria-haspopup="true"
color="inherit"
>
<AccountCircle />
</IconButton>
<p>Profile</p>
Expand Down Expand Up @@ -174,23 +185,25 @@ function PrimarySearchAppBar() {
root: classes.inputRoot,
input: classes.inputInput,
}}
inputProps={{ 'aria-label': 'Search' }}
/>
</div>
<div className={classes.grow} />
<div className={classes.sectionDesktop}>
<IconButton color="inherit">
<IconButton aria-label="Show 4 new mails" color="inherit">
<Badge badgeContent={4} color="secondary">
<MailIcon />
</Badge>
</IconButton>
<IconButton color="inherit">
<IconButton aria-label="Show 17 new notifications" color="inherit">
<Badge badgeContent={17} color="secondary">
<NotificationsIcon />
</Badge>
</IconButton>
<IconButton
edge="end"
aria-owns={isMenuOpen ? 'material-appbar' : undefined}
aria-label="Account of current user"
aria-controls={menuId}
aria-haspopup="true"
onClick={handleProfileMenuOpen}
color="inherit"
Expand All @@ -199,14 +212,20 @@ function PrimarySearchAppBar() {
</IconButton>
</div>
<div className={classes.sectionMobile}>
<IconButton aria-haspopup="true" onClick={handleMobileMenuOpen} color="inherit">
<IconButton
aria-label="Show more"
aria-controls={mobileMenuId}
aria-haspopup="true"
onClick={handleMobileMenuOpen}
color="inherit"
>
<MoreIcon />
</IconButton>
</div>
</Toolbar>
</AppBar>
{renderMenu}
{renderMobileMenu}
{renderMenu}
</div>
);
}
Expand Down
35 changes: 27 additions & 8 deletions docs/src/pages/components/app-bar/PrimarySearchAppBar.tsx
View file
Open in desktop
Expand Up @@ -105,10 +105,13 @@ function PrimarySearchAppBar() {
setMobileMoreAnchorEl(event.currentTarget);
}

const menuId = 'primary-search-account-menu';
const renderMenu = (
<Menu
anchorEl={anchorEl}
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
id={menuId}
keepMounted
transformOrigin={{ vertical: 'top', horizontal: 'right' }}
open={isMenuOpen}
onClose={handleMenuClose}
Expand All @@ -118,32 +121,40 @@ function PrimarySearchAppBar() {
</Menu>
);

const mobileMenuId = 'primary-search-account-menu-mobile';
const renderMobileMenu = (
<Menu
anchorEl={mobileMoreAnchorEl}
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
id={mobileMenuId}
keepMounted
transformOrigin={{ vertical: 'top', horizontal: 'right' }}
open={isMobileMenuOpen}
onClose={handleMobileMenuClose}
>
<MenuItem>
<IconButton color="inherit">
<IconButton aria-label="Show 4 new mails" color="inherit">
<Badge badgeContent={4} color="secondary">
<MailIcon />
</Badge>
</IconButton>
<p>Messages</p>
</MenuItem>
<MenuItem>
<IconButton color="inherit">
<IconButton aria-label="Show 11 new notifications" color="inherit">
<Badge badgeContent={11} color="secondary">
<NotificationsIcon />
</Badge>
</IconButton>
<p>Notifications</p>
</MenuItem>
<MenuItem onClick={handleProfileMenuOpen}>
<IconButton color="inherit">
<IconButton
aria-label="Account of current user"
aria-controls="primary-search-account-menu"
aria-haspopup="true"
color="inherit"
>
<AccountCircle />
</IconButton>
<p>Profile</p>
Expand Down Expand Up @@ -176,23 +187,25 @@ function PrimarySearchAppBar() {
root: classes.inputRoot,
input: classes.inputInput,
}}
inputProps={{ 'aria-label': 'Search' }}
/>
</div>
<div className={classes.grow} />
<div className={classes.sectionDesktop}>
<IconButton color="inherit">
<IconButton aria-label="Show 4 new mails" color="inherit">
<Badge badgeContent={4} color="secondary">
<MailIcon />
</Badge>
</IconButton>
<IconButton color="inherit">
<IconButton aria-label="Show 17 new notifications" color="inherit">
<Badge badgeContent={17} color="secondary">
<NotificationsIcon />
</Badge>
</IconButton>
<IconButton
edge="end"
aria-owns={isMenuOpen ? 'material-appbar' : undefined}
aria-label="Account of current user"
aria-controls={menuId}
aria-haspopup="true"
onClick={handleProfileMenuOpen}
color="inherit"
Expand All @@ -201,14 +214,20 @@ function PrimarySearchAppBar() {
</IconButton>
</div>
<div className={classes.sectionMobile}>
<IconButton aria-haspopup="true" onClick={handleMobileMenuOpen} color="inherit">
<IconButton
aria-label="Show more"
aria-controls={mobileMenuId}
aria-haspopup="true"
onClick={handleMobileMenuOpen}
color="inherit"
>
<MoreIcon />
</IconButton>
</div>
</Toolbar>
</AppBar>
{renderMenu}
{renderMobileMenu}
{renderMenu}
</div>
);
}
Expand Down
1 change: 1 addition & 0 deletions docs/src/pages/components/app-bar/SearchAppBar.js
View file
Open in desktop
Expand Up @@ -89,6 +89,7 @@ function SearchAppBar() {
root: classes.inputRoot,
input: classes.inputInput,
}}
inputProps={{ 'aria-label': 'Search' }}
/>
</div>
</Toolbar>
Expand Down
1 change: 1 addition & 0 deletions docs/src/pages/components/app-bar/SearchAppBar.tsx
View file
Open in desktop
Expand Up @@ -91,6 +91,7 @@ function SearchAppBar() {
root: classes.inputRoot,
input: classes.inputInput,
}}
inputProps={{ 'aria-label': 'Search' }}
/>
</div>
</Toolbar>
Expand Down
10 changes: 5 additions & 5 deletions docs/src/pages/components/breadcrumbs/RouterBreadcrumbs.js
View file
Open in desktop
Expand Up @@ -101,18 +101,18 @@ class RouterBreadcrumbs extends React.Component {
);
}}
</Route>
<div className={classes.lists}>
<List component="nav">
<nav className={classes.lists} aria-label="Mailbox folders">
<List>
<ListItemLink to="/inbox" open={this.state.open} onClick={this.handleClick} />
<Collapse in={this.state.open} timeout="auto" unmountOnExit>
<List component="div" disablePadding>
<Collapse component="li" in={this.state.open} timeout="auto" unmountOnExit>
<List disablePadding>
<ListItemLink to="/inbox/important" className={classes.nested} />
</List>
</Collapse>
<ListItemLink to="/trash" />
<ListItemLink to="/spam" />
</List>
</div>
</nav>
</div>
</MemoryRouter>
);
Expand Down
10 changes: 5 additions & 5 deletions docs/src/pages/components/breadcrumbs/RouterBreadcrumbs.tsx
View file
Open in desktop
Expand Up @@ -119,18 +119,18 @@ class RouterBreadcrumbs extends React.Component<RouterBreadcrumbsProp, RouterBre
);
}}
</Route>
<div className={classes.lists}>
<List component="nav">
<nav className={classes.lists} aria-label="Mailbox folders">
<List>
<ListItemLink to="/inbox" open={this.state.open} onClick={this.handleClick} />
<Collapse in={this.state.open} timeout="auto" unmountOnExit>
<List component="div" disablePadding>
<Collapse component="li" in={this.state.open} timeout="auto" unmountOnExit>
<List disablePadding>
<ListItemLink to="/inbox/important" className={classes.nested} />
</List>
</Collapse>
<ListItemLink to="/trash" />
<ListItemLink to="/spam" />
</List>
</div>
</nav>
</div>
</MemoryRouter>
);
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/cards/RecipeReviewCard.js
View file
Open in desktop
Expand Up @@ -56,7 +56,7 @@ function RecipeReviewCard() {
</Avatar>
}
action={
<IconButton>
<IconButton aria-label="Settings">
<MoreVertIcon />
</IconButton>
}
Expand Down