@asd20/ui 3.2.512 → 3.2.514
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,25 +19,20 @@
|
|
|
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"
|
|
27
25
|
@keyup.enter="activateSection"
|
|
28
26
|
tabindex="-1"
|
|
29
27
|
>
|
|
30
|
-
<focus-trap
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
tabindex="-1"
|
|
34
|
-
:initial-focus="() => $refs.focused[0]"
|
|
35
|
-
>
|
|
36
|
-
<div class="asd20-site-menu__viewport" tabindex="-1">
|
|
37
|
-
<transition name="slide-right" tabindex="-1">
|
|
28
|
+
<focus-trap :active="active" :initial-focus="() => $refs.focused[0]">
|
|
29
|
+
<div class="asd20-site-menu__viewport">
|
|
30
|
+
<transition name="slide-right" role="group">
|
|
38
31
|
<div
|
|
39
32
|
v-if="!activeSection"
|
|
40
33
|
class="asd20-table-of-contents"
|
|
41
34
|
tabindex="-1"
|
|
35
|
+
role="menubar"
|
|
42
36
|
>
|
|
43
37
|
<button
|
|
44
38
|
v-for="(section, index) in sections"
|
|
@@ -47,6 +41,8 @@
|
|
|
47
41
|
class="asd20-table-of-contents__item"
|
|
48
42
|
role="menuitem"
|
|
49
43
|
ref="focused"
|
|
44
|
+
aria-expanded="false"
|
|
45
|
+
:aria-controls="`asd20-site-menu__item-${index}`"
|
|
50
46
|
@click="activeSectionIndex = index"
|
|
51
47
|
@mouseup="keyboardTriggeredLastAction = false"
|
|
52
48
|
@keyup="keyboardTriggeredLastAction = true"
|
|
@@ -60,38 +56,47 @@
|
|
|
60
56
|
name="slide-left"
|
|
61
57
|
v-on:after-enter="afterActivateTransition"
|
|
62
58
|
>
|
|
59
|
+
<!-- <focus-trap
|
|
60
|
+
:active="active"
|
|
61
|
+
aria-hidden="true"
|
|
62
|
+
returnFocusOnDeactivate="true"
|
|
63
|
+
> -->
|
|
63
64
|
<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
|
-
|
|
65
|
+
<div>
|
|
66
|
+
<button
|
|
67
|
+
class="asd20-site-menu__section__back"
|
|
68
|
+
aria-expanded="true"
|
|
69
|
+
role="menuitem"
|
|
70
|
+
@click="deactivateSection"
|
|
71
|
+
@mouseup="keyboardTriggeredLastAction = false"
|
|
72
|
+
@keyup="keyboardTriggeredLastAction = true"
|
|
73
|
+
>
|
|
74
|
+
<asd20-icon name="chevron" size="sm" />
|
|
75
|
+
<span class="title">{{ activeSection.title }}</span>
|
|
76
|
+
</button>
|
|
77
|
+
|
|
78
|
+
<div
|
|
79
|
+
:id="`asd20-site-menu__item-${activeSectionIndex}`"
|
|
80
|
+
class="asd20-site-menu__items"
|
|
81
|
+
role="group"
|
|
82
|
+
>
|
|
79
83
|
<a
|
|
80
84
|
v-for="(item, index) in activeSection.items"
|
|
81
85
|
:id="`asd20-site-menu__item-${activeSectionIndex}-${index}`"
|
|
82
86
|
:key="index"
|
|
87
|
+
role="menuitem"
|
|
83
88
|
class="asd20-site-menu__item"
|
|
84
89
|
:href="item.url"
|
|
85
90
|
@click="dismiss"
|
|
86
|
-
@keyup.escape="deactivateSection"
|
|
87
91
|
:target="
|
|
88
92
|
!item.url || item.url.startsWith('/') ? undefined : '_blank'
|
|
89
93
|
"
|
|
90
94
|
>{{ item.title }}</a
|
|
91
95
|
>
|
|
92
96
|
</div>
|
|
93
|
-
</
|
|
97
|
+
</div>
|
|
94
98
|
</div>
|
|
99
|
+
<!-- </focus-trap> -->
|
|
95
100
|
</transition>
|
|
96
101
|
</div>
|
|
97
102
|
</focus-trap>
|
|
@@ -185,6 +190,7 @@ export default {
|
|
|
185
190
|
this.$nextTick(() => {
|
|
186
191
|
if (this.keyboardTriggeredLastAction) {
|
|
187
192
|
this.setFocusSection()
|
|
193
|
+
this.setFocus()
|
|
188
194
|
}
|
|
189
195
|
})
|
|
190
196
|
} else {
|
|
@@ -354,6 +360,8 @@ export default {
|
|
|
354
360
|
padding: space(0.75) space(1) space(0.75) space(2);
|
|
355
361
|
cursor: pointer;
|
|
356
362
|
box-shadow: 0 -1px 0 0 var(--website-menu__divider-color) inset;
|
|
363
|
+
border: none;
|
|
364
|
+
width: 100%;
|
|
357
365
|
transition: background asd20-speed(1) ease-in-out;
|
|
358
366
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
359
367
|
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
|