Skip to content

Commit

Permalink
Merge pull request #43 from lit-tracker-project-6/markAccessibilityCheck
Browse files Browse the repository at this point in the history 
added accessibility on buttons and interactable elements
  • Loading branch information
@imbrianarm
imbrianarm committed Mar 12, 2019
2 parents 190b5dc + 7e9cbab commit 631c4aa
Show file tree
Hide file tree
Showing 4 changed files with 20 additions and 19 deletions.
1 change: 1 addition & 0 deletions src/App.css
View file
Expand Up @@ -6,6 +6,7 @@ Light-Grey: #deedf5;
Off-White: #fbfbff;
*/


html {
font-size: 125%;
font-family: 'Josefin Sans', sans-serif;
Expand Down
2 changes: 1 addition & 1 deletion src/App.js
View file
Expand Up @@ -280,7 +280,7 @@ class App extends Component {
handleListModal={this.handleListModal}
/>
<div className="banner"></div>
<div className="mainContent clearfix">
<div className="mainContent clearfix" aria-live='polite'>
{this.state.activeList === null && this.state.listModal === false &&
this.state.searchModal !== true && <Landing />}
<Lists
Expand Down
26 changes: 13 additions & 13 deletions src/components/Active.js
View file
Expand Up @@ -58,11 +58,11 @@ class Active extends Component {
<p>Read:</p>
{
each.isCompleted ?
<button className='checkButton checked' key={`complete${i}`} value={each.bookKey} onClick={(e) => { this.props.markCompleted(e) }}><i className="fas fa-check"></i></button> :
<button className="checkButton" key={`complete${i}`} value={each.bookKey} onClick={(e) => { this.props.markCompleted(e) }}><i className="fas fa-check"></i></button>
<button aria-label={`${each.bookTitle} has been finished, click to mark unfinished`} className='checkButton checked' key={`complete${i}`} value={each.bookKey} onClick={(e) => { this.props.markCompleted(e) }}><i className="fas fa-check"></i></button> :
<button aria-label={`${each.bookTitle} is unfinished, click to mark finished`} className="checkButton" key={`complete${i}`} value={each.bookKey} onClick={(e) => { this.props.markCompleted(e) }}><i className="fas fa-check"></i></button>
}
</div>
<button className="deleteBook" title="remove from list" key={`delete${i}`} value={each.bookKey} onClick={(e) => { this.props.deleteBook(e) }}><i className="fas fa-trash"></i></button>
<button aria-label={`Delete ${each.bookTitle} from this list`} className="deleteBook" title="remove from list" key={`delete${i}`} value={each.bookKey} onClick={(e) => { this.props.deleteBook(e) }}><i className="fas fa-trash"></i></button>
</div>
</div>
)
Expand All @@ -81,11 +81,11 @@ class Active extends Component {
<p>Read:</p>
{
each.isCompleted === true ?
<button className="checkButton checked" key={`complete${i}`} value={booksKeys[i]} onClick={(e) => { this.props.markCompleted(e) }}><i className="fas fa-check"></i></button> :
<button className="checkButton" key={`complete${i}`} value={booksKeys[i]} onClick={(e) => { this.props.markCompleted(e) }}><i className="fas fa-check"></i></button>
<button aria-label={`${each.bookTitle} has been finished, click to mark unfinished`} className="checkButton checked" key={`complete${i}`} value={booksKeys[i]} onClick={(e) => { this.props.markCompleted(e) }}><i className="fas fa-check"></i></button> :
<button aria-label={`${each.bookTitle} is unfinished, click to mark finished`} className="checkButton" key={`complete${i}`} value={booksKeys[i]} onClick={(e) => { this.props.markCompleted(e) }}><i className="fas fa-check"></i></button>
}
</div>
<button className="deleteBook" title="remove from list" key={`delete${i}`} value={booksKeys[i]} onClick={(e) => { this.props.deleteBook(e) }}><i className="fas fa-trash"></i></button>
</div>
<button aria-label={`Delete ${each.bookTitle} from this list`} className="deleteBook" title="remove from list" key={`delete${i}`} value={booksKeys[i]} onClick={(e) => { this.props.deleteBook(e) }}><i className="fas fa-trash"></i></button>
</div>
</div>
)
Expand Down Expand Up @@ -121,9 +121,9 @@ class Active extends Component {
// return the percent read, rounded to the nearest integer

if (completedBooks === numBooks) {
return <p className="progress complete">{progressString} books read</p>;
return <p aria-live="polite" className="progress complete">{progressString} books read</p>;
} else {
return <p className="progress">{progressString} books read</p>;
return <p aria-live="polite" className="progress">{progressString} books read</p>;
}
}
} // calculateProgress function ends
Expand Down Expand Up @@ -215,15 +215,15 @@ class Active extends Component {

<div className='active'>
<div className="activeHeading clearfix">
<button className="close" title="close list" onClick={this.props.closeActiveList}><i className="fas fa-times"></i></button>
<button aria-label={`Close ${this.props.passedState.activeList}`} className="close" title="close list" onClick={this.props.closeActiveList} onKeyPress={this.props.closeActiveList}><i className="fas fa-times"></i></button>
<h2>{this.props.passedState.activeList}</h2>
<div className="activeHeadingButtons clearfix">
<button title="Add books" className="addBooks" onClick={this.props.handleSearchModalOn}><i className="fas fa-book-medical"></i></button>
<button aria-label="Look for books to add" title="Add books" className="addBooks" onClick={this.props.handleSearchModalOn}><i className="fas fa-book-medical"></i></button>
{this.calculateProgress()}
<div className="sorting">
<p>Sort by: </p>
<button className="rating" title="rating" onClick={this.sortBooksByRating}><i className="fas fa-star"></i></button>
<button className="date" title="date added" onClick={this.sortBooksByDateAdded}><i className="fas fa-calendar-day"></i></button>
<button aria-label="Sort books by rating" className="rating" title="rating" onClick={this.sortBooksByRating}><i className="fas fa-star"></i></button>
<button aria-label="Sort books by date added" className="date" title="date added" onClick={this.sortBooksByDateAdded}><i className="fas fa-calendar-day"></i></button>
</div>
</div>

Expand Down
10 changes: 5 additions & 5 deletions src/components/Lists.js
View file
Expand Up @@ -34,18 +34,18 @@ class Lists extends Component{
<h2>Reading Lists</h2>
<div className="addList">
<form action="submit" onSubmit={this.handleSubmit} ref={(el) => this.myFormRef = el}>
<input type="text" onChange={this.handleChange} placeholder="Create new list" required/>
<button type="submit"><i className="fas fa-plus"></i></button>
<input aria-label="Input New List Title" type="text" onChange={this.handleChange} placeholder="Create new list" required/>
<button aria-label="Add New List" type="submit"><i className="fas fa-plus"></i></button>
</form>
</div>
<div className="showLists">
{
this.props.passedState.lists.map(data => {
this.props.passedState.lists.map((data,i) => {
return(
<div className="list clearfix" key={data.key}>
<i className="fas fa-bookmark"></i>
<p onClick={() => {this.props.handleActiveList(data)}}>{data.listTitle}</p>
<button className="hidden" onClick={() => this.props.deleteList(data.key)}><i className="fas fa-trash"></i></button>
<p tabIndex='0' role="button" onClick={() => { this.props.handleActiveList(data) }} onKeyPress={() => { this.props.handleActiveList(data) }}>{data.listTitle}</p>
<button aria-label={`Delete ${data.listTitle}`} className="hidden" onClick={() => this.props.deleteList(data.key)}><i className="fas fa-trash"></i></button>
</div>
)
})
Expand Down

0 comments on commit 631c4aa

Please sign in to comment.