fix(Edit Album): TabIndex to positive for keyboard tab order [#68]

danactive · Dec 11, 2016 · 0e3d4bc · 0e3d4bc
1 parent b635534
commit 0e3d4bc
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 12 deletions.
diff --git a/plugins/editAlbum/views/gallery.jsx b/plugins/editAlbum/views/gallery.jsx
@@ -1,6 +1,7 @@
 /* global GetGalleryNames */
 const React = require('react');
 
+// eslint-disable jsx-a11y/tabindex-no-positive
 class GalleryDropdown extends React.Component {
   constructor(props) {
     super(props);
@@ -28,7 +29,7 @@ class GalleryDropdown extends React.Component {
     return (
       <section>
         Gallery
-        <select id="editGalleries" tabIndex="-1" onChange={this.handleChange}>
+        <select id="editGalleries" tabIndex="1" onChange={this.handleChange}>
           <option key="gallery-none" value="">Select gallery</option>
           {this.galleryOptions}
         </select>

diff --git a/plugins/editAlbum/views/page.jsx b/plugins/editAlbum/views/page.jsx
@@ -1,5 +1,6 @@
 const React = require('react');
 
+// eslint-disable jsx-a11y/tabindex-no-positive
 function Page(props) {
   return (
     <html lang="en">
@@ -17,14 +18,14 @@ function Page(props) {
             <section id="galleryDropdown" dangerouslySetInnerHTML={{ __html: props.galleries }} />
             <div>
               Album
-              <select id="editAlbums" tabIndex="-2">
+              <select id="editAlbums" tabIndex="2">
                 <option value="">Edit these album photos</option>
               </select>
               <input type="button" id="changeAlbum" value="View" />
             </div>
             <div>
               Sort by
-              <select id="sortGallery" tabIndex="-3">
+              <select id="sortGallery" tabIndex="3">
                 <option value="">XML</option>
                 <option>City</option>
                 <option>Location</option>
@@ -45,47 +46,47 @@ function Page(props) {
               </p>
               <p>
                 <label htmlFor="city">City</label>
-                <input type="text" id="city" tabIndex="-4" />
+                <input type="text" id="city" tabIndex="4" />
                 <input type="checkbox" title="Check to disable editability" />
                 <span className="suggestions" />
               </p>
               <p>
                 <label htmlFor="location">Location</label>
-                <input type="text" id="location" tabIndex="-5" />
+                <input type="text" id="location" tabIndex="5" />
                 <input type="checkbox" title="Check to disable editability" />
                 <span className="suggestions" />
               </p>
               <p>
                 <label htmlFor="caption">Caption</label>
-                <input type="text" id="caption" tabIndex="-6" />
+                <input type="text" id="caption" tabIndex="6" />
                 <input type="checkbox" title="Check to disable editability" />
                 <span className="suggestions" />
               </p>
               <p>
                 <label htmlFor="description">Description</label>
-                <input type="text" id="description" tabIndex="-7" />
+                <input type="text" id="description" tabIndex="7" />
                 <input type="checkbox" title="Check to disable editability" />
                 <span className="suggestions" />
               </p>
               <p>
-                <label htmlFor="ref_src"><select id="ref_src" tabIndex="-8">
+                <label htmlFor="ref_src"><select id="ref_src" tabIndex="8">
                   <option />
                   <option value="facebook">Facebook</option>
                   <option value="google">Google</option>
                   <option value="wikipedia">Wikipedia</option>
                 </select></label>
-                <input type="text" id="ref_name" tabIndex="-9" title="Keywords" />
+                <input type="text" id="ref_name" tabIndex="9" title="Keywords" />
                 <input type="checkbox" title="Check to disable editability" />
                 <span className="suggestions" />
               </p>
               <p>
                 <label htmlFor="geo_lat">Geolocation</label>
-                <input type="text" id="geo_lat" className="half" tabIndex="-10" title="Latitude" />
-                <input type="text" id="geo_lon" className="half" tabIndex="-11" title="Longitude" />
+                <input type="text" id="geo_lat" className="half" tabIndex="10" title="Latitude" />
+                <input type="text" id="geo_lon" className="half" tabIndex="11" title="Longitude" />
                 <input type="checkbox" title="Check to disable editability" />
                 <span className="suggestions" />
               </p>
-              <input type="submit" value="Save" id="saveToJson" tabIndex="-12" />
+              <input type="submit" value="Save" id="saveToJson" tabIndex="12" />
             </fieldset>
             <textarea id="rawAlbumJson" /><textarea id="rawAlbumJsonToXml" />
             <div id="photoPreview" />