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

improvement(a11y): use more semantic html tags in collections view (#1585)

Browse Source
This commit is contained in:
Jake Rayson 2018-08-06 21:53:40 +01:00 committed by Shawn Erquhart
parent 95c8de0029
commit 4782c472bf
6 changed files with 32 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
cypress/integration/editorial_workflow_spec.js
View File

@ -160,7 +160,7 @@ describe('Editorial Workflow', () => {
function assertOnCollectionsPage() { function assertOnCollectionsPage() {
cy.url().should('contain', '/#/collections/posts') cy.url().should('contain', '/#/collections/posts')
cy.contains('h1', 'Collections') cy.contains('h2', 'Collections')
} }
it('successfully loads', () => { it('successfully loads', () => {

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

@ -21,7 +21,7 @@ const styles = {
`, `,
}; };
const AppHeaderContainer = styled.div` const AppHeaderContainer = styled.header`
z-index: 300; z-index: 300;
`; `;

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

@ -14,7 +14,7 @@ const CollectionContainer = styled.div`
margin: ${lengths.pageMargin}; margin: ${lengths.pageMargin};
` `
const CollectionMain = styled.div` const CollectionMain = styled.main`
padding-left: 280px; padding-left: 280px;
` `

40
packages/netlify-cms-core/src/components/Collection/Entries/EntryCard.js
View File

@ -5,27 +5,33 @@ import { resolvePath } from 'netlify-cms-lib-util';
import { colors, colorsRaw, components, lengths } from 'netlify-cms-ui-default'; import { colors, colorsRaw, components, lengths } from 'netlify-cms-ui-default';
import { VIEW_STYLE_LIST, VIEW_STYLE_GRID } from 'Constants/collectionViews'; import { VIEW_STYLE_LIST, VIEW_STYLE_GRID } from 'Constants/collectionViews';
const ListCardLink = styled(Link)` const ListCard = styled.li`
${components.card}; ${components.card};
width: ${lengths.topCardWidth}; width: ${lengths.topCardWidth};
max-width: 100%;
padding: 16px 22px;
margin-left: 12px; margin-left: 12px;
margin-bottom: 16px; margin-bottom: 16px;
`
const ListCardLink = styled(Link)`
display: block;
max-width: 100%;
padding: 16px 22px;
&:hover { &:hover {
background-color: ${colors.foreground}; background-color: ${colors.foreground};
} }
` `
const GridCardLink = styled(Link)` const GridCard = styled.li`
${components.card}; ${components.card};
flex: 0 0 335px; flex: 0 0 335px;
height: 240px; height: 240px;
overflow: hidden; overflow: hidden;
margin-left: 12px; margin-left: 12px;
margin-bottom: 16px; margin-bottom: 16px;
`
const GridCardLink = styled(Link)`
display: block;
&, &:hover { &, &:hover {
background-color: ${colors.foreground}; background-color: ${colors.foreground};
color: ${colors.text}; color: ${colors.text};
@ -92,22 +98,26 @@ const EntryCard = ({
if (viewStyle === VIEW_STYLE_LIST) { if (viewStyle === VIEW_STYLE_LIST) {
return ( return (
<ListCardLink to={path}> <ListCard>
{ collectionLabel ? <CollectionLabel>{collectionLabel}</CollectionLabel> : null } <ListCardLink to={path}>
<ListCardTitle>{ title }</ListCardTitle> { collectionLabel ? <CollectionLabel>{collectionLabel}</CollectionLabel> : null }
</ListCardLink> <ListCardTitle>{ title }</ListCardTitle>
</ListCardLink>
</ListCard>
); );
} }
if (viewStyle === VIEW_STYLE_GRID) { if (viewStyle === VIEW_STYLE_GRID) {
return ( return (
<GridCardLink to={path}> <GridCard>
<CardBody hasImage={image}> <GridCardLink to={path}>
{ collectionLabel ? <CollectionLabel>{collectionLabel}</CollectionLabel> : null } <CardBody hasImage={image}>
<CardHeading>{title}</CardHeading> { collectionLabel ? <CollectionLabel>{collectionLabel}</CollectionLabel> : null }
</CardBody> <CardHeading>{title}</CardHeading>
{ image ? <CardImage url={image}/> : null } </CardBody>
</GridCardLink> { image ? <CardImage url={image}/> : null }
</GridCardLink>
</GridCard>
); );
} }
} }

3
packages/netlify-cms-core/src/components/Collection/Entries/EntryListing.js
View File

@ -8,9 +8,10 @@ import { Cursor } from 'netlify-cms-lib-util';
import { selectFields, selectInferedField } from 'Reducers/collections'; import { selectFields, selectInferedField } from 'Reducers/collections';
import EntryCard from './EntryCard'; import EntryCard from './EntryCard';
const CardsGrid = styled.div` const CardsGrid = styled.ul`
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
list-style-type: none;
margin-left: -12px; margin-left: -12px;
` `

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

@ -13,7 +13,7 @@ const styles = {
`, `,
}; };
const SidebarContainer = styled.div` const SidebarContainer = styled.aside`
${components.card}; ${components.card};
width: 250px; width: 250px;
padding: 8px 0 12px; padding: 8px 0 12px;
@ -22,7 +22,7 @@ const SidebarContainer = styled.div`
overflow: auto; overflow: auto;
` `
const SidebarHeading = styled.h1` const SidebarHeading = styled.h2`
font-size: 23px; font-size: 23px;
font-weight: 600; font-weight: 600;
padding: 0; padding: 0;