@asd20/ui 3.2.512 → 3.2.513
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/package.json
CHANGED
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
id="main-menu-list"
|
|
4
4
|
ref="menuContainer"
|
|
5
5
|
class="asd20-site-menu"
|
|
6
|
-
role="menu"
|
|
7
6
|
@click="onBackgroundClick"
|
|
8
7
|
@focus="onFocus"
|
|
9
8
|
@blur="onBlur"
|
|
@@ -20,7 +19,6 @@
|
|
|
20
19
|
id="main-menu-list"
|
|
21
20
|
ref="menuContainer"
|
|
22
21
|
class="asd20-site-menu"
|
|
23
|
-
role="menu"
|
|
24
22
|
@keyup.right.stop.prevent="activateSection"
|
|
25
23
|
@keyup.left.stop.prevent="deactivateSection"
|
|
26
24
|
@keyup.escape="deactivateSection"
|
|
@@ -39,6 +37,7 @@
|
|
|
39
37
|
v-if="!activeSection"
|
|
40
38
|
class="asd20-table-of-contents"
|
|
41
39
|
tabindex="-1"
|
|
40
|
+
role="menubar"
|
|
42
41
|
>
|
|
43
42
|
<button
|
|
44
43
|
v-for="(section, index) in sections"
|
|
@@ -47,6 +46,8 @@
|
|
|
47
46
|
class="asd20-table-of-contents__item"
|
|
48
47
|
role="menuitem"
|
|
49
48
|
ref="focused"
|
|
49
|
+
aria-expanded="false"
|
|
50
|
+
:aria-owns="`asd20-site-menu__item-${index}`"
|
|
50
51
|
@click="activeSectionIndex = index"
|
|
51
52
|
@mouseup="keyboardTriggeredLastAction = false"
|
|
52
53
|
@keyup="keyboardTriggeredLastAction = true"
|
|
@@ -60,22 +61,29 @@
|
|
|
60
61
|
name="slide-left"
|
|
61
62
|
v-on:after-enter="afterActivateTransition"
|
|
62
63
|
>
|
|
64
|
+
<!-- <focus-trap
|
|
65
|
+
:active="active"
|
|
66
|
+
aria-hidden="true"
|
|
67
|
+
returnFocusOnDeactivate="true"
|
|
68
|
+
> -->
|
|
63
69
|
<div v-if="activeSection" class="asd20-site-menu__section">
|
|
64
|
-
<div
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
70
|
+
<div>
|
|
71
|
+
<button
|
|
72
|
+
class="asd20-site-menu__section__back"
|
|
73
|
+
aria-expanded="true"
|
|
74
|
+
@click="deactivateSection"
|
|
75
|
+
@mouseup="keyboardTriggeredLastAction = false"
|
|
76
|
+
@keyup="keyboardTriggeredLastAction = true"
|
|
77
|
+
>
|
|
78
|
+
<asd20-icon name="chevron" size="sm" />
|
|
79
|
+
<span class="title">{{ activeSection.title }}</span>
|
|
80
|
+
</button>
|
|
81
|
+
|
|
82
|
+
<div
|
|
83
|
+
:id="`asd20-site-menu__item-${activeSectionIndex}`"
|
|
84
|
+
class="asd20-site-menu__items"
|
|
85
|
+
role="menu"
|
|
86
|
+
>
|
|
79
87
|
<a
|
|
80
88
|
v-for="(item, index) in activeSection.items"
|
|
81
89
|
:id="`asd20-site-menu__item-${activeSectionIndex}-${index}`"
|
|
@@ -83,15 +91,15 @@
|
|
|
83
91
|
class="asd20-site-menu__item"
|
|
84
92
|
:href="item.url"
|
|
85
93
|
@click="dismiss"
|
|
86
|
-
@keyup.escape="deactivateSection"
|
|
87
94
|
:target="
|
|
88
95
|
!item.url || item.url.startsWith('/') ? undefined : '_blank'
|
|
89
96
|
"
|
|
90
97
|
>{{ item.title }}</a
|
|
91
98
|
>
|
|
92
99
|
</div>
|
|
93
|
-
</
|
|
100
|
+
</div>
|
|
94
101
|
</div>
|
|
102
|
+
<!-- </focus-trap> -->
|
|
95
103
|
</transition>
|
|
96
104
|
</div>
|
|
97
105
|
</focus-trap>
|
|
@@ -185,6 +193,7 @@ export default {
|
|
|
185
193
|
this.$nextTick(() => {
|
|
186
194
|
if (this.keyboardTriggeredLastAction) {
|
|
187
195
|
this.setFocusSection()
|
|
196
|
+
this.setFocus()
|
|
188
197
|
}
|
|
189
198
|
})
|
|
190
199
|
} else {
|
|
@@ -354,6 +363,8 @@ export default {
|
|
|
354
363
|
padding: space(0.75) space(1) space(0.75) space(2);
|
|
355
364
|
cursor: pointer;
|
|
356
365
|
box-shadow: 0 -1px 0 0 var(--website-menu__divider-color) inset;
|
|
366
|
+
border: none;
|
|
367
|
+
width: 100%;
|
|
357
368
|
transition: background asd20-speed(1) ease-in-out;
|
|
358
369
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
359
370
|
touch-action: manipulation;
|
|
@@ -99,12 +99,25 @@
|
|
|
99
99
|
medium
|
|
100
100
|
/>
|
|
101
101
|
<asd20-multiselect-input
|
|
102
|
+
role="combobox"
|
|
103
|
+
aria-label="Choose a Category to Sort By"
|
|
104
|
+
aria-controls="joketypes"
|
|
105
|
+
aria-autocomplete="list"
|
|
106
|
+
aria-expanded="true"
|
|
107
|
+
aria-activedescendant=""
|
|
108
|
+
title="Choose a Category"
|
|
102
109
|
label="Categories"
|
|
103
110
|
:taggable="false"
|
|
104
111
|
:value="selectedCategories"
|
|
105
112
|
:items="categoryOptions"
|
|
106
113
|
@input="$emit('update:selected-categories', $event)"
|
|
107
114
|
/>
|
|
115
|
+
<form>
|
|
116
|
+
<label for="multi-select">Choose a Category</label>
|
|
117
|
+
<select name="categories" multiple id="multi-select">
|
|
118
|
+
<options :options="categoryOptions"/>
|
|
119
|
+
</select>
|
|
120
|
+
</form>
|
|
108
121
|
</div>
|
|
109
122
|
|
|
110
123
|
<div class="feed">
|
|
@@ -128,6 +141,7 @@
|
|
|
128
141
|
class="load-more"
|
|
129
142
|
icon="chevron"
|
|
130
143
|
label="Prev"
|
|
144
|
+
aira-label="Previous"
|
|
131
145
|
:iconAngle="-90"
|
|
132
146
|
size="md"
|
|
133
147
|
horizontal
|