fix(a11y): Move label to be before all select and text input fields (#…

…1010) * fix(a11y): Move label to be before all select and text input fields in html order * fix: Update date picker styles to fix order
carbon-design-system · Aug 1, 2018 · e128a4e · e128a4e
1 parent ad19b01
commit e128a4e
Show file tree

Hide file tree

Showing 12 changed files with 26 additions and 30 deletions.
diff --git a/src/components/date-picker/_date-picker.scss b/src/components/date-picker/_date-picker.scss
@@ -125,7 +125,7 @@
     top: rem(14px);
   }
 
-  .#{$prefix}--date-picker__icon + .#{$prefix}--date-picker__input {
+  .#{$prefix}--date-picker__icon ~ .#{$prefix}--date-picker__input {
     padding-left: $spacing-3xl;
   }
 

diff --git a/src/components/date-picker/date-picker--light.hbs b/src/components/date-picker/date-picker--light.hbs
@@ -2,9 +2,9 @@
 <div class="bx--form-item">
   <div class="bx--date-picker bx--date-picker--simple bx--date-picker--short bx--date-picker--light">
     <div class="bx--date-picker-container">
+      <label for="date-picker-4" class="bx--label">Date Picker label</label>
       <input type="text" id="date-picker-4" class="bx--date-picker__input" pattern="\d{1,2}/\d{4}" placeholder="mm/yyyy" data-date-picker-input
       />
-      <label for="date-picker-4" class="bx--label">Date Picker label</label>
     </div>
   </div>
 </div>
@@ -13,9 +13,9 @@
 <div class="bx--form-item">
   <div class="bx--date-picker bx--date-picker--simple bx--date-picker--light">
     <div class="bx--date-picker-container">
+      <label for="date-picker-6" class="bx--label">Date Picker label</label>
       <input data-invalid type="text" id="date-picker-6" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
         data-date-picker-input />
-      <label for="date-picker-6" class="bx--label">Date Picker label</label>
       <div class="bx--form-requirement">
         Invalid date format.
       </div>

diff --git a/src/components/date-picker/date-picker--range-light.hbs b/src/components/date-picker/date-picker--range-light.hbs
@@ -2,14 +2,14 @@
 <div class="bx--form-item">
   <div data-date-picker data-date-picker-type="range" class="bx--date-picker bx--date-picker--range bx--date-picker--light">
     <div class="bx--date-picker-container">
+      <label for="date-picker-1" class="bx--label">Start date label</label>
       <input type="text" id="date-picker-1" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
         data-date-picker-input-from />
-      <label for="date-picker-1" class="bx--label">Start date label</label>
     </div>
     <div class="bx--date-picker-container">
+      <label for="date-picker-2" class="bx--label">End date label</label>
       <input type="text" id="date-picker-2" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
         data-date-picker-input-to />
-      <label for="date-picker-2" class="bx--label">End date label</label>
     </div>
     <svg data-date-picker-icon class="bx--date-picker__icon" width="14" height="16" viewBox="0 0 14 16">
       <path d="M0 5h14v1H0V5zm3-5h1v4H3V0zm7 0h1v4h-1V0zM0 2.5A1.5 1.5 0 0 1 1.5 1h11A1.5 1.5 0 0 1 14 2.5v12a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 0 14.5v-12zm1 0v12a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5v-12a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5z"

diff --git a/src/components/date-picker/date-picker--range.hbs b/src/components/date-picker/date-picker--range.hbs
@@ -2,14 +2,14 @@
 <div class="bx--form-item">
   <div data-date-picker data-date-picker-type="range" class="bx--date-picker bx--date-picker--range">
     <div class="bx--date-picker-container">
+       <label for="date-picker-1" class="bx--label">Start date label</label>
       <input type="text" id="date-picker-1" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
         data-date-picker-input-from />
-      <label for="date-picker-1" class="bx--label">Start date label</label>
     </div>
     <div class="bx--date-picker-container">
+      <label for="date-picker-2" class="bx--label">End date label</label>
       <input type="text" id="date-picker-2" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
         data-date-picker-input-to />
