@qhealth-design-system/core 1.9.0 → 1.10.0

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 (24) hide show
  1. package/CHANGELOG.md +2 -0
  2. package/package.json +1 -1
  3. package/src/components/_global/css/tags/component.scss +66 -16
  4. package/src/components/accordion/html/component.hbs +2 -4
  5. package/src/components/accordion/js/manifest.json +13 -0
  6. package/src/components/banner_advanced/html/component.hbs +18 -4
  7. package/src/components/basic_search/html/component.hbs +5 -6
  8. package/src/components/card_feature/html/component.hbs +5 -5
  9. package/src/components/card_feature/js/manifest.json +2 -0
  10. package/src/components/card_multi_action/html/component.hbs +2 -3
  11. package/src/components/card_multi_action/js/manifest.json +2 -0
  12. package/src/components/card_no_action/html/component.hbs +2 -2
  13. package/src/components/card_no_action/js/manifest.json +2 -0
  14. package/src/components/card_single_action/html/component.hbs +2 -2
  15. package/src/components/card_single_action/js/manifest.json +2 -0
  16. package/src/components/data_table/css/component.scss +10 -0
  17. package/src/components/data_table/js/global.js +42 -12
  18. package/src/components/main_navigation/html/component.hbs +1 -1
  19. package/src/components/main_navigation/js/global.js +4 -3
  20. package/src/components/mega_main_navigation/html/component.hbs +1 -1
  21. package/src/components/pagination/css/component.scss +32 -12
  22. package/src/components/pagination/html/component.hbs +2 -1
  23. package/src/helpers/Handlebars/getThumbnailAlt.js +2 -9
  24. package/src/html/component-tag_list.html +57 -44
package/CHANGELOG.md CHANGED
@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
7
7
 
8
8
  ## Unreleased
9
9
 
10
+ ## 1.10.0 - 2024-11-27
11
+
10
12
  ## 1.9.0 - 2024-11-19
11
13
 
12
14
  ## 1.8.5 - 2024-09-11
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@qhealth-design-system/core",
3
- "version": "1.9.0",
3
+ "version": "1.10.0",
4
4
  "description": "",
5
5
  "licence": "MIT",
6
6
  "main": "index.js",
package/src/components/_global/css/tags/component.scss CHANGED
@@ -16,6 +16,39 @@
16
16
  // white-space: nowrap;
17
17
  text-align: center;
18
18
  text-decoration: none;
19
+ &-list--wrapper {
20
+ display: flex;
21
+ align-items: flex-start;
22
+ flex-direction: column;
23
+ padding-top: 20px;
24
+ padding-top: 1.25rem;
25
+ @include QLD-media(md) {
26
+ flex-direction: row;
27
+ align-items: center;
28
+ }
29
+ @include QLD-media(lg) {
30
+ padding-top: 24px;
31
+ padding-top: 1.5rem;
32
+ }
33
+ }
34
+ &-list--title {
35
+ font-weight: bold;
36
+ display: block;
37
+ white-space: nowrap;
38
+ padding-right: 16px;
39
+ padding-right: 1rem;
40
+ padding-bottom: 8px;
41
+ padding-bottom: 0.5rem;
42
+ @include QLD-media(md) {
43
+ padding-top: 4px;
44
+ padding-top: 0.25rem;
45
+ padding-bottom: 0px;
46
+ padding-bottom: 0rem;
47
+ -ms-flex-item-align: center;
48
+ align-self: center;
49
+ }
50
+ }
51
+
19
52
 
20
53
  .qld__card .qld__card__footer &{
21
54
  color: var(--QLD-color-light__text--lighter);
@@ -73,7 +106,6 @@ a.qld__tag,
73
106
  background-color: var(--QLD-color-light__action--primary-hover);
74
107
  color: var(--QLD-color-light__link--on-action);
75
108
  border-color: var(--QLD-color-light__action--primary-hover);
76
-
77
109
  }
78
110
  }
79
111
 
@@ -198,6 +230,8 @@ a.qld__tag,
198
230
  border-radius: $QLD-border-radius-lg;
199
231
  text-decoration: none;
200
232
  @include QLD-underline('light','noUnderline','default');
233
+ display: flex;
234
+ align-items: center;
201
235
 
202
236
  &:hover {
203
237
  color: var(--QLD-color-light__text);
@@ -206,33 +240,40 @@ a.qld__tag,
206
240
  text-decoration: none;
207
241
  }
208
242
 
