Add aria-labels to all input elements without a label to address #140 …

…and #141
Susurrus-LLC · Jan 4, 2019 · 0e06d1f · 0e06d1f
1 parent ce65ab8
commit 0e06d1f
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ The format of this changelog is based on [Keep a Changelog](https://keepachangel
 
 - Add option to choose whether to italicize changed results.
 - Reformat the MorphForm controls to save space.
+- Add aria-labels to all input elements without a label. (See [issue #141](https://github.com/nai888/langua/issues/141).)
 
 ### Changed 0.4.2
 

diff --git a/src/routes/Deriv/DerivForm.js b/src/routes/Deriv/DerivForm.js
@@ -22,6 +22,7 @@ const DerivForm = props => {
         className={props.styles.lexemeInput}
         value={lexeme.lexeme}
         onChange={props.change}
+        aria-label={`Word for lexeme ${index}`}
       />
       <input
         type='text'
@@ -30,6 +31,7 @@ const DerivForm = props => {
         className={props.styles.lexemeDefInput}
         value={lexeme.definition}
         onChange={props.change}
+        aria-label={`Gloss for lexeme ${index}`}
       />
       <div className={props.styles.clearButton}>
         <Button
@@ -38,6 +40,7 @@ const DerivForm = props => {
           ver='danger'
           addClass='small'
           type='button'
+          aria-label={`Delete lexeme ${index}`}
         >
           Delete
         </Button>
@@ -54,6 +57,7 @@ const DerivForm = props => {
         className={props.styles.derivationInput}
         value={derivation.derivation}
         onChange={props.change}
+        aria-label={`Affix ${index}`}
       />
       <input
         type='text'
@@ -62,6 +66,7 @@ const DerivForm = props => {
         className={props.styles.derivationGlossInput}
         value={derivation.gloss}
         onChange={props.change}
+        aria-label={`Gloss for affix ${index}`}
       />
       <input
         type='text'
@@ -70,6 +75,7 @@ const DerivForm = props => {
         className={props.styles.derivationDefInput}
         value={derivation.definition}
         onChange={props.change}
+        aria-label={`Definition for affix ${index}`}
       />
       <div className={props.styles.clearButton}>
         <Button
@@ -78,6 +84,7 @@ const DerivForm = props => {
           ver='danger'
           addClass='small'
           type='button'
+          aria-label={`Delete lexeme ${index}`}
         >
           Delete
         </Button>

diff --git a/src/routes/Frequen/FrequenForm.js b/src/routes/Frequen/FrequenForm.js
@@ -29,6 +29,7 @@ const FrequenForm = props => {
           name='corpus'
           value={props.state.corpus}
           onChange={props.onChangeInput}
+          aria-label='Text corpus'
         />
       </div>
       <div className={classNames(props.styles.consonants, props.classes.part)}>
@@ -40,6 +41,7 @@ const FrequenForm = props => {
           type='text'
           value={props.state.consonants}
           onChange={props.onChangeInput}
+          aria-label='Consonants'
         />
       </div>
       <div className={classNames(props.styles.vowels, props.classes.part)}>
@@ -51,6 +53,7 @@ const FrequenForm = props => {
           type='text'
           value={props.state.vowels}
           onChange={props.onChangeInput}
+          aria-label='Vowels'
         />
       </div>
       <Control addedClasses={props.classes.part}>

diff --git a/src/routes/Gen/GenForm.js b/src/routes/Gen/GenForm.js
@@ -29,6 +29,7 @@ const GenForm = props => {
         value={subpattern.selected}
         onChange={props.change}
         className={props.styles.select}
+        aria-label={`Variable name for subpattern ${index}`}
       >
         {selectOptions}
       </select>
@@ -39,6 +40,7 @@ const GenForm = props => {
         className={props.styles.subpatternInput}
         value={subpattern.subpattern}
         onChange={props.change}
+        aria-label={`Subpattern ${index}`}
       />
       <div className={props.styles.clearButton}>
         <Button
@@ -47,6 +49,7 @@ const GenForm = props => {
           ver='danger'
           addClass='small'
           type='button'
+          aria-label={`Delete subpattern ${index}`}
         >
           Delete
         </Button>
@@ -64,6 +67,7 @@ const GenForm = props => {
             ver='success'
             addClass='small'
             type='button'
+            aria-label='Add a new subpattern'
           >
             Add
           </Button>
@@ -94,6 +98,7 @@ const GenForm = props => {
           className={props.styles.patternInput}
           value={props.data.pattern}
           onChange={props.change}
+          aria-label='Pattern'
         />
       </div>
       <Control addedClasses={props.classes.part}>
@@ -119,6 +124,7 @@ const GenForm = props => {
               className={props.styles.wordsInput}
               value={props.data.words}
               onChange={props.change}
+              aria-label='Number of words to generate'
             />
           </ControlPiece>
           <ControlPiece>

diff --git a/src/routes/Morph/MorphForm.js b/src/routes/Morph/MorphForm.js
@@ -42,6 +42,7 @@ const MorphForm = props => {
               )}
               value={join(props.data.categories)}
               onChange={props.change}
+              aria-label='Categories'
             />
             <div className={props.styles.textAreaSpacer}>
               {join(props.data.categories)}
@@ -67,6 +68,7 @@ const MorphForm = props => {
               )}
               value={join(props.data.rewriteRules)}
               onChange={props.change}
+              aria-label='Rewrite rules'
             />
             <div className={props.styles.textAreaSpacer}>
               {join(props.data.rewriteRules)}
@@ -92,6 +94,7 @@ const MorphForm = props => {
               )}
               value={join(props.data.soundChanges)}
               onChange={props.change}
+              aria-label='Sound Changes'
             />
             <div className={props.styles.textAreaSpacer}>
               {join(props.data.soundChanges)}
@@ -117,6 +120,7 @@ const MorphForm = props => {
               )}
               value={join(props.data.lexicon)}
               onChange={props.change}
+              aria-label='Lexicon'
             />
             <div className={props.styles.textAreaSpacer}>
               {join(props.data.lexicon)}