@shoper/phoenix_design_system 1.17.4-0 → 1.17.4-2
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.
- package/build/cjs/packages/phoenix/src/components/tabs/tab_panel.js +8 -0
- package/build/cjs/packages/phoenix/src/components/tabs/tab_panel.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/tabs/tabs.js +3 -2
- package/build/cjs/packages/phoenix/src/components/tabs/tabs.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/tabs/tab_panel.d.ts +1 -0
- package/build/esm/packages/phoenix/src/components/tabs/tab_panel.js +8 -0
- package/build/esm/packages/phoenix/src/components/tabs/tab_panel.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/tabs/tabs.js +3 -2
- package/build/esm/packages/phoenix/src/components/tabs/tabs.js.map +1 -1
- package/package.json +1 -1
|
@@ -12,6 +12,14 @@ exports.HTabPanel = class HTabPanel extends phoenix_light_lit_element.PhoenixLig
|
|
|
12
12
|
constructor() {
|
|
13
13
|
super();
|
|
14
14
|
this._visibilityController = new visibility_controller.VisibilityController(this);
|
|
15
|
+
this.setAttribute('role', 'tabpanel');
|
|
16
|
+
}
|
|
17
|
+
connectedCallback() {
|
|
18
|
+
super.connectedCallback();
|
|
19
|
+
const $tab = document.querySelector(`[panel-name="${this.name}"]`);
|
|
20
|
+
if ($tab && $tab.id) {
|
|
21
|
+
this.setAttribute('aria-labelledby', $tab.id);
|
|
22
|
+
}
|
|
15
23
|
}
|
|
16
24
|
show() {
|
|
17
25
|
this._visibilityController.show();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;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,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -16,11 +16,12 @@ exports.HTabs = class HTabs extends phoenix_light_lit_element.PhoenixLightLitEle
|
|
|
16
16
|
constructor() {
|
|
17
17
|
super(...arguments);
|
|
18
18
|
this.watchChildrenRendered = true;
|
|
19
|
-
this._handleArrowNavigation = (
|
|
19
|
+
this._handleArrowNavigation = (ev) => {
|
|
20
|
+
ev.preventDefault();
|
|
20
21
|
const currentTabIndex = this._getFocusedTabIndex();
|
|
21
22
|
if (currentTabIndex === undefined)
|
|
22
23
|
return;
|
|
23
|
-
const newTabIndex = key === 'ArrowLeft' ? this._getPrevTabIndex(currentTabIndex) : this._getNextTabIndex(currentTabIndex);
|
|
24
|
+
const newTabIndex = ev.key === 'ArrowLeft' ? this._getPrevTabIndex(currentTabIndex) : this._getNextTabIndex(currentTabIndex);
|
|
24
25
|
utilities.UiDomUtils.makeUnnavigable(this._$tabs[currentTabIndex]);
|
|
25
26
|
utilities.UiDomUtils.makeNavigable(this._$tabs[newTabIndex]);
|
|
26
27
|
this._$tabs[newTabIndex].focus();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -8,6 +8,14 @@ let HTabPanel = class HTabPanel extends PhoenixLightLitElement {
|
|
|
8
8
|
constructor() {
|
|
9
9
|
super();
|
|
10
10
|
this._visibilityController = new VisibilityController(this);
|
|
11
|
+
this.setAttribute('role', 'tabpanel');
|
|
12
|
+
}
|
|
13
|
+
connectedCallback() {
|
|
14
|
+
super.connectedCallback();
|
|
15
|
+
const $tab = document.querySelector(`[panel-name="${this.name}"]`);
|
|
16
|
+
if ($tab && $tab.id) {
|
|
17
|
+
this.setAttribute('aria-labelledby', $tab.id);
|
|
18
|
+
}
|
|
11
19
|
}
|
|
12
20
|
show() {
|
|
13
21
|
this._visibilityController.show();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;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,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -12,11 +12,12 @@ let HTabs = class HTabs extends PhoenixLightLitElement {
|
|
|
12
12
|
constructor() {
|
|
13
13
|
super(...arguments);
|
|
14
14
|
this.watchChildrenRendered = true;
|
|
15
|
-
this._handleArrowNavigation = (
|
|
15
|
+
this._handleArrowNavigation = (ev) => {
|
|
16
|
+
ev.preventDefault();
|
|
16
17
|
const currentTabIndex = this._getFocusedTabIndex();
|
|
17
18
|
if (currentTabIndex === undefined)
|
|
18
19
|
return;
|
|
19
|
-
const newTabIndex = key === 'ArrowLeft' ? this._getPrevTabIndex(currentTabIndex) : this._getNextTabIndex(currentTabIndex);
|
|
20
|
+
const newTabIndex = ev.key === 'ArrowLeft' ? this._getPrevTabIndex(currentTabIndex) : this._getNextTabIndex(currentTabIndex);
|
|
20
21
|
UiDomUtils.makeUnnavigable(this._$tabs[currentTabIndex]);
|
|
21
22
|
UiDomUtils.makeNavigable(this._$tabs[newTabIndex]);
|
|
22
23
|
this._$tabs[newTabIndex].focus();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|