Merge pull request #840 from bc-annavu/sr_only

Deprecate u-hiddenVisually in labels
bigcommerce · Sep 16, 2016 · 32575cc · 32575cc
2 parents 8420172 + c0f3f62
commit 32575cc
Show file tree

Hide file tree

Showing 7 changed files with 11 additions and 11 deletions.
diff --git a/templates/components/account/order-contents.html b/templates/components/account/order-contents.html
@@ -15,7 +15,7 @@ <h5 class="account-listShipping-title">{{lang 'account.orders.details.ship_to_mu
                 {{#if show_reorder}}
                     <input class="form-checkbox" type="checkbox" id="account-product-id-{{order_product_id}}" value="{{order_product_id}}">
                     <label for="account-product-id-{{order_product_id}}" class="form-label">
-                        <span class="u-hiddenVisually">Checkbox {{order_product_id}} label</span>
+                        <span class="is-srOnly">Checkbox {{order_product_id}} label</span>
                     </label>
                 {{/if}}
             </div>
@@ -30,7 +30,7 @@ <h5 class="account-listShipping-title">{{lang 'account.orders.details.ship_to_mu
                 {{#unless refunded}}
                     {{#if download_url}}
                         <a href="{{download_url}}" class="account-product-download button button--primary">
-                            <span class="u-hiddenVisually">{{lang 'account.orders.details.download_items'}}</span>
+                            <span class="is-srOnly">{{lang 'account.orders.details.download_items'}}</span>
                             <span class="icon">
                                 <svg>
                                     <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-down"></use>

diff --git a/templates/components/cart/content.html b/templates/components/cart/content.html
@@ -91,7 +91,7 @@ <h4 class="cart-item-name"><a href="{{url}}">{{name}}</a></h4>
                     <div class="form-increment">
                         {{# if can_modify}}
                             <button class="button button--icon" data-cart-update data-cart-itemid="{{id}}" data-action="dec">
-                                <span class="u-hiddenVisually">{{lang 'products.quantity_decrease'}}</span>
+                                <span class="is-srOnly">{{lang 'products.quantity_decrease'}}</span>
                                 <i class="icon" aria-hidden="true"><svg><use xlink:href="#icon-keyboard-arrow-down" /></svg></i>
                             </button>
                         {{/if}}
@@ -109,7 +109,7 @@ <h4 class="cart-item-name"><a href="{{url}}">{{name}}</a></h4>
                                aria-live="polite"{{#unless can_modify}} disabled{{/unless}}>
                         {{# if can_modify}}
                             <button class="button button--icon" data-cart-update data-cart-itemid="{{id}}" data-action="inc">
-                                <span class="u-hiddenVisually">{{lang 'products.quantity_increase'}}</span>
+                                <span class="is-srOnly">{{lang 'products.quantity_increase'}}</span>
                                 <i class="icon" aria-hidden="true"><svg><use xlink:href="#icon-keyboard-arrow-up" /></svg></i>
                             </button>
                         {{/if}}

diff --git a/templates/components/common/quick-search.html b/templates/components/common/quick-search.html
@@ -3,7 +3,7 @@
     <form class="form" action="{{urls.search}}">
         <fieldset class="form-fieldset">
             <div class="form-field">
-                <label class="u-hiddenVisually" for="search_query">{{lang "search.quick_search.input_label"}}</label>
+                <label class="is-srOnly" for="search_query">{{lang "search.quick_search.input_label"}}</label>
                 <input class="form-input" data-search-quick name="search_query" id="search_query" data-error-message="{{lang 'search.error.empty_field'}}" placeholder="{{lang 'search.quick_search.input_placeholder'}}" autocomplete="off">
             </div>
         </fieldset>

diff --git a/templates/components/common/search-box.html b/templates/components/common/search-box.html
@@ -2,7 +2,7 @@
 <form class="form"  action="{{urls.search}}">
     <fieldset class="form-fieldset">
         <div class="form-field">
-            <label class="form-label u-hiddenVisually" for="search_query_adv">{{lang 'search.results.form_label'}}</label>
+            <label class="form-label is-srOnly" for="search_query_adv">{{lang 'search.results.form_label'}}</label>
             <div class="form-prefixPostfix">
                 <input class="form-input" id="search_query_adv" name="search_query_adv" value="{{forms.search.query}}">
                 <input class="button button--primary form-prefixPostfix-button--postfix" type="submit" value="{{lang 'search.results.form_button_text'}}">

diff --git a/templates/components/common/subscription-form.html b/templates/components/common/subscription-form.html
@@ -7,7 +7,7 @@ <h5 class="footer-info-heading">{{lang 'newsletter.subscribe'}}</h5>
         <input type="hidden" name="nl_first_name" value="bc">
         <input type="hidden" name="check" value="1">
         <div class="form-field">
-            <label class="form-label u-hiddenVisually" for="nl_email">{{lang 'common.email_address'}}</label>
+            <label class="form-label is-srOnly" for="nl_email">{{lang 'common.email_address'}}</label>
             <div class="form-prefixPostfix wrap">
                 <input class="form-input" id="nl_email" name="nl_email" type="email" value="{{customer.email}}" placeholder="{{lang 'newsletter.email_placeholder'}}">
                 <input class="button button--primary form-prefixPostfix-button--postfix" type="submit" value="{{lang 'newsletter.subscribe_submit'}}">

diff --git a/templates/components/products/product-view.html b/templates/components/products/product-view.html
@@ -238,7 +238,7 @@ <h2 class="modal-header-title">{{lang 'products.bulk_pricing.modal_title'}}</h2>
 
                         <div class="form-increment" data-quantity-change>
                             <button class="button button--icon" data-action="dec">
-                                <span class="u-hiddenVisually">{{lang 'products.quantity_decrease'}}</span>
+                                <span class="is-srOnly">{{lang 'products.quantity_decrease'}}</span>
                                 <i class="icon" aria-hidden="true">
                                     <svg>
                                         <use xlink:href="#icon-keyboard-arrow-down"/>
@@ -256,7 +256,7 @@ <h2 class="modal-header-title">{{lang 'products.bulk_pricing.modal_title'}}</h2>
                                    pattern="[0-9]*"
                                    aria-live="polite">
                             <button class="button button--icon" data-action="inc">
-                                <span class="u-hiddenVisually">{{lang 'products.quantity_increase'}}</span>
+                                <span class="is-srOnly">{{lang 'products.quantity_increase'}}</span>
                                 <i class="icon" aria-hidden="true">
                                     <svg>
                                         <use xlink:href="#icon-keyboard-arrow-up"/>

diff --git a/templates/components/search/advanced-search.html b/templates/components/search/advanced-search.html
@@ -47,11 +47,11 @@ <h5 class="advancedSearch-title">{{lang 'forms.search.by_price'}}</h5>
                         {{lang 'forms.search.price_range' }}
                     </p>
                     <label>
-                        <span class="u-hiddenVisually">{{lang 'forms.search.price_range' }}</span>
+                        <span class="is-srOnly">{{lang 'forms.search.price_range' }}</span>
                         <span>{{lang 'common.from'}}</span><input type="number" step="any" class="form-input" name="price_from" id="search-form-price_from" value="{{forms.search.values.price_from}}">
                     </label>
                     <label>
-                        <span class="u-hiddenVisually">{{lang 'forms.search.price_range' }}</span>
+                        <span class="is-srOnly">{{lang 'forms.search.price_range' }}</span>
                         <span>{{lang 'common.to'}}</span><input type="number" step="any" class="form-input" name="price_to" id="search-form-price_to" value="{{forms.search.values.price_to}}">
                     </label>
                 </div>