gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improvement(netlify-cms-core): wrap navigations in lists for better a11y (#1903)

Browse Source
This commit is contained in:
Alexander Nanberg 2018-11-26 17:53:49 +01:00 committed by Shawn Erquhart
parent 37721718a5
commit 422d0cbe2f
2 changed files with 52 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
packages/netlify-cms-core/src/components/App/Header.js
View File

@ -96,6 +96,12 @@ const AppHeaderQuickNewButton = styled(StyledDropdownButton)`
}
`;
const AppHeaderNavList = styled.ul`
display: flex;
margin: 0;
list-style: none;
`;
class Header extends React.Component {
static propTypes = {
user: ImmutablePropTypes.map.isRequired,
@ -135,26 +141,34 @@ class Header extends React.Component {
<AppHeader>
<AppHeaderContent>
<nav>
<AppHeaderNavLink
to="/"
activeClassName="header-link-active"
isActive={(match, location) => location.pathname.startsWith('/collections/')}
>
<Icon type="page" />
{t('app.header.content')}
</AppHeaderNavLink>
{hasWorkflow ? (
<AppHeaderNavLink to="/workflow" activeClassName="header-link-active">
<Icon type="workflow" />
{t('app.header.workflow')}
</AppHeaderNavLink>
) : null}
{showMediaButton ? (
<AppHeaderButton onClick={openMediaLibrary}>
<Icon type="media-alt" />
{t('app.header.media')}
</AppHeaderButton>
) : null}
<AppHeaderNavList>
<li>
<AppHeaderNavLink
to="/"
activeClassName="header-link-active"
isActive={(match, location) => location.pathname.startsWith('/collections/')}
>
<Icon type="page" />
{t('app.header.content')}
</AppHeaderNavLink>
</li>
{hasWorkflow && (
<li>
<AppHeaderNavLink to="/workflow" activeClassName="header-link-active">
<Icon type="workflow" />
{t('app.header.workflow')}
</AppHeaderNavLink>
</li>
)}
{showMediaButton && (
<li>
<AppHeaderButton onClick={openMediaLibrary}>
<Icon type="media-alt" />
{t('app.header.media')}
</AppHeaderButton>
</li>
)}
</AppHeaderNavList>
</nav>
<AppHeaderActions>
{createableCollections.size > 0 && (

35
packages/netlify-cms-core/src/components/Collection/Sidebar.js
View File

@ -35,7 +35,7 @@ const SidebarHeading = styled.h2`
const SearchContainer = styled.div`
display: flex;
align-items: center;
margin: 0 8px;
margin: 0 12px;
position: relative;
${Icon} {
@ -65,6 +65,11 @@ const SearchInput = styled.input`
}
`;
const SidebarNavList = styled.ul`
margin: 16px 0 0;
list-style: none;
`;
const SidebarNavLink = styled(NavLink)`
display: flex;
font-size: 14px;
@ -73,19 +78,17 @@ const SidebarNavLink = styled(NavLink)`
padding: 8px 12px;
border-left: 2px solid #fff;
${Icon} {
margin-right: 8px;
}
${props => css`
&:hover,
&:active,
&.${props.activeClassName} {
${styles.sidebarNavLinkActive};
}
`} &:first-of-type {
margin-top: 16px;
}
${Icon} {
margin-right: 8px;
}
`};
`;
class Sidebar extends React.Component {
@ -104,14 +107,12 @@ class Sidebar extends React.Component {
renderLink = collection => {
const collectionName = collection.get('name');
return (
<SidebarNavLink
key={collectionName}
to={`/collections/${collectionName}`}
activeClassName="sidebar-active"
>
<Icon type="write" />
{collection.get('label')}
</SidebarNavLink>
<li key={collectionName}>
<SidebarNavLink to={`/collections/${collectionName}`} activeClassName="sidebar-active">
<Icon type="write" />
{collection.get('label')}
</SidebarNavLink>
</li>
);
};
@ -131,7 +132,7 @@ class Sidebar extends React.Component {
value={query}
/>
</SearchContainer>
{collections.toList().map(this.renderLink)}
<SidebarNavList>{collections.toList().map(this.renderLink)}</SidebarNavList>
</SidebarContainer>
);
}