Merge pull request #11 from Hoziefa/feature/lighthouse-test-improvements

Add names to action buttons to improve accessibility, add robots inst…
Hoziefa · Apr 7, 2021 · 8eb7ccb · 8eb7ccb
2 parents ac72ea0 + 0e7095e
commit 8eb7ccb
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 9 deletions.
diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/src/assets/styles/abstracts/_mixins.scss b/src/assets/styles/abstracts/_mixins.scss
@@ -411,7 +411,7 @@
 
                             .todo-estimate--date {
                                 font-size: 80%;
-                                color: gray;
+                                color: #616161;
                             }
                         }
 

diff --git a/src/components/common/NavBar.tsx b/src/components/common/NavBar.tsx
@@ -33,7 +33,7 @@ class NavBar extends Component<INavBarProps, INavBarState> {
             <nav className={ `main-nav ${ open ? 'open' : '' }`.trim() } ref={ this.navRef }>
                 <div className="container">
                     <div className="logo">
-                        <Link to="/"><img src={ logo } alt="logo" /></Link>
+                        <Link to="/"><img src={ logo } alt="logo" width="512" height="512" /></Link>
                     </div>
 
                     <button

diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx
@@ -45,7 +45,7 @@ class Home extends Component<{}, IHomeState> {
                             <i className="fas fa-search" />
                         </div>
 
-                        <button className="add-todo-btn" onClick={ this.onDisplayAddTodoModal }><i className="fas fa-plus" /></button>
+                        <button className="add-todo-btn" aria-label="add-todo" onClick={ this.onDisplayAddTodoModal }><i className="fas fa-plus" /></button>
                     </SectionHeading>
 
                     { loading

diff --git a/src/components/reusableComponents/SectionHeading.tsx b/src/components/reusableComponents/SectionHeading.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 export const SectionHeading: React.FC<{ icon?: string; title: string }> = ({ icon, title, children }): JSX.Element => (
     <div className="section-heading">
         <div className="section-icon">{ icon ?? <i className="fas fa-list" /> }</div>
-        <h5 className="section-title">{ title }</h5>
+        <h2 className="section-title">{ title }</h2>
         { children }
     </div>
 );
diff --git a/src/components/reusableComponents/Todo.tsx b/src/components/reusableComponents/Todo.tsx
@@ -44,11 +44,11 @@ class Todo extends Component<ITodoProps, ITodoState> {
                         </div>
 
                         <div className="actions">
-                            <button className="confirm-todo--btn" onClick={ (): void => this.onConfirmEditTodo(todo) }>
+                            <button className="confirm-todo--btn" aria-label="confirm" onClick={ (): void => this.onConfirmEditTodo(todo) }>
                                 <i className="fas fa-check" />
                             </button>
 
-                            <button className="cancel-todo--btn" onClick={ this.onCancelEditTodo }>
+                            <button className="cancel-todo--btn" aria-label="cancel" onClick={ this.onCancelEditTodo }>
                                 <i className="fas fa-times" />
                             </button>
                         </div>
@@ -74,9 +74,9 @@ class Todo extends Component<ITodoProps, ITodoState> {
                         </div>
 
                         <div className="actions">
-                            { !todo.completed && <button className="edit-todo--btn" onClick={ this.onEditTodoMode }><i className="fas fa-pen" /></button> }
+                            { !todo.completed && <button className="edit-todo--btn" aria-label="edit" onClick={ this.onEditTodoMode }><i className="fas fa-pen" /></button> }
 
-                            <button className="delete-todo--btn" onClick={ (): void => this.onDeleteTodo(todo.id!) }><i className="fas fa-trash" /></button>
+                            <button className="delete-todo--btn" aria-label="delete" onClick={ (): void => this.onDeleteTodo(todo.id!) }><i className="fas fa-trash" /></button>
                         </div>
                     </>
                 ) }

diff --git a/src/components/todos/Todos.tsx b/src/components/todos/Todos.tsx
@@ -23,7 +23,7 @@ class Todos extends Home {
                     <div className="todos section">
                         <SectionHeading title="to-do list">
                             <div className="calendar-container">
-                                <button className="clear-calendar--btn" onClick={ this.onResetDate }>reset <i className="fas fa-times" /></button>
+                                <button className="clear-calendar--btn" aria-label="clear" onClick={ this.onResetDate }>reset <i className="fas fa-times" /></button>
 
                                 <Calendar onChange={ this.onDateChange } value={ filterDate } showDoubleView />
                             </div>