accessibility added, complete

andrewdavidfrankiejasmine · Jun 11, 2019 · 71b1b8a · 71b1b8a
1 parent bf2062e
commit 71b1b8a
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 11 deletions.
diff --git a/src/components/AddSchool.js b/src/components/AddSchool.js
@@ -79,7 +79,6 @@ class AddSchool extends Component {
               name="name"
               value={this.state.name}
               onChange={this.handleChange}
-              // ref={this.focusHere}
             />
           </div>
 

diff --git a/src/components/Notes.js b/src/components/Notes.js
@@ -8,6 +8,7 @@ import AddSchool from './AddSchool.js';
 class Notes extends Component {
   constructor() {
     super();
+    this.focusHere = React.createRef()
     this.state = {
       bookmarkList: [],
       userNote: '',
@@ -19,6 +20,10 @@ class Notes extends Component {
     }
   }
 
+  componentDidUpdate() {
+    this.focusHere.current.focus()
+  }
+
   componentDidMount() {
     const dbRef = firebase.database().ref();
     dbRef.on('value', (response) => {
@@ -134,7 +139,7 @@ class Notes extends Component {
 
             <form action="" className="editForm" onSubmit={this.handleSubmit}>
               <label htmlFor="name">Name of Institution:</label>
-              <input type="text" id="name" name="userName" onChange={this.handleChange} value={this.state.userName} />
+              <input type="text" id="name" name="userName" onChange={this.handleChange} value={this.state.userName} ref={this.focusHere}/>
 
               <label htmlFor="address">Address:</label>
               <input type="text" id="address" name="userAddress" onChange={this.handleChange} value={this.state.userAddress} />
@@ -215,10 +220,13 @@ class Notes extends Component {
           />
         </ul>
 
-        {this.state.modalOpen === 'open' ? 
+        {/* {this.state.modalOpen === 'open' ? 
         <AddSchool />
         : 
-        null }
+        null } */}
+
+        <AddSchool />
+
       </div>
     )
   }

diff --git a/src/components/SchoolDetails.js b/src/components/SchoolDetails.js
@@ -29,28 +29,29 @@ class SchoolDetails extends Component {
           <div className="detailsFlex">
 
             {/* close modal button */}
-            <button onClick={this.props.closeMe} className="closeButton" ref={this.x}>
+            <button onClick={this.props.closeMe} className="closeButton" ref={this.x} tabIndex='5'>
               <i className="fas fa-times" aria-label="close modal" />
             </button>
 
             {/* display a photo if available */}
             {bestPhoto !== undefined ? (
               <div className="imgWrapper">
                 {/* since I see some photos are not as large as the size of 500x500 I changed it to 400 */}
-                <img src={`${bestPhoto.prefix}400x400${bestPhoto.suffix}`} alt={`${name}`} />
+                <img src={`${bestPhoto.prefix}400x400${bestPhoto.suffix}`} alt={`${name}`} tabIndex='5'/>
               </div>
             ) : null}
 
             <div className="smallInfoWrapper">
-              <p>{name}</p>
-              <p>{location.formattedAddress}</p>
+              <p tabIndex='5'>{name}</p>
+              <p tabIndex='5'>{location.formattedAddress}</p>
 
               {/* display facebook link if available */}
               {contact.facebook ? (
                 <p><a
                   target="_blank"
                   rel="noopener noreferrer"
                   href={`https://www.facebook.com/${contact.facebook}`}
+                  tabIndex='5'
                 >
                   <i className="fab fa-facebook" aria-label="Go to facebook" /> {contact.facebookName}
                 </a></p>
@@ -62,21 +63,22 @@ class SchoolDetails extends Component {
                   target="_blank"
                   rel="noopener noreferrer"
                   href={`https://twitter.com/${contact.twitter}`}
+                  tabIndex='5'
                 >
                   <i className="fab fa-twitter" aria-label="Go to twitter" /> @{contact.twitter}
                 </a></p>
               ) : null}
 
               {/* display website link if available */}
               {url !== undefined ? (
-                <p><a target="_blank" rel="noopener noreferrer" href={url}>
+                <p><a target="_blank" rel="noopener noreferrer" href={url} tabIndex='5'>
                   <i className="fas fa-link" aria-label="Go to website" /> Website
                 </a></p>
               ) : null}
 
               {/* display address if available */}
               {contact.formattedAddress ? (
-                <p>
+                <p tabIndex='5'>
                   <span>
                     <i className="fas fa-phone" />
                   </span>{' '}
@@ -87,7 +89,7 @@ class SchoolDetails extends Component {
 
             {/* display description if available */}
             <div className="descriptionWrapper">
-              {description !== undefined ? <p>{description}</p> : null}
+              {description !== undefined ? <p tabIndex='5'>{description}</p> : null}
             </div>
             {/* end of wrappers */}
           </div>