-      <label for="date-picker-2" class="bx--label">End date label</label>
     </div>
     <svg data-date-picker-icon class="bx--date-picker__icon" width="14" height="16" viewBox="0 0 14 16">
       <path d="M0 5h14v1H0V5zm3-5h1v4H3V0zm7 0h1v4h-1V0zM0 2.5A1.5 1.5 0 0 1 1.5 1h11A1.5 1.5 0 0 1 14 2.5v12a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 0 14.5v-12zm1 0v12a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5v-12a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5z"

diff --git a/src/components/date-picker/date-picker--single-light.hbs b/src/components/date-picker/date-picker--single-light.hbs
@@ -6,9 +6,9 @@
         <path d="M0 5h14v1H0V5zm3-5h1v4H3V0zm7 0h1v4h-1V0zM0 2.5A1.5 1.5 0 0 1 1.5 1h11A1.5 1.5 0 0 1 14 2.5v12a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 0 14.5v-12zm1 0v12a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5v-12a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5z"
           fill-rule="nonzero" />
       </svg>
+      <label for="date-picker-3" class="bx--label">Date Picker label</label>
       <input type="text" id="date-picker-3" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
         data-date-picker-input />
-      <label for="date-picker-3" class="bx--label">Date Picker label</label>
     </div>
   </div>
 </div>
@@ -21,9 +21,9 @@
         <path d="M0 5h14v1H0V5zm3-5h1v4H3V0zm7 0h1v4h-1V0zM0 2.5A1.5 1.5 0 0 1 1.5 1h11A1.5 1.5 0 0 1 14 2.5v12a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 0 14.5v-12zm1 0v12a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5v-12a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5z"
           fill-rule="nonzero" />
       </svg>
+      <label for="date-picker-3" class="bx--label">Date Picker label</label>
       <input data-invalid type="text" id="date-picker-3" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
         data-date-picker-input />
-      <label for="date-picker-3" class="bx--label">Date Picker label</label>
       <div class="bx--form-requirement">
         Invalid date format.
       </div>

diff --git a/src/components/date-picker/date-picker--single.hbs b/src/components/date-picker/date-picker--single.hbs
@@ -6,9 +6,9 @@
         <path d="M0 5h14v1H0V5zm3-5h1v4H3V0zm7 0h1v4h-1V0zM0 2.5A1.5 1.5 0 0 1 1.5 1h11A1.5 1.5 0 0 1 14 2.5v12a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 0 14.5v-12zm1 0v12a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5v-12a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5z"
           fill-rule="nonzero" />
       </svg>
+      <label for="date-picker-3" class="bx--label">Date Picker label</label>
       <input type="text" id="date-picker-3" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
         data-date-picker-input />
-      <label for="date-picker-3" class="bx--label">Date Picker label</label>
     </div>
   </div>
 </div>
@@ -21,9 +21,9 @@
         <path d="M0 5h14v1H0V5zm3-5h1v4H3V0zm7 0h1v4h-1V0zM0 2.5A1.5 1.5 0 0 1 1.5 1h11A1.5 1.5 0 0 1 14 2.5v12a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 0 14.5v-12zm1 0v12a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5v-12a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5z"
           fill-rule="nonzero" />
       </svg>
+      <label for="date-picker-3" class="bx--label">Date Picker label</label>
       <input data-invalid type="text" id="date-picker-3" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
         data-date-picker-input />
-      <label for="date-picker-3" class="bx--label">Date Picker label</label>
       <div class="bx--form-requirement">
         Invalid date format.
       </div>

diff --git a/src/components/date-picker/date-picker.hbs b/src/components/date-picker/date-picker.hbs
@@ -2,9 +2,9 @@
 <div class="bx--form-item">
   <div class="bx--date-picker bx--date-picker--simple bx--date-picker--short">
     <div class="bx--date-picker-container">
+      <label for="date-picker-4" class="bx--label">Date Picker label</label>
       <input type="text" id="date-picker-4" class="bx--date-picker__input" pattern="\d{1,2}/\d{4}" placeholder="mm/yyyy" data-date-picker-input
       />
-      <label for="date-picker-4" class="bx--label">Date Picker label</label>
     </div>
   </div>
 </div>
@@ -13,9 +13,9 @@
 <div class="bx--form-item">
   <div class="bx--date-picker bx--date-picker--simple">
     <div class="bx--date-picker-container">
