Skip to content

fix(accessibility) Improve accessibility of the site #2274

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

Merged
merged 2 commits into from
Jun 22, 2018
Merged

fix(accessibility) Improve accessibility of the site #2274

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1a8477b
fix(accessibility) Improve accessibility of the site
tryzniak Jun 10, 2018
7786dd9
Merge branch 'master' into fix/accessibility
montogeek Jun 22, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/Contributors/Contributors.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export default ({contributors}) => {
<a key={ contributor }
className="contributor"
href={ `https://github.com/${contributor}` }>
<img src={ `https://github.com/${contributor}.png?size=90` } />
<img alt={ contributor } src={ `https://github.com/${contributor}.png?size=90` } />
Copy link
Collaborator

Choose a reason for hiding this comment

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

Since there is a span just after this image, which already ready out the contributor name, I'd prefer to set role="presentation" here

<span className="contributor__name"> {contributor}</span>
</a>
))
Expand Down
5 changes: 4 additions & 1 deletion src/components/Navigation/Navigation.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,14 +39,17 @@ export default class Navigation extends React.Component {

<div className="navigation__search">
<input
type="text"
aria-label="Search documentation"
type="search"
Copy link
Member

Choose a reason for hiding this comment

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

Usually the type search adds some extra styles or autocompletes that might not go well with the styles we have now, have you tested this change in different browsers?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Wow. Spotted some strange artifact on Safari 11. Thank you. Will figure out how to avoid it.

className="navigation__search-input"
placeholder="Search documentation…"
onBlur={ this._toggleSearch.bind(this) } />
<button
aria-label="Open search"
className="navigation__search-icon icon-magnifying-glass"
onClick={ this._toggleSearch.bind(this) } />
<button
aria-label="Close search"
className="navigation__search-icon icon-cross"
onClick={ this._toggleSearch.bind(this) } />
</div>
Expand Down
1 change: 1 addition & 0 deletions src/components/NotificationBar/NotificationBar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export default class NotificationBar extends React.Component {
</p>
{ localStorageIsEnabled ?
<button
aria-label="Dismiss"
className="notification-bar__close icon-cross"
onClick={ this._close.bind(this) } /> :
null
Expand Down
2 changes: 1 addition & 1 deletion src/components/Shield/Shield.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';

export default props => (
<img src={
<img alt="webpack shield" src={
`https://img.shields.io/${props.content}.svg?label=${props.label}&style=flat-square&maxAge=3600`
} />
);
4 changes: 2 additions & 2 deletions src/components/SplashViz/SplashVizSVG.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,8 @@ module.exports = {
<g transform="translate(342, 225)" stroke="#7E8C94" stroke-width="4">
<path d="M499.558824,86.52 C499.558824,86.52 484.852941,81.02 439.908088,109.436667 C394.963235,137.853333 380.992647,164.436667 380.992647,164.436667" stroke-dasharray="7"></path>
<path d="M499.558824,86.0616667 C499.558824,86.0616667 484.852941,91.5616667 439.908088,63.145 C394.963235,34.7283333 380.992647,8.145 380.992647,8.145" stroke-dasharray="7"></path>
<path d="M0.477941176,170.395 C0.477941176,170.395 169.382939,98.895 447.847936,98.895" id="Shape_99_" stroke-dasharray="6"></path>
<path d="M0.477941176,72.395 C0.477941176,72.395 169.382939,0.895 447.847936,0.895" id="Shape_99_" stroke-dasharray="6" transform="translate(224.162939, 36.645000) scale(1, -1) translate(-224.162939, -36.645000) "></path>
<path d="M0.477941176,170.395 C0.477941176,170.395 169.382939,98.895 447.847936,98.895" stroke-dasharray="6"></path>
<path d="M0.477941176,72.395 C0.477941176,72.395 169.382939,0.895 447.847936,0.895" stroke-dasharray="6" transform="translate(224.162939, 36.645000) scale(1, -1) translate(-224.162939, -36.645000) "></path>
</g>
<text font-family="'Source Sans Pro', sans-serif" font-size="18" font-weight="600" fill="#86A5BA">
<tspan x="24.934" y="562">MODULES WITH DEPENDENCIES</tspan>
Expand Down
10 changes: 5 additions & 5 deletions src/styles/markdown.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,13 +99,13 @@
}

&.tip {
background-color: #DCF2FD;
color: #618ca0;
background-color: #eaf8ff;
Copy link
Member

Choose a reason for hiding this comment

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

Can you post a screen shot with this changes? For reviewers is hard sometimes to infer the impact of the change and checking out and building the branch is a little time consuming, thanks :)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Here are screenshots with my changes. The changes are very subtle though :)
localhost_3000_ 1
localhost_3000_concepts_

color: #4e7182;
}

&.warning {
background-color: #fbedb7;
color: #8c8466;
background-color: #fdf5d8;
color: #716b53;
}

&.todo {
Expand Down Expand Up @@ -260,7 +260,7 @@
margin: 0 2px;
padding: 2px 6px;
white-space: normal;
background-color: transparentize(getColor(fiord), 0.94);
background-color: transparentize(getColor(fiord), 0.95);
border-radius: 3px;
text-shadow: 0 1px 0 transparentize(getColor(white), 0.4);
}
Expand Down
4 changes: 2 additions & 2 deletions src/styles/partials/_vars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
$colors: (
malibu: #8DD6F9,
denim: #1D78C1,
denim: #175d96,
fiord: #465E69,
elephant: #2B3A42,
white: #ffffff,
concrete: #f2f2f2,
alto: #dedede,
dusty-grey: #999999,
dusty-grey: #777676,
dove-grey: #666666,
emperor: #535353,
mine-shaft: #333333
Expand Down
4 changes: 2 additions & 2 deletions src/styles/prism-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ pre[class*="lang-"] {
.token.prolog,
.token.doctype,
.token.cdata {
color: #77858c;
color: #93a4ad;
}

.token.punctuation {
Expand Down Expand Up @@ -71,7 +71,7 @@ pre[class*="lang-"] {
.token.regex,
.token.attr-value,
.token.important {
color: desaturate(#2dd271, 25%)
color: desaturate(#2dd271, 23%)
}

.token.inserted {
Expand Down
10 changes: 5 additions & 5 deletions src/utilities/markdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,11 @@ module.exports = function() {
var id = parsed.id;

return (
`<h${level} class="header">` +
`<a class="anchor" href="#${id}" id="${id}"></a>` +
`<span class="text">${text}</span>` +
`<a class="icon-link" href="#${id}"></a>` +
`</h${level}>\n`
`<h${level} class="header">
<a class="anchor" aria-hidden="true" href="#${id}" id="${id}"></a>
<span class="text">${text}</span>
<a aria-label="${text}" class="icon-link" href="#${id}"></a>
Copy link
Contributor

Choose a reason for hiding this comment

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

Hey, guys! I've found an issue, if in ${text} will be a <a>-link, it breaks markup.
For example here at the bottom, check License.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Hoping to take a look in a few days. Thanks

</h${level}>\n`
);
};

Expand Down
2 changes: 1 addition & 1 deletion template.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.context.title %></title>
Expand Down