@shoper/phoenix_design_system 1.15.1 → 1.15.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/build/cjs/packages/phoenix/src/components/form/checkbox/checkbox_control.js +1 -1
  2. package/build/cjs/packages/phoenix/src/components/form/file_picker/file_picker.js +3 -0
  3. package/build/cjs/packages/phoenix/src/components/form/file_picker/file_picker.js.map +1 -1
  4. package/build/cjs/packages/phoenix/src/components/form/file_picker/file_picker_label.js +2 -1
  5. package/build/cjs/packages/phoenix/src/components/form/file_picker/file_picker_label.js.map +1 -1
  6. package/build/cjs/packages/phoenix/src/components/form/select/select.js +31 -1
  7. package/build/cjs/packages/phoenix/src/components/form/select/select.js.map +1 -1
  8. package/build/cjs/packages/phoenix/src/components/messages/base_message.js +2 -2
  9. package/build/esm/packages/phoenix/src/components/form/checkbox/checkbox_control.js +1 -1
  10. package/build/esm/packages/phoenix/src/components/form/file_picker/file_picker.js +3 -0
  11. package/build/esm/packages/phoenix/src/components/form/file_picker/file_picker.js.map +1 -1
  12. package/build/esm/packages/phoenix/src/components/form/file_picker/file_picker_label.js +2 -1
  13. package/build/esm/packages/phoenix/src/components/form/file_picker/file_picker_label.js.map +1 -1
  14. package/build/esm/packages/phoenix/src/components/form/select/select.d.ts +3 -0
  15. package/build/esm/packages/phoenix/src/components/form/select/select.js +31 -1
  16. package/build/esm/packages/phoenix/src/components/form/select/select.js.map +1 -1
  17. package/build/esm/packages/phoenix/src/components/messages/base_message.js +2 -2
  18. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/form/checkbox/checkbox_control.js CHANGED
@@ -47,7 +47,7 @@ exports.HCheckboxControl = class HCheckboxControl extends phoenix_light_lit_elem
47
47
  name="${ifDefined_js.ifDefined(this.controlName)}"
48
48
  value="${ifDefined_js.ifDefined(this.value)}"
49
49
  ?disabled="${this.disabled}"
50
- ?required="${this.required}"
50
+ aria-required="${this.required ? 'true' : 'false'}"
51
51
  ?readonly="${this.readonly}"
52
52
  ?hidden="${this.hidden}"
53
53
  .checked="${this.checked}"
package/build/cjs/packages/phoenix/src/components/form/file_picker/file_picker.js CHANGED
@@ -97,6 +97,9 @@ exports.HFilePicker = class HFilePicker extends phoenix_light_lit_element.Phoeni
97
97
  control-id="${this.controlId}"
98
98
  label-text="${this.labelText}"
99
99
  label-icon-name="${ifDefined_js.ifDefined(this.labelIconName)}"
