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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ordergroove/offers",
-  "version": "2.48.1",
+  "version": "2.48.2-alpha-PR-1444-4.311+6528227b5",
   "description": "offer state component",
   "author": "Eugenio Lattanzio <eugenio63@gmail.com>",
   "homepage": "https://github.com/ordergroove/plush-toys#readme",
@@ -49,5 +49,5 @@
     "@ordergroove/offers-templates": "^0.10.0",
     "@types/lodash.memoize": "^4.1.9"
   },
-  "gitHead": "1bae47be7eb0c5cc01f719fdba66b3fe903024df"
+  "gitHead": "6528227b585c07ce5c9d553e51a7c17ad08f7b95"
 }

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 } }) => {

package/src/components/__tests__/SelectFrequency.spec.js

@@ -138,6 +138,16 @@ describe('SelectFrequency', () => {
     expect(element.currentFrequency).toBe('yum first frequency');
   });
 
+  it('should set aria-label on the underlying select element', async () => {
+    const element = document.createElement(TAG_NAME_UNDER_TEST);
+    element.innerHTML = `<option value="2w">2 weeks</option>`;
+    document.body.appendChild(element);
+    await element.updateComplete;
+    await element.shadowRoot.querySelector('og-select').updateComplete;
+    const select = element.shadowRoot.querySelector('og-select').shadowRoot.querySelector('select');
+    expect(select.getAttribute('aria-label')).toEqual('Delivery frequency');
+  });
+
   it('should return set default frequency given no options', () => {
     const selectFrequency = new SelectFrequency();
     selectFrequency.defaultFrequency = 'yum set defaault frequency';