209
- .qld__tag--filter-close{
210
-
211
- // background-image: QLD-svg-with-fill($QLD-icon-close, var(--QLD-color-light__action--secondary));
212
- // background-color: transparent;
213
- // background-repeat: no-repeat;
214
- // background-position: center;
215
- mask-image: QLD-svguri($QLD-icon-close);
243
+ .qld__tag--filter-close {
244
+ @include QLD-space(margin-left, .5unit);
245
+ background-color: transparent;
246
+ border: none;
247
+ height: 1.25rem;
248
+ width: 1.25rem;
249
+ display: flex;
250
+ align-items: center;
251
+ padding: 0;
252
+ border-radius: 50%;
253
+ &:focus{
254
+ outline: 3px solid var(--QLD-color-light__focus);
255
+ outline-offset: 2px;
256
+ }
257
+ }
258
+ .qld__tag--filter-close-icon {
259
+ mask-image: QLD-svguri($QLD-icon-close);
216
260
  mask-repeat: no-repeat;
217
261
  mask-position: center;
218
262
  background-color: var(--QLD-color-light__action--secondary);
219
263
  @include QLD-space(height, 1.25unit);
220
264
  @include QLD-space(width, 1.25unit);
221
265
  display: inline-block;
222
- @include QLD-space(margin-left, .5unit);
266
+ margin-left: 0;
223
267
  @include QLD-space(line-height, 1.5unit);
224
268
  vertical-align: middle;
225
269
  white-space: nowrap;
226
270
  border: none;
227
271
  cursor: pointer;
228
-
229
-
230
- &:hover{
231
- // background-image: QLD-svg-with-fill($QLD-icon-close-hover, var(--QLD-color-light__action--secondary));
272
+ &:hover {
232
273
  mask-image: QLD-svguri($QLD-icon-close-hover);
233
274
  background-color: var(--QLD-color-light__action--secondary-hover);
234
275
  }
235
- }
276
+ }
236
277
 
237
278
  .qld__body--light &,
238
279
  .qld__card--light .qld__card__footer &{
@@ -271,7 +312,11 @@ a.qld__tag,
271
312
  text-decoration: none;
272
313
  }
273
314
 
274
- .qld__tag--filter-close{
315
+ .qld__tag--filter-close:focus{
316
+ outline-color: var(--QLD-color-dark__focus);
317
+ }
318
+
319
+ .qld__tag--filter-close-icon {
275
320
  // background-image: QLD-svg-with-fill($QLD-icon-close, var(--QLD-color-dark__action--secondary));
276
321
  background-color: var(--QLD-color-dark__action--secondary-hover);
277
322
 
@@ -295,7 +340,12 @@ a.qld__tag,
295
340
  text-decoration: none;
296
341
  }
297
342
 
298
- .qld__tag--filter-close{
343
+
344
+ .qld__tag--filter-close:focus{
345
+ outline-color: var(--QLD-color-dark__focus);
346
+ }
347
+
348
+ .qld__tag--filter-close-icon{
299
349
  // background-image: QLD-svg-with-fill($QLD-icon-close, var(--QLD-color-dark__action--secondary));
300
350
  background-color: var(--QLD-color-dark__action--secondary-hover);
301
351
 
package/src/components/accordion/html/component.hbs CHANGED
@@ -15,16 +15,14 @@
15
15
  <button class="qld__accordion__toggle-btn qld__accordion__toggle-btn--closed" type="button" aria-expanded="false">Open all</button>
16
16
  </div>
17
17
  {{/ifCond}}
18
-
19
18
  {{#printAccordion metadata}}
20
19
  {{#ifCond this.content '!=' ''}}
21
20
  <div class="qld__accordion">
22
- <h2>
21
+ <{{../metadata.title_level.value}}>
23
22
  <button class="qld__accordion__title js-qld__accordion qld__accordion--closed" aria-controls="accordion-group-{{../assetid}}-{{this.fieldid}}" aria-expanded="false" type="button">
24
23
  {{this.title}}
25
24
  </button>
26
- </h2>
27
-
25
+ </{{../metadata.title_level.value}}>
28
26
  <div class="qld__accordion__body qld__accordion--closed" id="accordion-group-{{../assetid}}-{{this.fieldid}}">
29
27
  <div class="qld__accordion__body-wrapper">
30
28
  {{{this.content}}}
package/src/components/accordion/js/manifest.json CHANGED
@@ -23,6 +23,19 @@
23
23
  "required": false,
24
24
  "editable": true
25
25
  },
26
+ "title_level": {
27
+ "type": "metadata_field_select",
28
+ "description": "",
29
+ "friendly_name": "Accordion Title Level",
30
+ "value": "h3",
31
+ "options": {
32
+ "h2": "H2",
33
+ "h3": "H3",
34
+ "h4": "H4"
35
+ },
36
+ "required": false,
37
+ "editable": true
38
+ },
26
39
  "toggle_all": {
27
40
  "type": "metadata_field_select",
28
41
  "description": "",
package/src/components/banner_advanced/html/component.hbs CHANGED
@@ -81,10 +81,24 @@
81
81
  {{#ifCond metadata.hero_image_alignment.value '==' 'grid'}}col-md-6 col-lg-5{{else}}col-md-7 col-lg-5 col-xl-4{{/ifCond}}
82
82
  {{/ifCond}}">
83
83
 
84
- <div class="qld__banner__image {{#if metadata.background_image_sm.value}}qld__banner__image--mobile-hide{{/if}}" style="background-image: url('./?a={{metadata.hero_image.value}}');"></div>
85
- {{#if metadata.background_image_sm.value}}
86
- <div class="qld__banner__image qld__banner__image--background qld__banner__image--desktop-hide" style="background-image: url('./?a={{metadata.background_image_sm.value}}');"></div>
87
- {{/if}}
84
+ <div class="qld__banner__image {{#if metadata.background_image_sm.value}}qld__banner__image--mobile-hide{{/if}}" style="background-image: url('./?a={{metadata.hero_image.value}}');"
85
+ {{#ifCond background_image_alt '!=' ''}}
86
+ role="img"
87
+ aria-label="{{ background_image_alt}}"
88
+ {{/ifCond}}
89
+ >
90
+ </div>
91
+ {{#if metadata.background_image_sm.value}}
92
+ <div
93
+ class="qld__banner__image qld__banner__image--background qld__banner__image--desktop-hide"
94
+ style="background-image: url('./?a={{metadata.background_image_sm.value}}');"
95
+ {{#ifCond background_image_alt '!=' ''}}
96
+ role="img"
97
+ aria-label="{{ background_image_alt}}"
98
+ {{/ifCond}}
99
+ >
100
+ </div>
101
+ {{/if}}
88
102
  </div>
89
103
  {{/ifAny}}
90
104
 
package/src/components/basic_search/html/component.hbs CHANGED
@@ -111,15 +111,14 @@
111
111
  </div>
112
112
 
113
113
  <div class="qld__search__sort">
114
- <div class="qld__search__sort-text">Sort by:</div>
115
- <label for="sort" class="sr-only">Sort</label>
116
- <select id="search-sort" class="qld__select" name="sort" aria-label="sort">
114
+ <label for="search-sort" class="qld__search__sort-text">Sort by:</label>
115
+ <select id="search-sort" class="qld__select" name="sort">
117
116
  <option value="" selected="">Relevance</option>
118
117
  <option value="title">A-Z</option>
119
118
  <option value="dtitle">Z-A</option>
120
- <option value="date">Newest</option>
119
+ <option value="date">Newest</option>
121
120
  <option value="adate">Oldest</option>
122
- </select>
121
+ </select>
123
122
  </div>
124
123
  </div>
125
124
  </div>
@@ -331,7 +330,7 @@
331
330
 
332
331
  {{#if label}}
333
332
  <li class="{{linkType}}{{#if isCurrent}} active{{/if}}">
334
- <a href="{{{url}}}">{{label}}</a></li>
333
+ <a href="{{{url}}}" aria-current="page">{{label}}</a></li>
335
334
  {{/if}}
336
335
 
337
336
  {{#ifCond linkType '===' 'next'}}
package/src/components/card_feature/html/component.hbs CHANGED
@@ -1,7 +1,7 @@
1
1
  {{#with component.data}}
2
2
  <section class="qld__card--wrapper qld__body {{metadata.body_background.value}} {{metadata.body_background_type.value}}"
3
- {{#ifCond metadata.body_background_type.value '==' 'qld__card--wrapper-bg-image'}} style="background-image:url(./?a={{metadata.body_background_image.value}})"{{/ifCond}}
4
- {{#ifCond metadata.body_background_type.value '==' 'qld__card--wrapper-bg-pattern'}} style="background-image:url(./?a={{metadata.body_background_pattern.value}})"{{/ifCond}} >
3
+ {{#ifCond metadata.body_background_type.value '==' 'qld__card--wrapper-bg-image'}} style="background-image:url(./?a={{metadata.body_background_image.value}})" {{#if ../component.background_image_alt}} role="img" aria-label="{{../component.background_image_alt}}"{{/if}}{{/ifCond}}
4
+ {{#ifCond metadata.body_background_type.value '==' 'qld__card--wrapper-bg-pattern'}} style="background-image:url(./?a={{metadata.body_background_pattern.value}})" {{#if ../component.background_pattern_alt}} role="img" aria-label="{{../component.background_pattern_alt}}"{{/if}}{{/ifCond}}>
5
5
  <div class="container-fluid">
6
6
 
7
7
  {{#if metadata.intro_heading.value}}
@@ -43,9 +43,9 @@
43
43
  <div class="qld__card__icon"><i class="{{metadata.card_icon.value}}"></i></div>
44
44
  {{/ifCond}}
45
45
  {{#ifCond metadata.show_icon_image.value '==' 'image'}}
46
- <a aria-label="{{metadata.card_title.value}}" {{#if metadata.shortDescription.value}}aria-describedby="card-{{assetid}}"{{/if}} class="qld__card__image-link" href="./?a={{metadata.card_title_url.value}}">
46
+ <a aria-label="{{metadata.card_title.value}}" class="qld__card__image-link" href="./?a={{metadata.card_title_url.value}}">
47
47
 
48
- <div class="qld__responsive-media-img--bg" style="background-image: url('./?a={{metadata.card_image.value}}');" {{#if ../component.image_alt}}aria-label="Image for {{../component.image_alt}}"{{else}}aria-label="Image for {{metadata.card_title.value}}"{{/if}}></div>
48
+ <div class="qld__responsive-media-img--bg" style="background-image: url('./?a={{metadata.card_image.value}}');" {{#if ../component.image_alt}}role="img" aria-label="{{../component.image_alt}}"{{/if}}></div>
49
49
 
50
50
  </a>
51
51
  {{/ifCond}}
@@ -55,7 +55,7 @@
55
55
  <div class="qld__card__content-inner">
56
56
  {{#if metadata.card_title_url.value}}
57
57
  <h3 class="qld__card__title">
58
- <a aria-label="{{metadata.card_title.value}}" {{#if metadata.shortDescription.value}}aria-describedby="card-{{assetid}}"{{/if}} class="qld__card--clickable__link" href="./?a={{metadata.card_title_url.value}}">{{metadata.card_title.value}}</a>
58
+ <a aria-label="{{metadata.card_title.value}}" class="qld__card--clickable__link" href="./?a={{metadata.card_title_url.value}}">{{metadata.card_title.value}}</a>
59
59
  </h3>
60
60
  {{/if}}
61
61
  {{#if metadata.body_text.value}}
package/src/components/card_feature/js/manifest.json CHANGED
@@ -391,6 +391,8 @@
391
391
  }
392
392
  },
393
393
  "image_alt": "Image of mario themed ginger bread house",
394
+ "background_image_alt": "Mario image",
395
+ "background_pattern_alt": "Gatton HHS",
394
396
  "children": [{
395
397
  "assetid": "22724",
396
398
  "type_code": "page_redirect",
package/src/components/card_multi_action/html/component.hbs CHANGED
@@ -1,8 +1,7 @@
1
1
  {{#with component.data}}
2
2
  <section class="qld__card--wrapper qld__body {{metadata.body_background.value}} {{metadata.body_background_type.value}}" id="{{#if metadata.id_field.value}}{{metadata.id_field.value}}{{else}}cards-multi-{{assetid}}{{/if}}"
3
- {{#ifCond metadata.body_background_type.value '==' 'qld__card--wrapper-bg-image'}} style="background-image:url(./?a={{metadata.body_background_image.value}})"{{/ifCond}}
4
- {{#ifCond metadata.body_background_type.value '==' 'qld__card--wrapper-bg-pattern'}} style="background-image:url(./?a={{metadata.body_background_pattern.value}})"{{/ifCond}} >
5
- <div class="container-fluid">
3
+ {{#ifCond metadata.body_background_type.value '==' 'qld__card--wrapper-bg-image'}} style="background-image:url(./?a={{metadata.body_background_image.value}})" {{#if ../component.background_image_alt}} role="img" aria-label="{{../component.background_image_alt}}"{{/if}}{{/ifCond}}
4
+ {{#ifCond metadata.body_background_type.value '==' 'qld__card--wrapper-bg-pattern'}} style="background-image:url(./?a={{metadata.body_background_pattern.value}})" {{#if ../component.background_pattern_alt}} role="img" aria-label="{{../component.background_pattern_alt}}"{{/if}}{{/ifCond}} >
6
5
  {{/with}}
7
6
  {{#with component.data}}
8
7
  {{#if metadata.intro_heading.value}}
package/src/components/card_multi_action/js/manifest.json CHANGED
@@ -229,6 +229,8 @@
229
229
  }
230
230
  }
231
231
  },
232
+ "background_image_alt": "Mario image",
233
+ "background_pattern_alt": "Gatton HHS",
232
234
  "children": [{
233
235
  "assetid": "22724",
234
236
  "type_code": "page_redirect",
package/src/components/card_no_action/html/component.hbs CHANGED
@@ -1,6 +1,6 @@
1
1
  <section class="qld__card--wrapper qld__body {{component.data.metadata.body_background.value}} {{component.data.metadata.body_background_type.value}}" id="{{#if component.data.metadata.id_field.value}}{{component.data.metadata.id_field.value}}{{else}}cards-{{component.data.assetid}}{{/if}}"
2
- {{#ifCond component.data.metadata.body_background_type.value '==' 'qld__card--wrapper-bg-image'}} style="background-image:url(./?a={{component.data.metadata.body_background_image.value}})"{{/ifCond}}
3
- {{#ifCond component.data.metadata.body_background_type.value '==' 'qld__card--wrapper-bg-pattern'}} style="background-image:url(./?a={{component.data.metadata.body_background_pattern.value}})"{{/ifCond}} >
2
+ {{#ifCond component.data.metadata.body_background_type.value '==' 'qld__card--wrapper-bg-image'}} style="background-image:url(./?a={{component.data.metadata.body_background_image.value}})"{{#if component.background_image_alt}} role="img" aria-label="{{component.background_image_alt}}"{{/if}}{{/ifCond}}
3
+ {{#ifCond component.data.metadata.body_background_type.value '==' 'qld__card--wrapper-bg-pattern'}} style="background-image:url(./?a={{component.data.metadata.body_background_pattern.value}})"{{#if component.background_pattern_alt}} role="img" aria-label="{{component.background_pattern_alt}}"{{/if}}{{/ifCond}} >
4
4
 
5
5
  <div class="container-fluid">
6
6
 
package/src/components/card_no_action/js/manifest.json CHANGED
@@ -217,6 +217,8 @@
217
217
  }
218
218
  }
219
219
  },
220
+ "background_image_alt": "Mario image",
221
+ "background_pattern_alt": "Gatton HHS",
220
222
  "children": [
221
223
  {
222
224
  "assetid": "22724",
package/src/components/card_single_action/html/component.hbs CHANGED
@@ -1,6 +1,6 @@
1
1
  <section class="qld__card--wrapper qld__body {{component.data.metadata.body_background.value}} {{component.data.metadata.body_background_type.value}}" id="{{#if component.data.metadata.id_field.value}}{{component.data.metadata.id_field.value}}{{else}}cards-single-{{component.data.assetid}}{{/if}}"
2
- {{#ifCond component.data.metadata.body_background_type.value '==' 'qld__card--wrapper-bg-image'}} style="background-image:url(./?a={{component.data.metadata.body_background_image.value}})"{{/ifCond}}
3
- {{#ifCond component.data.metadata.body_background_type.value '==' 'qld__card--wrapper-bg-pattern'}} style="background-image:url(./?a={{component.data.metadata.body_background_pattern.value}})"{{/ifCond}} >
2
+ {{#ifCond component.data.metadata.body_background_type.value '==' 'qld__card--wrapper-bg-image'}} style="background-image:url(./?a={{component.data.metadata.body_background_image.value}})"{{#if component.background_image_alt}} role="img" aria-label="{{component.background_image_alt}}"{{/if}}{{/ifCond}}
3
+ {{#ifCond component.data.metadata.body_background_type.value '==' 'qld__card--wrapper-bg-pattern'}} style="background-image:url(./?a={{component.data.metadata.body_background_pattern.value}})"{{#if component.background_pattern_alt}} role="img" aria-label="{{component.background_pattern_alt}}"{{/if}}{{/ifCond}} >
4
4
 
5
5
  <div class="container-fluid">
6
6
 
package/src/components/card_single_action/js/manifest.json CHANGED
@@ -229,6 +229,8 @@
229
229
  }
230
230
  }
231
231
  },
232
+ "background_image_alt": "Mario image",
233
+ "background_pattern_alt": "Gatton HHS",
232
234
  "children": [
233
235
  {
234
236
  "assetid": "22724",
package/src/components/data_table/css/component.scss CHANGED
@@ -482,6 +482,7 @@ table.qld__data-table, table.dataTable { // the table needs to be used for this
482
482
  background-color: transparent;
483
483
  padding: 0.75rem 2rem 0.75rem 1rem;
484
484
  margin-left: 0.75rem;
485
+ width: 5rem;
485
486
  }
486
487
 
487
488
  .qld__btn--search { //needs to stay
@@ -510,6 +511,15 @@ table.qld__data-table, table.dataTable { // the table needs to be used for this
510
511
  .bottom {
511
512
  gap: 24px;
512
513
  }
514
+
515
+ .qld__data-table__btn {
516
+ background: none;
517
+ border: none;
518
+ cursor: pointer;
519
+ font-weight: 600;
520
+ color: var(--QLD-color-light__link);
521
+ }
522
+
513
523
  }
514
524
 
515
525
  &.qld__table--striped {
package/src/components/data_table/js/global.js CHANGED
@@ -109,7 +109,7 @@
109
109
  pagingTag: "li",
110
110
  language: {
111
111
  paginate: {
112
- previous: `<a rel="prev"
112
+ previous: `<button rel="prev"
113
113
  aria-label="Next page of results" class="qld__search-pagination_link">
114
114
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" aria-hidden="true" focusable="false"
115
115
  width="16" height="16" role="img">
@@ -117,10 +117,10 @@
117
117
  d="M448 256C448 264.8 440.6 272 431.4 272H54.11l140.7 149.3c6.157 6.531 5.655 16.66-1.118 22.59C190.5 446.6 186.5 448 182.5 448c-4.505 0-9.009-1.75-12.28-5.25l-165.9-176c-5.752-6.094-5.752-15.41 0-21.5l165.9-176c6.19-6.562 16.69-7 23.45-1.094c6.773 5.938 7.275 16.06 1.118 22.59L54.11 240h377.3C440.6 240 448 247.2 448 256z">
118
118
  </path>
119
119
  </svg><span>Back</span>
120
- </a>`,
121
- next: `<a rel="next" aria-label="Next page of results" class="qld__search-pagination_link">
120
+ </button>`,
121
+ next: `<button rel="next" aria-label="Next page of results" class="qld__search-pagination_link">
122
122
  <span>Next</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" aria-hidden="true" focusable="false" width="16" height="16" role="img"><path fill="currentColor" d="M443.7 266.8l-165.9 176C274.5 446.3 269.1 448 265.5 448c-3.986 0-7.988-1.375-11.16-4.156c-6.773-5.938-7.275-16.06-1.118-22.59L393.9 272H16.59c-9.171 0-16.59-7.155-16.59-15.1S7.421 240 16.59 240h377.3l-140.7-149.3c-6.157-6.531-5.655-16.66 1.118-22.59c6.789-5.906 17.27-5.469 23.45 1.094l165.9 176C449.4 251.3 449.4 260.7 443.7 266.8z"></path></svg>
123
- </a>`,
123
+ </button>`,
124
124
  },
125
125
  sEmptyTable: "No data available in table",
126
126
  sInfo: "<span class='qld__data-table-item-numbers'><span class='qld__data-table-item-numbers-heading'>Showing:</span> _START_-_END_ of <span class='qld__data-table-item-numbers-total'>_TOTAL_ entries</span></span>",
@@ -163,12 +163,13 @@
163
163
  var $this = $(this);
164
164
  if (
165
165
  $this.children("a").length === 0 &&
166
+ $this.children("button").length === 0 &&
166
167
  $this.children("span").length === 0 &&
167
168
  $this.children("svg").length === 0
168
169
  ) {
169
170
  var textContent = $this.text();
170
171
  $this.html(
171
- '<a class="num">' + textContent + "</a>"
172
+ '<button type="button" class="num">' + textContent + "</button>"
172
173
  );
173
174
  }
174
175
  });
@@ -185,6 +186,21 @@
185
186
  }
186
187
  );
187
188
  $("li.previous").addClass("prev"); //adding the appropriate class
189
+ // Remove role="link" and tabindex="0" from <li> elements in pagination
190
+ $('li.qld__search-pagination_link[role="link"]').removeAttr('role');
191
+ $('li.qld__search-pagination_link').removeAttr('tabindex');
192
+
193
+ // Update sortable <th> elements
194
+ $(tableDivId + " .dataTables_wrapper th[tabindex='0']").each(function () {
195
+ const $this = $(this);
196
+
197
+ // Remove the tabindex attribute
198
+ $this.removeAttr("tabindex");
199
+
200
+ // Replace the content with a button
201
+ const textContent = $this.text().trim(); // Get the current text
202
+ $this.html('<button type="button" class="sortable-header-btn qld__data-table__btn">' + textContent + "</button>");
203
+ });
188
204
  },
189
205
  });
190
206
 
@@ -230,7 +246,7 @@
230
246
  pagingTag: "li",
231
247
  language: {
232
248
  paginate: {
233
- previous: `<a rel="prev"
249
+ previous: `<button rel="prev"
234
250
  aria-label="Next page of results" class="qld__search-pagination_link">
235
251
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" aria-hidden="true" focusable="false"
236
252
  width="16" height="16" role="img">
@@ -238,10 +254,10 @@
238
254
  d="M448 256C448 264.8 440.6 272 431.4 272H54.11l140.7 149.3c6.157 6.531 5.655 16.66-1.118 22.59C190.5 446.6 186.5 448 182.5 448c-4.505 0-9.009-1.75-12.28-5.25l-165.9-176c-5.752-6.094-5.752-15.41 0-21.5l165.9-176c6.19-6.562 16.69-7 23.45-1.094c6.773 5.938 7.275 16.06 1.118 22.59L54.11 240h377.3C440.6 240 448 247.2 448 256z">
239
255
  </path>
240
256
  </svg><span>Back</span>
241
- </a>`,
242
- next: `<a rel="next" aria-label="Next page of results" class="qld__search-pagination_link">
257
+ </button>`,
258
+ next: `<button rel="next" aria-label="Next page of results" class="qld__search-pagination_link">
243
259
  <span>Next</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" aria-hidden="true" focusable="false" width="16" height="16" role="img"><path fill="currentColor" d="M443.7 266.8l-165.9 176C274.5 446.3 269.1 448 265.5 448c-3.986 0-7.988-1.375-11.16-4.156c-6.773-5.938-7.275-16.06-1.118-22.59L393.9 272H16.59c-9.171 0-16.59-7.155-16.59-15.1S7.421 240 16.59 240h377.3l-140.7-149.3c-6.157-6.531-5.655-16.66 1.118-22.59c6.789-5.906 17.27-5.469 23.45 1.094l165.9 176C449.4 251.3 449.4 260.7 443.7 266.8z"></path></svg>
244
- </a>`,
260
+ </button>`,
245
261
  },
246
262
  sEmptyTable: "No data available in table",
247
263
  sInfo: "<span class='qld__data-table-item-numbers'><span class='qld__data-table-item-numbers-heading'>Showing:</span> _START_-_END_ of <span class='qld__data-table-item-numbers-total'>_TOTAL_ entries</span></span>",
@@ -285,11 +301,12 @@
285
301
  var $this = $(this);
286
302
  if (
287
303
  $this.children("a").length === 0 &&
304
+ $this.children("button").length === 0 &&
288
305
  $this.children("span").length === 0 &&
289
306
  $this.children("svg").length === 0
290
307
  ) {
291
308
  var textContent = $this.text();
292
- $this.html('<a class="num">' + textContent + "</a>");
309
+ $this.html('<button class="num">' + textContent + "</button>");
293
310
  }
294
311
  });
295
312
 
@@ -305,8 +322,21 @@
305
322
  }
306
323
  );
307
324
  $("li.previous").addClass("prev"); //adding the appropriate class
308
-
309
-
325
+ // Remove role="link" and tabindex="0" from <li> elements in pagination
326
+ $('li.qld__search-pagination_link[role="link"]').removeAttr('role');
327
+ $('li.qld__search-pagination_link').removeAttr('tabindex');
328
+
329
+ // Update sortable <th> elements
330
+ $(tableDivId + " #qld_table_html th[tabindex='0']").each(function () {
331
+ const $this = $(this);
332
+
333
+ // Remove the tabindex attribute
334
+ $this.removeAttr("tabindex");
335
+
336
+ // Replace the content with a button
337
+ const textContent = $this.text().trim(); // Get the current text
338
+ $this.html('<button type="button" class="sortable-header-btn qld__data-table__btn">' + textContent + "</button>");
339
+ });
310
340
 
311
341
  },
312
342
  });
package/src/components/main_navigation/html/component.hbs CHANGED
@@ -9,7 +9,7 @@
9
9
  <div class="qld__main-nav__menu-inner">
10
10
  <div class="qld__main-nav__focus-trap-top"></div>
11
11
  <div class="qld__main-nav__header">
12
- <h6 class="qld__main-nav__menu-heading">Menu</h6>
12
+ <h2 class="qld__main-nav__menu-heading" tabindex="-1">Menu</h2>
13
13
  <button aria-controls="main-nav" class="qld__main-nav__toggle qld__main-nav__toggle--close">
14
14
  <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md"><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__close"></use></svg>
15
15
  <span class="qld__main-nav__toggle-text">Close</span>
package/src/components/main_navigation/js/global.js CHANGED
@@ -204,6 +204,7 @@
204
204
  var openButton = document.querySelector('.qld__main-nav__toggle--open');
205
205
  var focustrapTop = menu.querySelector('.qld__main-nav__focus-trap-top');
206
206
  var focustrapBottom = menu.querySelector('.qld__main-nav__focus-trap-bottom');
207
+ var menuHeading = document.querySelector(".qld__main-nav__menu-heading");
207
208
  var focusContent = menu.querySelectorAll('a, .qld__main-nav__toggle');
208
209
  var closed = target.className.indexOf('qld__main-nav__content--open') === -1;
209
210
  var header = document.querySelector('.qld__header');
@@ -247,7 +248,7 @@
247
248
  if (state === 'opening' ) {
248
249
 
249
250
  // Move the focus to the close button
250
- closeButton.focus();
251
+ menuHeading.focus();
251
252
  openButton.setAttribute('aria-expanded', true);
252
253
  closeButton.setAttribute('aria-expanded', true);
253
254
 
@@ -255,7 +256,7 @@
255
256
  focustrapTop.setAttribute('tabindex', 0);
256
257
  focustrapBottom.setAttribute('tabindex', 0);
257
258
 
258
- header.setAttribute('aria-hidden', true);
259
+ // header.setAttribute('aria-hidden', true);
259
260
  body.setAttribute('aria-hidden', true);
260
261
  footer.setAttribute('aria-hidden', true);
261
262
 
@@ -285,7 +286,7 @@
285
286
  }
286
287
  } else {
287
288
  // Move the focus back to the menu button
288
- openButton.focus();
289
+ closeButton.focus();
289
290
  openButton.setAttribute('aria-expanded', false);
290
291
  closeButton.setAttribute('aria-expanded', false);
291
292
 
package/src/components/mega_main_navigation/html/component.hbs CHANGED
@@ -9,7 +9,7 @@
9
9
  <div class="qld__main-nav__menu-inner">
10
10
  <div class="qld__main-nav__focus-trap-top"></div>
11
11
  <div class="qld__main-nav__header">
12
- <h6 class="qld__main-nav__menu-heading">Menu</h6>
12
+ <h2 class="qld__main-nav__menu-heading" tabindex="-1">Menu</h2>
13
13
  <button
14
14
  aria-controls="main-nav"
15
15
  class="qld__main-nav__toggle qld__main-nav__toggle--close"
package/src/components/pagination/css/component.scss CHANGED
@@ -22,7 +22,13 @@
22
22
  }
23
23
  }
24
24
 
25
- &.active a{
25
+ button:focus {
26
+ outline: 3px solid var(--QLD-color-light__focus);
27
+ outline-offset: 2px;
28
+ }
29
+
30
+ &.active a,
31
+ &.active button {
26
32
  background-color: var(--QLD-color-light__action--primary);
27
33
  // border-color: var(--QLD-color-light__action--primary);
28
34
  box-shadow: inset 0 0 0 $QLD-border-width-thin var(--QLD-color-light__action--primary);
@@ -32,6 +38,7 @@
32
38
 
33
39
  &:hover{
34
40
  background-color: var(--QLD-color-light__action--primary-hover);
41
+ color: var(--QLD-color-light__link--on-action);
35
42
  // border-color: var(--QLD-color-light__action--primary-hover);
36
43
  box-shadow: inset 0 0 0 $QLD-border-width-default var(--QLD-color-light__action--primary-hover);
37
44
  @include QLD-box-shadow(1);
@@ -40,8 +47,11 @@
40
47
  &:active,
41
48
  &:focus {
42
49
  background-color: var(--QLD-color-light__action--primary-hover);
50
+ color: var(--QLD-color-light__link--on-action);
43
51
  // border-color: var(--QLD-color-light__action--primary-hover);
44
52
  box-shadow: inset 0 0 0 $QLD-border-width-thin var(--QLD-color-light__action--primary-hover);
53
+ outline: 3px solid var(--QLD-color-light__focus);
54
+ outline-offset: 2px;
45
55
  }
46
56
  }
47
57
 
@@ -53,7 +63,7 @@
53
63
  &.next,
54
64
  &.prev,
55
65
  &.ellipsis{
56
- a{
66
+ a, button{
57
67
  box-shadow: none;
58
68
  @include QLD-media(lg) {
59
69
  width: auto;
@@ -97,18 +107,18 @@
97
107
  }
98
108
 
99
109
  .mid, .num {
100
- a {
110
+ a, button {
101
111
  &:active,
102
112
  &:focus {
103
- color: var(--QLD-color-dark__link);
104
- background-color: var(--QLD-color-light__action--secondary);
113
+ color: var(--QLD-color-light__link);
114
+ background-color: transparent;
105
115
  // border: $QLD-border-width-default solid var(--QLD-color-light__action--secondary);
106
116
  box-shadow: inset 0 0 0 $QLD-border-width-default var(--QLD-color-light__action--secondary);
107
117
  }
108
118
  }
109
119
  }
110
120
 
111
- a {
121
+ a, button {
112
122
  text-decoration: none;
113
123
  @include QLD-space(height, 2unit);
114
124
  @include QLD-space(min-width, 2unit);
@@ -121,7 +131,9 @@
121
131
  display: inline-flex;
122
132
  justify-content: center;
123
133
  @include QLD-space(line-height, 1.25unit);
124
- box-shadow: inset 0 0 0 $QLD-border-width-thin $QLD-color-neutral--lighter;
134
+ box-shadow: inset 0 0 0 $QLD-border-width-thin $QLD-color-light__border--alt;
135
+ border: none;
136
+ cursor: pointer;
125
137
 
126
138
  &:hover{
127
139
  color: var(--QLD-color-light__link);
@@ -129,11 +141,13 @@
129
141
  text-decoration: none;
130
142
  box-shadow: inset 0 0 0 $QLD-border-width-default var(--QLD-color-light__action--secondary);
131
143
  }
144
+ &:visited{
145
+ color: var(--QLD-color-light__link);
146
+ }
132
147
 
133
148
  &[rel] {
134
149
  color: var(--QLD-color-light__action--primary);
135
150
  }
136
-
137
151
  }
138
152
 
139
153
  span {
@@ -149,7 +163,12 @@
149
163
  .qld__body--dark & {
150
164
 
151
165
  li{
152
- &.active a{
166
+ & button {
167
+ outline: 3px solid var(--QLD-color-light__focus);
168
+ outline-offset: 2px;
169
+ }
170
+ &.active a,
171
+ &.active button {
153
172
  background-color: var(--QLD-color-dark__action--primary);
154
173
  color: var(--QLD-color-dark__link--on-action);
155
174
 
@@ -173,7 +192,7 @@
173
192
  &.next,
174
193
  &.prev,
175
194
  &.ellipsis{
176
- a{
195
+ a, button{
177
196
  &:hover{
178
197
  color: var(--QLD-color-dark__link);
179
198
  box-shadow: none;
@@ -185,7 +204,7 @@
185
204
  }
186
205
 
187
206
  .mid, .num {
188
- a {
207
+ a, button {
189
208
  &:active,
190
209
  &:focus {
191
210
  color: var(--QLD-color-light__link);
@@ -197,7 +216,8 @@
197
216
  }
198
217
  }
199
218
 
200
- a{
219
+ a,
220
+ button {
201
221
  background-color: var(--QLD-color-dark__background);
202
222
  // border-color: var(--QLD-color-dark__border);
203
223
  box-shadow: inset 0 0 0 $QLD-border-width-thin var(--QLD-color-dark__border);
package/src/components/pagination/html/component.hbs CHANGED
@@ -19,7 +19,8 @@
19
19
 
20
20
  {{#if label}}
21
21
  <li class="{{linkType}}{{#if isCurrent}} active{{/if}}">
22
- <a class="qld__search-pagination_link" href="{{url}}">{{label}}</a></li>
22
+ <a class="qld__search-pagination_link" href="{{url}}" aria-current="page">{{label}}</a>
23
+ </li>
23
24
  {{/if}}
24
25
 
25
26
  {{#ifCond linkType '===' 'next'}}
package/src/helpers/Handlebars/getThumbnailAlt.js CHANGED
@@ -1,12 +1,5 @@
1
1
  module.exports = function(thumbnails, index, shortName) {
2
- var ariaLabel = 'aria-label="Image for '
2
+ if (!thumbnails[index].asset_thumbnail_alt.length) return '';
3
3
 
4
- if(thumbnails[index].asset_thumbnail_alt.length){
5
-
6
- ariaLabel += thumbnails[index].asset_thumbnail_alt + '"';
7
- } else {
8
- ariaLabel += shortName + '"';
9
- }
10
-
11
- return ariaLabel
4
+ return 'aria-label="' + thumbnails[index].asset_thumbnail_alt + '" role="img"';
12
5
  }
package/src/html/component-tag_list.html CHANGED
@@ -107,17 +107,21 @@
107
107
  </li>
108
108
  </ul>
109
109
  <h3>Tags - Applied filter</h3>
110
- <ul class="qld__tag-list">
111
- <li>
112
- <a href="https://www.sunshinecoast.health.qld.gov.au/about-us/news?tag=dental_health" class="qld__tag qld__tag--filter" tabindex="0">Filter<button class="qld__tag--filter-close" data-toggleUrl="{{toggleUrl}}"><span class="sr-only">close</span></button></a>
113
- </li>
114
- <li>
115
- <a href="https://www.sunshinecoast.health.qld.gov.au/about-us/news?tag=staff" class="qld__tag qld__tag--filter" tabindex="0">Filter<button class="qld__tag--filter-close" data-toggleUrl="{{toggleUrl}}"><span class="sr-only">close</span></button></a>
116
- </li>
117
- <li>
118
- <a href="https://www.sunshinecoast.health.qld.gov.au/about-us/news?tag=dental_health" class="qld__tag qld__tag--filter" tabindex="0">Filter<button class="qld__tag--filter-close" data-toggleUrl="{{toggleUrl}}"><span class="sr-only">close</span></button></a>
119
- </li>
120
- </ul>
110
+ <div class="qld__tag-list--wrapper">
111
+ <span class="qld__tag-list--title">Filter by:</span>
112
+ <ul class="qld__tag-list">
113
+ <li>
114
+ <div class="qld__tag qld__tag--filter" tabindex="0">Filter<button class="qld__tag--filter-close" data-toggleUrl="{{toggleUrl}}"><span class="qld__tag--filter-close-icon"></span><span class="sr-only">close</span></button></div>
115
+ </li>
116
+ <li>
117
+ <div class="qld__tag qld__tag--filter" tabindex="0">Filter<button class="qld__tag--filter-close" data-toggleUrl="{{toggleUrl}}"><span class="qld__tag--filter-close-icon"></span><span class="sr-only">close</span></button></div>
118
+ </li>
119
+ <li>
120
+ <div class="qld__tag qld__tag--filter" tabindex="0">Filter<button class="qld__tag--filter-close" data-toggleUrl="{{toggleUrl}}"><span class="qld__tag--filter-close-icon"></span><span class="sr-only">close</span></button></div>
121
+ </li>
122
+ </ul>
123
+ </div>
124
+
121
125
  </div>
122
126
  </div>
123
127
  <div class="qld__body qld__body--alt">
@@ -172,17 +176,20 @@
172
176
  </li>
173
177
  </ul>
174
178
  <h3>Tags - Applied filter</h3>
175
- <ul class="qld__tag-list">
176
- <li>
177
- <a href="https://www.sunshinecoast.health.qld.gov.au/about-us/news?tag=dental_health" class="qld__tag qld__tag--filter" tabindex="0">Filter<button class="qld__tag--filter-close" data-toggleUrl="{{toggleUrl}}"><span class="sr-only">close</span></button></a>
178
- </li>
179
- <li>
180
- <a href="https://www.sunshinecoast.health.qld.gov.au/about-us/news?tag=staff" class="qld__tag qld__tag--filter" tabindex="0">Filter<button class="qld__tag--filter-close" data-toggleUrl="{{toggleUrl}}"><span class="sr-only">close</span></button></a>
181
- </li>
182
- <li>
183
- <a href="https://www.sunshinecoast.health.qld.gov.au/about-us/news?tag=dental_health" class="qld__tag qld__tag--filter" tabindex="0">Filter<button class="qld__tag--filter-close" data-toggleUrl="{{toggleUrl}}"><span class="sr-only">close</span></button></a>
184
- </li>
185
- </ul>
179
+ <div class="qld__tag-list--wrapper">
180
+ <span class="qld__tag-list--title">Filter by:</span>
181
+ <ul class="qld__tag-list">
182
+ <li>
183
+ <div class="qld__tag qld__tag--filter" tabindex="0">Filter<button class="qld__tag--filter-close" data-toggleUrl="{{toggleUrl}}"><span class="qld__tag--filter-close-icon"></span><span class="sr-only">close</span></button></div>
184
+ </li>
185
+ <li>
186
+ <div class="qld__tag qld__tag--filter" tabindex="0">Filter<button class="qld__tag--filter-close" data-toggleUrl="{{toggleUrl}}"><span class="qld__tag--filter-close-icon"></span><span class="sr-only">close</span></button></div>
187
+ </li>
188
+ <li>
189
+ <div class="qld__tag qld__tag--filter" tabindex="0">Filter<button class="qld__tag--filter-close" data-toggleUrl="{{toggleUrl}}"><span class="qld__tag--filter-close-icon"></span><span class="sr-only">close</span></button></div>
190
+ </li>
191
+ </ul>
192
+ </div>
186
193
  </div>
187
194
  </div>
188
195
  <div class="qld__body qld__body--dark">
@@ -237,17 +244,20 @@
237
244
  </li>
238
245
  </ul>
239
246
  <h3>Tags - Applied filter</h3>
240
- <ul class="qld__tag-list">
241
- <li>
242
- <a href="https://www.sunshinecoast.health.qld.gov.au/about-us/news?tag=dental_health" class="qld__tag qld__tag--filter" tabindex="0">Filter<button class="qld__tag--filter-close" data-toggleUrl="{{toggleUrl}}"><span class="sr-only">close</span></button></a>
243
- </li>
244
- <li>
245
- <a href="https://www.sunshinecoast.health.qld.gov.au/about-us/news?tag=staff" class="qld__tag qld__tag--filter" tabindex="0">Filter<button class="qld__tag--filter-close" data-toggleUrl="{{toggleUrl}}"><span class="sr-only">close</span></button></a>
246
- </li>
247
- <li>
248
- <a href="https://www.sunshinecoast.health.qld.gov.au/about-us/news?tag=dental_health" class="qld__tag qld__tag--filter" tabindex="0">Filter<button class="qld__tag--filter-close" data-toggleUrl="{{toggleUrl}}"><span class="sr-only">close</span></button></a>
249
- </li>
250
- </ul>
247
+ <div class="qld__tag-list--wrapper">
248
+ <span class="qld__tag-list--title">Filter by:</span>
249
+ <ul class="qld__tag-list">
250
+ <li>
251
+ <div class="qld__tag qld__tag--filter" tabindex="0">Filter<button class="qld__tag--filter-close" data-toggleUrl="{{toggleUrl}}"><span class="qld__tag--filter-close-icon"></span><span class="sr-only">close</span></button></div>
252
+ </li>
253
+ <li>
254
+ <div class="qld__tag qld__tag--filter" tabindex="0">Filter<button class="qld__tag--filter-close" data-toggleUrl="{{toggleUrl}}"><span class="qld__tag--filter-close-icon"></span><span class="sr-only">close</span></button></div>
255
+ </li>
256
+ <li>
257
+ <div class="qld__tag qld__tag--filter" tabindex="0">Filter<button class="qld__tag--filter-close" data-toggleUrl="{{toggleUrl}}"><span class="qld__tag--filter-close-icon"></span><span class="sr-only">close</span></button></div>
258
+ </li>
259
+ </ul>
260
+ </div>
251
261
  </div>
252
262
  </div>
253
263
  <div class="qld__body qld__body--dark-alt">
@@ -302,17 +312,20 @@
302
312
  </li>
303
313
  </ul>
304
314
  <h3>Tags - Applied filter</h3>
305
- <ul class="qld__tag-list">
306
- <li>
307
- <a href="https://www.sunshinecoast.health.qld.gov.au/about-us/news?tag=dental_health" class="qld__tag qld__tag--filter" tabindex="0">Filter<button class="qld__tag--filter-close" data-toggleUrl="{{toggleUrl}}"><span class="sr-only">close</span></button></a>
308
- </li>
309
- <li>
310
- <a href="https://www.sunshinecoast.health.qld.gov.au/about-us/news?tag=staff" class="qld__tag qld__tag--filter" tabindex="0">Filter<button class="qld__tag--filter-close" data-toggleUrl="{{toggleUrl}}"><span class="sr-only">close</span></button></a>
311
- </li>
312
- <li>
313
- <a href="https://www.sunshinecoast.health.qld.gov.au/about-us/news?tag=dental_health" class="qld__tag qld__tag--filter" tabindex="0">Filter<button class="qld__tag--filter-close" data-toggleUrl="{{toggleUrl}}"><span class="sr-only">close</span></button></a>
314
- </li>
315
- </ul>
315
+ <div class="qld__tag-list--wrapper">
316
+ <span class="qld__tag-list--title">Filter by:</span>
317
+ <ul class="qld__tag-list">
318
+ <li>
319
+ <div class="qld__tag qld__tag--filter" tabindex="0">Filter<button class="qld__tag--filter-close" data-toggleUrl="{{toggleUrl}}"><span class="qld__tag--filter-close-icon"></span><span class="sr-only">close</span></button></div>
320
+ </li>
321
+ <li>
322
+ <div href="https://www.sunshinecoast.health.qld.gov.au/about-us/news?tag=staff" class="qld__tag qld__tag--filter" tabindex="0">Filter<button class="qld__tag--filter-close" data-toggleUrl="{{toggleUrl}}"><span class="qld__tag--filter-close-icon"></span><span class="sr-only">close</span></button></div>
323
+ </li>
324
+ <li>
325
+ <div class="qld__tag qld__tag--filter" tabindex="0">Filter<button class="qld__tag--filter-close" data-toggleUrl="{{toggleUrl}}"><span class="qld__tag--filter-close-icon"></span><span class="sr-only">close</span></button></div>
326
+ </li>
327
+ </ul>
328
+ </div>
316
329
  </div>
317
330
  </div>
318
331
  </div>