[Timber] update cart a11y qty input and button (#561)

Shopify · Aug 3, 2016 · cb51f0d · cb51f0d
1 parent 5fa42f7
commit cb51f0d
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 17 deletions.
diff --git a/locales/de.json b/locales/de.json
@@ -65,7 +65,9 @@
  "empty": "Ihr Einkaufswagen ist im Moment leer.",
  "continue_browsing_html": "Mit der Suche <a href=\"/collections/all\">hier</a> fortfahren.",
  "close_cart": "Einkaufswagen schließen",
- "savings_html": "Sie sparen {{ price }}"
+ "savings_html": "Sie sparen {{ price }}",
+ "reduce_quantity": "Artikelmenge um eins reduzieren",
+ "increase_quantity": "Artikelmenge um eins erhöhen"
  },
  "label": {
  "product": "Artikel",

diff --git a/locales/en.default.json b/locales/en.default.json
@@ -65,7 +65,9 @@
  "empty": "Your cart is currently empty.",
  "continue_browsing_html": "Continue browsing <a href=\"/collections/all\">here</a>.",
  "close_cart": "Close Cart",
- "savings_html": "You're saving {{ price }}"
+ "savings_html": "You're saving {{ price }}",
+ "reduce_quantity": "Reduce item quantity by one",
+ "increase_quantity": "Increase item quantity by one"
  },
  "label": {
  "product": "Product",

diff --git a/locales/es.json b/locales/es.json
@@ -65,7 +65,9 @@
  "empty": "Su carrito actualmente está vacío.",
  "continue_browsing_html": "Continúe explorando <a href=\"/collections/all\">aquí</a>.",
  "close_cart": "Cerrar carrito",
- "savings_html": "Está ahorrando {{ price }}"
+ "savings_html": "Está ahorrando {{ price }}",
+ "reduce_quantity": "Quitar uno a la cantidad de artículos",
+ "increase_quantity": "Aumentar uno a la cantidad de artículos"
  },
  "label": {
  "product": "Producto",

diff --git a/locales/fr.json b/locales/fr.json
@@ -65,7 +65,9 @@
  "empty": "Votre panier est vide.",
  "continue_browsing_html": "<a href=\"/collections/all\">Retourner au magasinage</a>.",
  "close_cart": "Fermer le panier",
- "savings_html": "Vous économisez {{ price }}"
+ "savings_html": "Vous économisez {{ price }}",
+ "reduce_quantity": "Réduire la quantité de l'article de un",
+ "increase_quantity": "Augmenter la quantité de l'article de un"
  },
  "label": {
  "product": "Produit",

diff --git a/locales/pt-BR.json b/locales/pt-BR.json
@@ -65,7 +65,9 @@
  "empty": "Seu carrinho está vazio no momento.",
  "continue_browsing_html": "Continue navegando <a href=\"/collections/all\">aqui</a>.",
  "close_cart": "Fechar carrinho",
- "savings_html": "Você está economizando {{ price }}"
+ "savings_html": "Você está economizando {{ price }}",
+ "reduce_quantity": "Reduzir quantidade em uma unidade",
+ "increase_quantity": "Aumentar quantidade em uma unidade"
  },
  "label": {
  "product": "Produto",

diff --git a/locales/pt-PT.json b/locales/pt-PT.json
@@ -65,7 +65,9 @@
  "empty": "O seu carrinho de compras está neste momento vazio.",
  "continue_browsing_html": "Continue a ver <a href=\"/collections/all\">aqui</a>.",
  "close_cart": "Fechar Carrinho de Compras",
- "savings_html": "Está a poupar {{ price }}"
+ "savings_html": "Está a poupar {{ price }}",
+ "reduce_quantity": "Reduza a quantidade do artigo em um",
+ "increase_quantity": "Aumente a quantidade do artigo em um"
  },
  "label": {
  "product": "Produto",

diff --git a/snippets/ajax-cart-template.liquid b/snippets/ajax-cart-template.liquid
@@ -40,12 +40,14 @@
  <div class="ajaxcart__qty">
  <button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--minus icon-fallback-text" data-id="{{id}}" data-qty="{{itemMinus}}" data-line="{{line}}">
  <span class="icon icon-minus" aria-hidden="true"></span>
- <span class="fallback-text">&minus;</span>
+ <span class="fallback-text" aria-hidden="true">&minus;</span>
+ <span class="visually-hidden">{% endraw %}{{ 'cart.general.reduce_quantity' | t }}{% raw %}</span>
  </button>
  <input type="text" name="updates[]" class="ajaxcart__qty-num" value="{{itemQty}}" min="0" data-id="{{id}}" data-line="{{line}}" aria-label="quantity" pattern="[0-9]*">
  <button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--plus icon-fallback-text" data-id="{{id}}" data-line="{{line}}" data-qty="{{itemAdd}}">
  <span class="icon icon-plus" aria-hidden="true"></span>
- <span class="fallback-text">+</span>
+ <span class="fallback-text" aria-hidden="true">+</span>
+ <span class="visually-hidden">{% endraw %}{{ 'cart.general.increase_quantity' | t }}{% raw %}</span>
  </button>
  </div>
  </div>
@@ -110,12 +112,14 @@
  <div class="ajaxcart__qty">
  <button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--minus icon-fallback-text" data-id="{{id}}" data-qty="{{itemMinus}}">
  <span class="icon icon-minus" aria-hidden="true"></span>
- <span class="fallback-text">&minus;</span>
+ <span class="fallback-text" aria-hidden="true">&minus;</span>
+ <span class="visually-hidden">{% endraw %}{{ 'cart.general.reduce_quantity' | t }}{% raw %}</span>
  </button>
  <input type="text" class="ajaxcart__qty-num" value="{{itemQty}}" min="0" data-id="{{id}}" aria-label="quantity" pattern="[0-9]*">
  <button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--plus icon-fallback-text" data-id="{{id}}" data-qty="{{itemAdd}}">
  <span class="icon icon-plus" aria-hidden="true"></span>
- <span class="fallback-text">+</span>
+ <span class="fallback-text" aria-hidden="true">+</span>
+ <span class="visually-hidden">{% endraw %}{{ 'cart.general.increase_quantity' | t }}{% raw %}</span>
  </button>
  </div>
  {% endraw %}
@@ -125,12 +129,14 @@
  <div class="js-qty">
  <button type="button" class="js-qty__adjust js-qty__adjust--minus icon-fallback-text" data-id="{{id}}" data-qty="{{itemMinus}}">
  <span class="icon icon-minus" aria-hidden="true"></span>
- <span class="fallback-text">&minus;</span>
+ <span class="fallback-text" aria-hidden="true">&minus;</span>
+ <span class="visually-hidden">{% endraw %}{{ 'cart.general.reduce_quantity' | t }}{% raw %}</span>
  </button>
  <input type="text" class="js-qty__num" value="{{itemQty}}" min="1" data-id="{{id}}" aria-label="quantity" pattern="[0-9]*" name="{{inputName}}" id="{{inputId}}">
  <button type="button" class="js-qty__adjust js-qty__adjust--plus icon-fallback-text" data-id="{{id}}" data-qty="{{itemAdd}}">
  <span class="icon icon-plus" aria-hidden="true"></span>
- <span class="fallback-text">+</span>
+ <span class="fallback-text" aria-hidden="true">+</span>
+ <span class="visually-hidden">{% endraw %}{{ 'cart.general.increase_quantity' | t }}{% raw %}</span>
  </button>
  </div>
  {% endraw %}

diff --git a/templates/cart.liquid b/templates/cart.liquid
@@ -90,7 +90,7 @@
  </span>
  {% for discount in item.discounts %}
  <span class="cart-item__discount">{{ discount.title }}</span>
- {% endfor %} 
+ {% endfor %}
  </td>
  </tr>
  {% endfor %}
@@ -111,12 +111,12 @@
  {% if cart.total_discounts > 0 %}
  {% assign savings = cart.total_discounts | money %}
  <p>
- <span class="cart-subtotal__savings"><em>{{ 'cart.general.savings_html' | t: price: savings }}</em></span> 
+ <span class="cart-subtotal__savings"><em>{{ 'cart.general.savings_html' | t: price: savings }}</em></span>
  </p>
- {% endif %} 
+ {% endif %}
  <p><em>{{ 'cart.general.shipping_at_checkout' | t }}</em></p>
- <input type="submit" name="update" class="btn--secondary update-cart" value="{{ 'cart.general.update' | t }}">
- <input type="submit" name="checkout" class="btn" value="{{ 'cart.general.checkout' | t }}">
+ <button type="submit" name="update" class="btn--secondary update-cart">{{ 'cart.general.update' | t }}</button>
+ <button type="submit" name="checkout" class="btn">{{ 'cart.general.checkout' | t }}</button>
  </div>
  </div>
  </form>