Improve accessibility

This commit is contained in:
LordMathis 2019-11-03 16:35:55 +01:00
parent adfcc8995f
commit 8457c838ab
No known key found for this signature in database
GPG Key ID: 575849FD91CE470C
10 changed files with 49 additions and 36 deletions

View File

@ -27,9 +27,9 @@ export default class About extends Component {
const classes = `${contentStyle.contentWrapper} ${style.about}` const classes = `${contentStyle.contentWrapper} ${style.about}`
return ( return (
<div className={`${contentStyle.contentWrapper} ${style.about}`} > <div className={`${contentStyle.contentWrapper} ${style.about}`} role="region" aria-label="About me">
<Header header={'About Me'} /> <Header header={'About Me'} role="heading" aria-level="2"/>
<div className={contentStyle.content} dangerouslySetInnerHTML={{ __html: result }}> <div className={contentStyle.content} dangerouslySetInnerHTML={{ __html: result }} role="article">
</div> </div>
</div> </div>
) )

View File

@ -27,8 +27,8 @@ export default class Blog extends Component {
return new Date(b.published) - new Date(a.published) return new Date(b.published) - new Date(a.published)
}) })
let postsHTML = posts.map((post) => let postsHTML = posts.map((post) =>
<div className={styles.postListItem}> <div className={styles.postListItem} role="listitem">
<div className={styles.postHeader}> <div className={styles.postHeader} >
<a href={post.link} className={styles.postTitle}>{post.title}</a> <a href={post.link} className={styles.postTitle}>{post.title}</a>
<span className={styles.postDate}>{post.published}</span> <span className={styles.postDate}>{post.published}</span>
</div> </div>
@ -40,10 +40,10 @@ export default class Blog extends Component {
const classes = `${contentStyle.contentWrapper} ${styles.blog}` const classes = `${contentStyle.contentWrapper} ${styles.blog}`
return ( return (
<div className={classes} id="blog"> <div className={classes} id="blog" role="region" aria-label="Blog posts">
<Header header={'Blog'} /> <Header header={'Blog'} role="heading" aria-level="2"/>
<div className={`${contentStyle.content} ${styles.postsList}`}> <div className={`${contentStyle.content} ${styles.postsList}`} role="list">
{postsHTML} {postsHTML}
</div> </div>

View File

@ -15,32 +15,38 @@ export default class Home extends Component {
const socialLinks = objKeys.map((val) => { const socialLinks = objKeys.map((val) => {
const link = ( const link = (
<a key={key} href={this.props.config.social[val]}> <li>
<i className={`fa fa-${val} fa-3x`} aria-hidden="true" /> <a key={key} href={this.props.config.social[val]} role="link">
<span className="sr-only">{val}</span> <i className={`fa fa-${val} fa-3x`} aria-hidden="true" />
</a> <span className="sr-only">{val}</span>
</a>
</li>
) )
key += 1 key += 1
return link return link
}) })
socialLinks.push( socialLinks.push(
<a key={key} href={`mailto:${this.props.config.email}`}> <li>
<i className="fa fa-envelope-o fa-3x" aria-hidden="true" /> <a key={key} href={`mailto:${this.props.config.email}`} role="link">
<span className="sr-only">e-mail</span> <i className="fa fa-envelope-o fa-3x" aria-hidden="true" />
</a> <span className="sr-only">e-mail</span>
</a>
</li>
) )
return ( return (
<div id={styles.coverPage} className={styles.coverPageFull}> <div id={styles.coverPage} className={styles.coverPageFull} role="region" aria-label="Home page">
<div id={styles.coverPageContent}> <div id={styles.coverPageContent}>
<div> <div role="heading" aria-level="1">
<h1 id={styles.coverPageName}><Link to="/">{ this.props.config.name }</Link></h1> <h1 id={styles.coverPageName}><Link to="/">{ this.props.config.name }</Link></h1>
</div> </div>
<div className={styles.social}> <div className={styles.social} role="list">
{socialLinks} <ul>
{socialLinks}
</ul>
</div> </div>
<div className={styles.menuLinks}> <div className={styles.menuLinks} role="navigation">
<ul> <ul>
<li> <li>
<a href="#about"> <a href="#about">
@ -50,9 +56,6 @@ export default class Home extends Component {
<li> <li>
<span>/ <a href="#blog">Blog</a></span> <span>/ <a href="#blog">Blog</a></span>
</li> </li>
<li>
<span>/ <a href="#contact">Contact</a></span>
</li>
</ul> </ul>
</div> </div>
</div> </div>

View File

@ -33,12 +33,18 @@
.social { .social {
text-align: center; text-align: center;
a { ul {
color: $white; list-style: none;
text-shadow: $black 0px 0px 2px; li {
-webkit-font-smoothing: antialiased; display: inline;
display: inline-block; a {
margin: 10px; color: $white;
text-shadow: $black 0px 0px 2px;
-webkit-font-smoothing: antialiased;
display: inline-block;
margin: 10px;
}
}
} }
} }

View File

@ -33,7 +33,7 @@ export default class Navbar extends Component {
) )
return ( return (
<div className={styles.navbar}> <div className={styles.navbar} role="navigation">
<div className={styles.links}> <div className={styles.links}>
<ul> <ul>
<li> <li>

View File

@ -34,12 +34,12 @@ export default class Post extends Component {
<div> <div>
<Navbar config={this.props.config} /> <Navbar config={this.props.config} />
<div className={contentStyle.contentWrapper}> <div className={contentStyle.contentWrapper}>
<Header header={title} /> <Header header={title} role="heading" aria-level="2" />
<div className={contentStyle.content}> <div className={contentStyle.content}>
<div className={styles.postDate}> <div className={styles.postDate}>
<h3>{date.format('MMMM D, YYYY')}</h3> <h3>{date.format('MMMM D, YYYY')}</h3>
</div> </div>
<div className={styles.postContent} dangerouslySetInnerHTML={{ __html: body }}> <div className={styles.postContent} dangerouslySetInnerHTML={{ __html: body }} role="article">
</div> </div>
</div> </div>
</div> </div>

View File

@ -18,7 +18,7 @@ export default class Wrapper extends Component {
render () { render () {
return ( return (
<div className={` ${styles.centerContent} ${this.props.flex ? styles.flexWrap : ''}` }> <div className={` ${styles.centerContent} ${this.props.flex ? styles.flexWrap : ''}` } role='main'>
{this.props.children} {this.props.children}
</div> </div>
) )

View File

@ -14,9 +14,11 @@ export default class MainContainer extends Component {
// eslint-disable-next-line no-undef // eslint-disable-next-line no-undef
if (__isBrowser__) { if (__isBrowser__) {
data = window.__INITIAL_DATA__ data = window.__INITIAL_DATA__
console.log("window:", data)
delete window.__INITIAL_DATA__ delete window.__INITIAL_DATA__
} else { } else {
data = props.staticContext.context data = props.staticContext.context
console.log("StaticContext:", data)
} }
this.state = { this.state = {

View File

@ -13,10 +13,12 @@ export default class PostContainer extends Component {
let data let data
// eslint-disable-next-line no-undef // eslint-disable-next-line no-undef
if (__isBrowser__) { if (__isBrowser__) {
data = window.__INITIAL_DATA__ data = window.__INITIAL_DATA__
console.log("window:", data)
delete window.__INITIAL_DATA__ delete window.__INITIAL_DATA__
} else { } else {
data = props.staticContext.context data = props.staticContext.context
console.log("StaticContext:", data)
} }
this.state = { this.state = {

View File

@ -40,7 +40,7 @@ function renderFullPage (html, head, data, config) {
const initialData = [data, config] const initialData = [data, config]
return ` return `
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<title>${config.title}</title> <title>${config.title}</title>
<!-- Google Fonts --> <!-- Google Fonts -->