+      <label for="date-picker-6" class="bx--label">Date Picker label</label>
       <input data-invalid type="text" id="date-picker-6" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
         data-date-picker-input />
-      <label for="date-picker-6" class="bx--label">Date Picker label</label>
       <div class="bx--form-requirement">
         Invalid date format.
       </div>

diff --git a/src/components/number-input/number-input.hbs b/src/components/number-input/number-input.hbs
@@ -12,13 +12,14 @@
         </svg>
       </button>
     </div>
-    <input id="number-input" type="number" min="0" max="100" value="1">
     <label for="number-input" class="bx--label">Number Input label</label>
+    <input id="number-input" type="number" min="0" max="100" value="1">
   </div>
 </div>
 
 <div class="bx--form-item">
   <div data-invalid data-numberinput class="bx--number{{#if light}} bx--number--light{{/if}}">
+    <label for="number-input" class="bx--label">Number Input label</label>
     <input id="number-input" type="number" min="0" max="100" value="1">
     <div class="bx--number__controls">
       <button class="bx--number__control-btn up-icon">
@@ -32,7 +33,6 @@
         </svg>
       </button>
     </div>
-    <label for="number-input" class="bx--label">Number Input label</label>
     <div class="bx--form-requirement">
       Invalid number
     </div>
@@ -41,6 +41,7 @@
 
 <div class="bx--form-item">
   <div data-numberinput class="bx--number{{#if light}} bx--number--light{{/if}}">
+    <label for="number-input" class="bx--label">Number Input label</label>
     <input id="number-input" type="number" min="0" max="100" value="1">
     <div class="bx--number__controls">
       <button class="bx--number__control-btn up-icon">
@@ -54,7 +55,6 @@
         </svg>
       </button>
     </div>
-    <label for="number-input" class="bx--label">Number Input label</label>
     <div class="bx--form__helper-text">
       Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
     </div>