100
+ aria-required="${this.required ? 'true' : 'false'}"
101
+ validation-container
102
+ tabindex="0"
100
103
  />`
101
104
  : lit.nothing}
102
105
  ${((_b = this._file) === null || _b === void 0 ? void 0 : _b.name)
package/build/cjs/packages/phoenix/src/components/form/file_picker/file_picker.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA,oBAAoB,0CAA8C;AAClE;AACA,iBAAiB,wDAA4D;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA,oBAAoB,0CAA8C;AAClE;AACA,iBAAiB,wDAA4D;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/cjs/packages/phoenix/src/components/form/file_picker/file_picker_label.js CHANGED
@@ -14,7 +14,8 @@ var file_picker_constants = require('./file_picker_constants.js');
14
14
  exports.HFilePickerLabel = class HFilePickerLabel extends phoenix_light_lit_element.PhoenixLightLitElement {
15
15
  constructor() {
16
16
  super();
17
- this._dispatchClickEvent = () => {
17
+ this._dispatchClickEvent = (ev) => {
18
+ ev.preventDefault();
18
19
  this.emitCustomEvent(file_picker_constants.FILE_PICKER_LABEL_EVENT_NAMES.filePickerLabelClickedByEnterKey);
19
20
  };
20
21
  this._btnController = new btn_controller.BtnController(this, this._dispatchClickEvent);
package/build/cjs/packages/phoenix/src/components/form/file_picker/file_picker_label.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/cjs/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -40,12 +40,14 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
40
40
  this.searchDisabled = false;
41
41
  this.type = select_constants.SELECT_TYPES.select;
42
42
  this.noDeselect = false;
43
+ this.ariaLabelledby = '';
43
44
  this._searchValue = '';
44
45
  this._$options = new Map();
45
46
  this._$dropdown = ref_js.createRef();
46
47
  this._$search = ref_js.createRef();
47
48
  this._$optionsList = ref_js.createRef();
48
49
  this._$dropdownContent = ref_js.createRef();
50
+ this._$dropdownToggler = ref_js.createRef();
49
51
  this._selectContext = new context_provider_controller.ContextProviderController(this);
50
52
  this._updateOptions = () => {
51
53
  const $options = this._getOptions();
@@ -118,8 +120,20 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
118
120
  });
119
121
  };
120
122
  this._handleDropdownHidden = () => {
123
+ var _a;
121
124
  this._searchValue = '';
122
125
  this.opened = false;
126
+ (_a = this._$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', '');
127
+ };
128
+ this._manageSelectFocusAria = (ev) => {
129
+ var _a;
130
+ const $target = ev.target;
131
+ if (!$target)
132
+ return;
133
+ const optionId = $target.id;
134
+ if (optionId) {
135
+ (_a = this._$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', optionId);
136
+ }
123
137
  };
124
138
  this._closeSelect = () => {
125
139
  var _a;
@@ -300,12 +314,24 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
300
314
  content-width="full"
301
315
  prevent-focus-trap
302
316
  >
303
- <h-dropdown-toggler name=${this.controlName}> ${this.getSlot(select_constants.SELECT_SLOT_NAMES.toggler)} </h-dropdown-toggler>
317
+ <h-dropdown-toggler
318
+ ${ref_js.ref(this._$dropdownToggler)}
319
+ name="${this.controlName}"
320
+ validation-container
321
+ aria-haspopup="listbox"
322
+ role="combobox"
323
+ aria-required="${this.required ? 'true' : 'false'}"
324
+ aria-activedescendant
325
+ aria-labelledby="${this.ariaLabelledby}"
326
+ >
327
+ ${this.getSlot(select_constants.SELECT_SLOT_NAMES.toggler)}
328
+ </h-dropdown-toggler>
304
329
 
305
330
  <h-dropdown-content
306
331
  class="${select_constants.SELECT_CSS_CLASSES.selectContent} ${this.error ? select_constants.SELECT_CSS_CLASSES.selectContentError : ''}"
307
332
  ${ref_js.ref(this._$dropdownContent)}
308
333
  name="${this.controlName}"
334
+ @focusin="${this._manageSelectFocusAria}"
309
335
  >
310
336
  <h-select-close-btn class="${select_constants.SELECT_CSS_CLASSES.selectCloseMobileButton}" @close=${this._closeSelect}></h-select-close-btn>
311
337
 
@@ -412,6 +438,10 @@ tslib_es6.__decorate([
412
438
  decorators_js.property({ type: Boolean, attribute: 'no-deselect' }),
413
439
  tslib_es6.__metadata("design:type", Boolean)
414
440
  ], exports.HSelect.prototype, "noDeselect", void 0);
441
+ tslib_es6.__decorate([
442
+ decorators_js.property({ type: String, attribute: 'aria-labelledby' }),
443
+ tslib_es6.__metadata("design:type", String)
444
+ ], exports.HSelect.prototype, "ariaLabelledby", void 0);
415
445
  tslib_es6.__decorate([
416
446
  decorators.state(),
417
447
  tslib_es6.__metadata("design:type", String)
package/build/cjs/packages/phoenix/src/components/form/select/select.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/cjs/packages/phoenix/src/components/messages/base_message.js CHANGED
@@ -22,7 +22,8 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
22
22
  this._setupEventListeners = () => {
23
23
  this.addEventListener('mouseenter', this.open);
24
24
  this.addEventListener('mouseleave', this.close);
25
- this.addEventListener('focus', this.open);
25
+ this.addEventListener('focusin', this.open);
26
+ this.addEventListener('focusout', this.close);
26
27
  };
27
28
  this._positionMessage = () => {
28
29
  requestAnimationFrame(() => {
@@ -116,7 +117,6 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
116
117
  elementToPosition: this._$messageContent,
117
118
  offset: this.offset
118
119
  });
119
- this.setAttribute('tabindex', '0');
120
120
  this._setupEventListeners();
121
121
  }
122
122
  static _appendMessagePortal() {
package/build/esm/packages/phoenix/src/components/form/checkbox/checkbox_control.js CHANGED
@@ -43,7 +43,7 @@ let HCheckboxControl = class HCheckboxControl extends PhoenixLightLitElement {
43
43
  name="${ifDefined(this.controlName)}"
44
44
  value="${ifDefined(this.value)}"
45
45
  ?disabled="${this.disabled}"
46
- ?required="${this.required}"
46
+ aria-required="${this.required ? 'true' : 'false'}"
47
47
  ?readonly="${this.readonly}"
48
48
  ?hidden="${this.hidden}"
49
49
  .checked="${this.checked}"
package/build/esm/packages/phoenix/src/components/form/file_picker/file_picker.js CHANGED
@@ -93,6 +93,9 @@ let HFilePicker = class HFilePicker extends PhoenixLightLitElement {
93
93
  control-id="${this.controlId}"
94
94
  label-text="${this.labelText}"
95
95
  label-icon-name="${ifDefined(this.labelIconName)}"
96
+ aria-required="${this.required ? 'true' : 'false'}"
97
+ validation-container
98
+ tabindex="0"
96
99
  />`
