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">

5
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}
>
<a
onClick={() => props.setSelectedFile(file.id)} onClick={() => props.setSelectedFile(file.id)}
>{file.name}</li> >{file.name}</a>
</li>
); );
})} })}
</ul> </ul>

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>

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

@ -5,8 +5,8 @@
.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 {
.sidebar__file-item--selected {
background-color: $ide-border-color; background-color: $ide-border-color;
}
} }