diff --git a/src/components/search/search.hbs b/src/components/search/search.hbs
@@ -1,8 +1,7 @@
 {{#is suffix "sm"}}
 <div class="bx--form-item">{{/is}}
   <div data-search class="bx--search bx--search--{{suffix}}{{#if light}} bx--search--light{{/if}}" role="search">
-    {{#is suffix "sm"}}
-    <label id="search-input-label-1" class="bx--label" for="search__input-1">Search</label>{{/is}}
+    <label id="search-input-label-1" class="bx--label" for="search__input-1">Search</label>
     <input class="bx--search-input" type="text" role="search" id="search__input-1" placeholder="Search" aria-labelledby="search-input-label-2">
     <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16">
       <path d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm4.936-1.27l4.563 4.557-.707.708-4.563-4.558a6.5 6.5 0 1 1 .707-.707z"
@@ -15,8 +14,5 @@
           fill-rule="evenodd" />
       </svg>
     </button>
-    {{#is suffix "lg"}}
-    <label class="bx--label" id="search-input-label-1" for="search__input-1">Search</label>
-    {{/is}}
   </div>
   {{#is suffix "sm"}}</div>{{/is}}
diff --git a/src/components/select/select.hbs b/src/components/select/select.hbs
@@ -1,5 +1,6 @@
 <div class="bx--form-item">
   <div class="bx--select{{#if inline}} bx--select--inline{{/if}}{{#if light}} bx--select--light{{/if}}">
+    <label for="select-id" class="bx--label">Select label</label>
     <select {{#if invalid}}data-invalid{{/if}} id="select-id" class="bx--select-input">
       <option class="bx--select-option" disabled selected hidden>Choose an option</option>
       <option class="bx--select-option" value="solong">A much longer option that is worth having around to check how text flows</option>
@@ -15,7 +16,6 @@
     <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5">
       <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
     </svg>
-    <label for="select-id" class="bx--label">Select label</label>
     {{#if invalid}}
     <div class="bx--form-requirement">
       Validation message here

diff --git a/src/components/text-area/text-area.hbs b/src/components/text-area/text-area.hbs
@@ -1,19 +1,19 @@
 <div class="bx--form-item">
-  <textarea id="text-area-2" class="bx--text-area bx--text-area--v2{{#if light}} bx--text-area--light{{/if}}" rows="4" cols="50" placeholder="Placeholder text."></textarea>
   <label for="text-area-2" class="bx--label">Text Area label</label>
+  <textarea id="text-area-2" class="bx--text-area bx--text-area--v2{{#if light}} bx--text-area--light{{/if}}" rows="4" cols="50" placeholder="Placeholder text."></textarea>
 </div>
 
 <div class="bx--form-item">
-  <textarea data-invalid id="text-area-3" class="bx--text-area bx--text-area--v2{{#if light}} bx--text-area--light{{/if}}" rows="4" cols="50" placeholder="Placeholder text."></textarea>
   <label for="text-area-3" class="bx--label">Text Area label</label>
+  <textarea data-invalid id="text-area-3" class="bx--text-area bx--text-area--v2{{#if light}} bx--text-area--light{{/if}}" rows="4" cols="50" placeholder="Placeholder text."></textarea>
   <div class="bx--form-requirement">
     Validation message here
   </div>
 </div>
 
 <div class="bx--form-item">
-  <textarea id="text-area-4" class="bx--text-area bx--text-area--v2{{#if light}} bx--text-area--light{{/if}}" rows="4" cols="50" placeholder="Placeholder text."></textarea>
   <label for="text-area-4" class="bx--label">Text Area label</label>
+  <textarea id="text-area-4" class="bx--text-area bx--text-area--v2{{#if light}} bx--text-area--light{{/if}}" rows="4" cols="50" placeholder="Placeholder text."></textarea>
   <div class="bx--form__helper-text">
     Optional helper text goes here
   </div>

diff --git a/src/components/text-input/text-input.hbs b/src/components/text-input/text-input.hbs
@@ -1,33 +1,33 @@
 <div class="bx--form-item">
-  <input id="text-input-3" type="text" class="bx--text-input{{#if light}} bx--text-input--light{{/if}}" placeholder="Optional placeholder text">
   <label for="text-input-3" class="bx--label">Text Input label</label>
+  <input id="text-input-3" type="text" class="bx--text-input{{#if light}} bx--text-input--light{{/if}}" placeholder="Optional placeholder text">
 </div>
 
 <div class="bx--form-item">
-  <input data-invalid id="text-input-4" type="text" class="bx--text-input{{#if light}} bx--text-input--light{{/if}}" placeholder="Optional placeholder text">
   <label for="text-input-4" class="bx--label">Text Input label</label>
+  <input data-invalid id="text-input-4" type="text" class="bx--text-input{{#if light}} bx--text-input--light{{/if}}" placeholder="Optional placeholder text">
   <div class="bx--form-requirement">
     Validation message here
   </div>
 </div>
 
 <div class="bx--form-item">
-  <input id="text-input-5" type="text" class="bx--text-input{{#if light}} bx--text-input--light{{/if}}" placeholder="Optional placeholder text">
   <label for="text-input-5" class="bx--label">Text Input label</label>
+  <input id="text-input-5" type="text" class="bx--text-input{{#if light}} bx--text-input--light{{/if}}" placeholder="Optional placeholder text">
   <div class="bx--form__helper-text">
     Optional helper text goes here
   </div>
 </div>
 
 <div class="bx--form-item" style="width: 300px">
-  <input id="text-input-5" type="text" class="bx--text-input{{#if light}} bx--text-input--light{{/if}}" placeholder="Optional placeholder text">
   <label for="text-input-5" class="bx--label">Text Input label</label>
+  <input id="text-input-5" type="text" class="bx--text-input{{#if light}} bx--text-input--light{{/if}}" placeholder="Optional placeholder text">
   <div class="bx--form__helper-text">
     Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
   </div>
 </div>
 
 <div class="bx--form-item">
-  <input id="text-input-6" type="text" class="bx--text-input{{#if light}} bx--text-input--light{{/if}}" placeholder="Optional placeholder text" disabled>
   <label for="text-input-6" class="bx--label bx--label--disabled">Text Input label</label>
+  <input id="text-input-6" type="text" class="bx--text-input{{#if light}} bx--text-input--light{{/if}}" placeholder="Optional placeholder text" disabled>
 </div>