@ordergroove/offers 2.48.1 → 2.48.2-alpha-PR-1444-2.310

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ordergroove/offers",
-  "version": "2.48.1",
+  "version": "2.48.2-alpha-PR-1444-2.310+fd36ffa23",
   "description": "offer state component",
   "author": "Eugenio Lattanzio <eugenio63@gmail.com>",
   "homepage": "https://github.com/ordergroove/plush-toys#readme",
@@ -46,8 +46,8 @@
     "throttle-debounce": "^2.1.0"
   },
   "devDependencies": {
-    "@ordergroove/offers-templates": "^0.10.0",
+    "@ordergroove/offers-templates": "^0.10.1-alpha-PR-1444-2.766+fd36ffa23",
     "@types/lodash.memoize": "^4.1.9"
   },
-  "gitHead": "1bae47be7eb0c5cc01f719fdba66b3fe903024df"
+  "gitHead": "fd36ffa23e85242d2a36ec8b236156164a6019b5"
 }

package/src/components/OptinSelect.js

@@ -13,7 +13,9 @@ export class OptinSelect extends withChildOptions(OptinStatus) {
       ...super.properties,
       frequencies: { type: Array, attribute: false },
       frequency: { type: String },
-      defaultFrequency
+      defaultFrequency,
+      /* The label used for the underlying select. */
+      selectLabel: { type: String, attribute: 'select-label' }
     };
   }
 
@@ -69,6 +71,7 @@ export class OptinSelect extends withChildOptions(OptinStatus) {
         .options="${options}"
         .selected="${this.currentFrequency}"
         .onChange="${({ target: { value } }) => this.onOptinChange(value)}"
+        .ariaLabel="${this.selectLabel}"
       ></og-select>
     `;
   }

package/src/components/PrepaidSelect.js

@@ -18,7 +18,9 @@ export class PrepaidSelect extends PrepaidStatus {
   static get properties() {
     return {
       ...super.properties,
-      text: { type: String }
+      text: { type: String },
+      /* The label used for the underlying select. */
+      selectLabel: { type: String, attribute: 'select-label' }
     };
   }
 
@@ -53,6 +55,7 @@ export class PrepaidSelect extends PrepaidStatus {
               .options=${displayOptions}
               .selected=${this.selectedNumberOfShipments}
               .onChange="${e => this.handleSelect(e)}"
+              .ariaLabel="${this.selectLabel}"
             ></og-select>
           `
         : html`

package/src/components/Select.js

@@ -1,4 +1,5 @@
 import { LitElement, css, html } from 'lit-element';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 
 export class Select extends LitElement {
   static get styles() {
@@ -61,6 +62,9 @@ export class Select extends LitElement {
     return {
       options: { type: Array },
       selected: { type: String },
+      // we intentionally don't convert from the "aria-label" attribute here
+      // since if we set that on the element, we are also assigning a label to the wraper <og-select> element which can cause screen readers to read out the same text twice
+      // https://github.com/WICG/webcomponents/issues/1073
       ariaLabel: { type: String }
     };
   }
@@ -68,7 +72,7 @@ export class Select extends LitElement {
   render() {
     const handleOnChange = ev => this.onChange(ev);
     return html`
-      <select @change="${handleOnChange}" aria-label="${this.ariaLabel}">
+      <select @change="${handleOnChange}" aria-label="${ifDefined(this.ariaLabel)}">
         ${this.options.map(
           option => html`
             <option

package/src/components/SelectFrequency.js

@@ -127,7 +127,7 @@ export class SelectFrequency extends withChildOptions(FrequencyStatus) {
 
     return html`
       <og-select
-        ariaLabel="Delivery frequency"
+        .ariaLabel="Delivery frequency"
         .options="${options}"
         .selected="${this.currentFrequency}"
         .onChange="${({ target: { value } }) => {