r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

Merge pull request #10 from MathuraMG/accessibility

Browse source 
Changes to make the links screen reader compatible
This commit is contained in:
Cassie Tarakajian 2016-07-12 16:07:04 -04:00 committed by GitHub
commit 6010e14e30
6 changed files with 23 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
client/components/Nav.js
View file

@ -6,20 +6,20 @@ function Nav(props) {
<nav className="nav"> <nav className="nav">
<ul className="nav__items-left"> <ul className="nav__items-left">
<li className="nav__item"> <li className="nav__item">
<p <a
className="nav__new" className="nav__new"
onClick={props.createProject} onClick={props.createProject}
> >
New New
</p> </a>
</li> </li>
<li className="nav__item"> <li className="nav__item">
<p <a
className="nav__save" className="nav__save"
onClick={props.saveProject} onClick={props.saveProject}
> >
Save Save
</p> </a>
</li> </li>
<li className="nav__item"> <li className="nav__item">
<p className="nav__open"> <p className="nav__open">

7
client/modules/IDE/components/Sidebar.js
View file

@ -14,8 +14,11 @@ function Sidebar(props) {
<li <li
className={itemClass} className={itemClass}
key={file.id} key={file.id}
onClick={() => props.setSelectedFile(file.id)} >
>{file.name}</li> <a
onClick={() => props.setSelectedFile(file.id)}
>{file.name}</a>
</li>
); );
})} })}
</ul> </ul>

2
client/modules/IDE/components/Toolbar.js
View file

@ -34,7 +34,7 @@ function Toolbar(props) {
<span <span
className="toolbar__project-name" className="toolbar__project-name"
// TODO change this span into an input // TODO change this span into an input
onBlur={props.setProjectName.bind(this)} // eslint-disable-line onBlur={props.setProjectName.bind(this)} // eslint-disable-line
contentEditable contentEditable
suppressContentEditableWarning suppressContentEditableWarning
> >

10
client/modules/Sketch/pages/SketchListView.js
View file

@ -20,16 +20,16 @@ class SketchListView extends React.Component {
createProject={this.props.createProject} createProject={this.props.createProject}
saveProject={this.props.saveProject} saveProject={this.props.saveProject}
/> />
<table className="sketches-table"> <table className="sketches-table" summary="table containing all saved projects">
<thead> <thead>
<th>Name</th> <th scope="col">Name</th>
<th>Created</th> <th scope="col">Created</th>
<th>Last Updated</th> <th scope="col">Last Updated</th>
</thead> </thead>
<tbody> <tbody>
{this.props.sketches.map(sketch => {this.props.sketches.map(sketch =>
<tr className="sketches-table__row"> <tr className="sketches-table__row">
<td><Link to={`/projects/${sketch._id}`}>{sketch.name}</Link></td> <td scope="row"><Link to={`/projects/${sketch._id}`}>{sketch.name}</Link></td>
<td>{moment(sketch.createdAt).format('MMM D, YYYY')}</td> <td>{moment(sketch.createdAt).format('MMM D, YYYY')}</td>
<td>{moment(sketch.updatedAt).format('MMM D, YYYY')}</td> <td>{moment(sketch.updatedAt).format('MMM D, YYYY')}</td>
</tr> </tr>

10
client/styles/components/_sidebar.scss
View file

@ -1,12 +1,12 @@
.sidebar__file-list { .sidebar__file-list {
border-top: 1px solid $ide-border-color; border-top: 1px solid $ide-border-color;
} }
.sidebar__file-item { .sidebar__file-item {
padding: #{8 / $base-font-size}rem #{20 / $base-font-size}rem; padding: #{8 / $base-font-size}rem #{20 / $base-font-size}rem;
color: $light-inactive-text-color; color: $light-inactive-text-color;
cursor: pointer;
&--selected {
background-color: $ide-border-color;
}
} }
.sidebar__file-item--selected {
background-color: $ide-border-color;
}

6
client/styles/components/_signup.scss
View file

@ -6,14 +6,14 @@
justify-content: center; justify-content: center;
} }
.signup-form__username-label, .signup-form__username-label,
.signup-form__email-label, .signup-form__email-label,
.signup-form__password-label, .signup-form__password-label,
.signup-form__confirm-password-label { .signup-form__confirm-password-label {
display: none; display: none;
} }
.signup-form__username-input, .signup-form__username-input,
.signup-form__email-input, .signup-form__email-input,
.signup-form__password-input, .signup-form__password-input,
.signup-form__confirm-password-input { .signup-form__confirm-password-input {
@ -22,4 +22,4 @@
.signup-form__field { .signup-form__field {
margin: #{20 / $base-font-size}rem 0; margin: #{20 / $base-font-size}rem 0;
} }