@thinkpixellab-public/px-vue 4.1.27 → 4.1.28

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.
@@ -57,7 +57,7 @@ export default {
57
57
  /**
58
58
  * Class applied to the inner element.
59
59
  */
60
- innerClass: { type: String, default: null },
60
+ innerClass: { type: [Array, String], default: null },
61
61
 
62
62
  /**
63
63
  * Style applied to the inner element.
@@ -135,11 +135,11 @@ export default {
135
135
  &--default {
136
136
  @include controls.button-icon(
137
137
  (
138
- focus: controls.control-focus-style(outline),
139
138
  padding: 0,
140
139
  min-height: 0,
141
140
  )
142
141
  );
142
+ outline: 1px dashed currentColor;
143
143
  }
144
144
 
145
145
  &--toggles.px-icon-button--unchecked {
@@ -3,12 +3,16 @@
3
3
  -->
4
4
 
5
5
  <template>
6
- <div :class="bem({ hasOffset, orientation, ...variantsMap })">
6
+ <div :class="bem({ hasOffset, orientation, ...variantsMap })" role="region">
7
7
  <div
8
8
  v-for="(item, index) in items"
9
9
  :key="getItemKey(item)"
10
10
  ref="slide"
11
+ :inert="!isItemSelected(item)"
11
12
  :class="bem('slide-wrapper', { selected: isItemSelected(item) })"
13
+ :tabindex="-1"
14
+ role="region"
15
+ :aria-label="item.label ? item.label : undefined"
12
16
  >
13
17
  <px-slide-transition
14
18
  :class="bem('transitioner')"
@@ -187,6 +191,10 @@ export default {
187
191
  oldIndex = this.selectedRelativeIndex(oldIndex);
188
192
 
189
193
  this.direction = oldIndex > newIndex ? 1 : -1;
194
+
195
+ this.$nextTick(() => {
196
+ this.$refs.slide[this.selectedIndex]?.focus();
197
+ });
190
198
  },
191
199
  dragEnabled(nv) {
192
200
  if (!this.drag) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thinkpixellab-public/px-vue",
3
- "version": "4.1.27",
3
+ "version": "4.1.28",
4
4
  "description": "General purpose Vue components and helpers that can be used across projects.",
5
5
  "author": {
6
6
  "name": "Pixel Lab"