97
100
  : nothing}
98
101
  ${((_b = this._file) === null || _b === void 0 ? void 0 : _b.name)
package/build/esm/packages/phoenix/src/components/form/file_picker/file_picker.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA,uBAAuB,0CAA8C;AACrE;AACA,eAAe,wDAA4D;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA,uBAAuB,0CAA8C;AACrE;AACA,eAAe,wDAA4D;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/phoenix/src/components/form/file_picker/file_picker_label.js CHANGED
@@ -10,7 +10,8 @@ import { FILE_PICKER_LABEL_EVENT_NAMES, FILE_PICKER_CONTROL_CSS_CLASSES, FILE_PI
10
10
  let HFilePickerLabel = class HFilePickerLabel extends PhoenixLightLitElement {
11
11
  constructor() {
12
12
  super();
13
- this._dispatchClickEvent = () => {
13
+ this._dispatchClickEvent = (ev) => {
14
+ ev.preventDefault();
14
15
  this.emitCustomEvent(FILE_PICKER_LABEL_EVENT_NAMES.filePickerLabelClickedByEnterKey);
15
16
  };
16
17
  this._btnController = new BtnController(this, this._dispatchClickEvent);
package/build/esm/packages/phoenix/src/components/form/file_picker/file_picker_label.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/phoenix/src/components/form/select/select.d.ts CHANGED
@@ -18,6 +18,7 @@ export declare class HSelect extends PhoenixLightLitElement {
18
18
  required: boolean;
19
19
  optionsList?: TSelectOption[];
20
20
  noDeselect: boolean;
21
+ ariaLabelledby: string;
21
22
  get selectedIndex(): number;
22
23
  set selectedIndex(index: number);
23
24
  get selectedOptions(): (HOption | undefined)[];
@@ -31,6 +32,7 @@ export declare class HSelect extends PhoenixLightLitElement {
31
32
  private _$search;
32
33
  private _$optionsList;
33
34
  private _$dropdownContent;
35
+ private _$dropdownToggler;
34
36
  private _selectContext;
35
37
  private _listBoxController;
36
38
  private _optionsObserver;
@@ -53,6 +55,7 @@ export declare class HSelect extends PhoenixLightLitElement {
53
55
  private _selectOption;
54
56
  private _handleSearch;
55
57
  private _handleDropdownHidden;
58
+ private _manageSelectFocusAria;
56
59
  private _closeSelect;
57
60
  private _clearOptions;
58
61
  private _dispatchChangeEvent;
package/build/esm/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -36,12 +36,14 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
36
36
  this.searchDisabled = false;
37
37
  this.type = SELECT_TYPES.select;
38
38
  this.noDeselect = false;
39
+ this.ariaLabelledby = '';
39
40
  this._searchValue = '';
40
41
  this._$options = new Map();
41
42
  this._$dropdown = createRef();
42
43
  this._$search = createRef();
43
44
  this._$optionsList = createRef();
44
45
  this._$dropdownContent = createRef();
46
+ this._$dropdownToggler = createRef();
45
47
  this._selectContext = new ContextProviderController(this);
46
48
  this._updateOptions = () => {
47
49
  const $options = this._getOptions();
@@ -114,8 +116,20 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
114
116
  });
115
117
  };
116
118
  this._handleDropdownHidden = () => {
119
+ var _a;
117
120
  this._searchValue = '';
118
121
  this.opened = false;
122
+ (_a = this._$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', '');
123
+ };
124
+ this._manageSelectFocusAria = (ev) => {
125
+ var _a;
126
+ const $target = ev.target;
127
+ if (!$target)
128
+ return;
129
+ const optionId = $target.id;
130
+ if (optionId) {
131
+ (_a = this._$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', optionId);
132
+ }
119
133
  };
120
134
  this._closeSelect = () => {
121
135
  var _a;
@@ -296,12 +310,24 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
296
310
  content-width="full"
297
311
  prevent-focus-trap
298
312
  >
299
- <h-dropdown-toggler name=${this.controlName}> ${this.getSlot(SELECT_SLOT_NAMES.toggler)} </h-dropdown-toggler>
313
+ <h-dropdown-toggler
314
+ ${ref(this._$dropdownToggler)}
315
+ name="${this.controlName}"
316
+ validation-container
317
+ aria-haspopup="listbox"
318
+ role="combobox"
319
+ aria-required="${this.required ? 'true' : 'false'}"
320
+ aria-activedescendant
321
+ aria-labelledby="${this.ariaLabelledby}"
322
+ >
323
+ ${this.getSlot(SELECT_SLOT_NAMES.toggler)}
324
+ </h-dropdown-toggler>
300
325
 
301
326
  <h-dropdown-content
302
327
  class="${SELECT_CSS_CLASSES.selectContent} ${this.error ? SELECT_CSS_CLASSES.selectContentError : ''}"
303
328
  ${ref(this._$dropdownContent)}
304
329
  name="${this.controlName}"
330
+ @focusin="${this._manageSelectFocusAria}"
305
331
  >
306
332
  <h-select-close-btn class="${SELECT_CSS_CLASSES.selectCloseMobileButton}" @close=${this._closeSelect}></h-select-close-btn>
307
333
 
@@ -408,6 +434,10 @@ __decorate([
408
434
  property({ type: Boolean, attribute: 'no-deselect' }),
409
435
  __metadata("design:type", Boolean)
410
436
  ], HSelect.prototype, "noDeselect", void 0);
437
+ __decorate([
438
+ property({ type: String, attribute: 'aria-labelledby' }),
439
+ __metadata("design:type", String)
440
+ ], HSelect.prototype, "ariaLabelledby", void 0);
411
441
  __decorate([
412
442
  state(),
413
443
  __metadata("design:type", String)
package/build/esm/packages/phoenix/src/components/form/select/select.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/phoenix/src/components/messages/base_message.js CHANGED
@@ -18,7 +18,8 @@ class BaseMessage extends PhoenixLightLitElement {
18
18
  this._setupEventListeners = () => {
19
19
  this.addEventListener('mouseenter', this.open);
20
20
  this.addEventListener('mouseleave', this.close);
21
- this.addEventListener('focus', this.open);
21
+ this.addEventListener('focusin', this.open);
22
+ this.addEventListener('focusout', this.close);
22
23
  };
23
24
  this._positionMessage = () => {
24
25
  requestAnimationFrame(() => {
@@ -112,7 +113,6 @@ class BaseMessage extends PhoenixLightLitElement {
112
113
  elementToPosition: this._$messageContent,
113
114
  offset: this.offset
114
115
  });
115
- this.setAttribute('tabindex', '0');
116
116
  this._setupEventListeners();
117
117
  }
118
118
  static _appendMessagePortal() {
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@shoper/phoenix_design_system",
3
3
  "packageManager": "yarn@3.2.0",
4
4
  "sideEffects": false,
5
- "version": "1.15.1",
5
+ "version": "1.15.3",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",