@qhealth-design-system/core 1.8.5 → 1.9.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 (41) hide show
  1. package/CHANGELOG.md +2 -0
  2. package/package.json +1 -1
  3. package/src/components/_global/css/forms/select/component.scss +1 -0
  4. package/src/components/_global/css/links/components.scss +4 -4
  5. package/src/components/_global/html/scripts.html +0 -21
  6. package/src/components/a-z_listing/css/component.scss +1 -0
  7. package/src/components/a-z_listing/html/component.hbs +1 -1
  8. package/src/components/a-z_listing/js/manifest.json +14 -1
  9. package/src/components/accordion/css/component.scss +16 -16
  10. package/src/components/accordion/html/component.hbs +10 -10
  11. package/src/components/accordion/js/global.js +2 -0
  12. package/src/components/banner/html/component.hbs +4 -4
  13. package/src/components/banner_advanced/css/component.scss +9 -2
  14. package/src/components/banner_advanced/html/component.hbs +5 -5
  15. package/src/components/banner_advanced/js/manifest.json +17 -0
  16. package/src/components/banner_basic/html/component.hbs +4 -4
  17. package/src/components/banner_intermediate/css/component.scss +6 -1
  18. package/src/components/banner_intermediate/html/component.hbs +4 -4
  19. package/src/components/basic_search/html/component.hbs +4 -4
  20. package/src/components/breadcrumbs/css/component.scss +1 -1
  21. package/src/components/breadcrumbs/html/component.hbs +4 -4
  22. package/src/components/breadcrumbs/js/global.js +3 -3
  23. package/src/components/card_feature/html/component.hbs +4 -10
  24. package/src/components/code/css/component.scss +2 -2
  25. package/src/components/code/html/component.hbs +12 -12
  26. package/src/components/file_upload/js/global.js +74 -30
  27. package/src/components/footer/html/component.hbs +4 -4
  28. package/src/components/global_alert/html/component.hbs +25 -15
  29. package/src/components/horizontal_rule/html/component.hbs +1 -1
  30. package/src/components/in_page_navigation/js/global.js +7 -1
  31. package/src/components/main_navigation/html/component.hbs +1 -1
  32. package/src/components/mega_main_navigation/html/component.hbs +1 -1
  33. package/src/components/page_alert/css/component.scss +1 -0
  34. package/src/components/page_alert/html/component.hbs +1 -1
  35. package/src/components/page_alert/js/manifest.json +15 -0
  36. package/src/components/tab/html/component.hbs +13 -13
  37. package/src/components/widgets/html/component.hbs +1 -1
  38. package/src/helpers/Handlebars/listAZ.js +3 -2
  39. package/src/externals/esri-leaflet-vector.js +0 -5
  40. package/src/externals/esri-leaflet.js +0 -12
  41. package/src/externals/leaflet.js +0 -6
@@ -86,13 +86,13 @@
86
86
  <div class="qld__code-header">
87
87
  <div class="qld__code-header-left">
88
88
  {{#if github_link.value}}
89
- <a href="{{github_link.value}}" class="qld__code-header-link" target="_blank"><i class="fa-regular fa-arrow-up-right-from-square"></i> Github</a>
89
+ <a href="{{github_link.value}}" class="qld__code-header-link" target="_blank" aria-label="Visit Github, opens in new tab">Github<i class="fa-regular fa-arrow-up-right-from-square"></i></a>
90
90
  {{/if}}
91
91
  {{#if figma_link.value}}
92
- <a href="{{figma_link.value}}" class="qld__code-header-link" target="_blank"><i class="fa-regular fa-arrow-up-right-from-square"></i> Figma</a>
92
+ <a href="{{figma_link.value}}" class="qld__code-header-link" target="_blank" aria-label="Visit Figma, opens in new tab">Figma<i class="fa-regular fa-arrow-up-right-from-square"></i></a>
93
93
  {{/if}}
94
94
  {{#if action_link_title.value}}
95
- <a href="{{action_link_address.value}}" class="qld__code-header-link" target="_blank"><i class="fa-regular fa-arrow-up-right-from-square"></i>{{action_link_title.value}}</a>
95
+ <a href="{{action_link_address.value}}" class="qld__code-header-link" target="_blank" aria-label="Visit {{action_link_title.value}}, opens in new tab">{{action_link_title.value}}<i class="fa-regular fa-arrow-up-right-from-square"></i></a>
96
96
  {{/if}}
97
97
  </div>
98
98
  </div>
@@ -100,13 +100,13 @@
100
100
  <div class="qld__code-header">
101
101
  <div class="qld__code-header-left">
102
102
  {{#if github_link.value}}
103
- <a href="{{github_link.value}}" class="qld__code-header-link" target="_blank"><i class="fa-regular fa-arrow-up-right-from-square"></i> Github</a>
103
+ <a href="{{github_link.value}}" class="qld__code-header-link" target="_blank" aria-label="Visit Github, opens in new tab">Github<i class="fa-regular fa-arrow-up-right-from-square" ></i></a>
104
104
  {{/if}}
105
105
  {{#if figma_link.value}}
106
- <a href="{{figma_link.value}}" class="qld__code-header-link" target="_blank"><i class="fa-regular fa-arrow-up-right-from-square"></i> Figma</a>
106
+ <a href="{{figma_link.value}}" class="qld__code-header-link" target="_blank" aria-label="Visit Figma, opens in new tab">Figma<i class="fa-regular fa-arrow-up-right-from-square"></i></a>
107
107
  {{/if}}
108
108
  {{#if action_link_title.value}}
109
- <a href="{{action_link_address.value}}" class="qld__code-header-link" target="_blank"><i class="fa-regular fa-arrow-up-right-from-square"></i>{{action_link_title.value}}</a>
109
+ <a href="{{action_link_address.value}}" class="qld__code-header-link" target="_blank" aria-label="Visit {{action_link_title.value}}, opens in new tab">{{action_link_title.value}}<i class="fa-regular fa-arrow-up-right-from-square"></i></a>
110
110
  {{/if}}
111
111
  </div>
112
112
  </div>
@@ -114,13 +114,13 @@
114
114
  <div class="qld__code-header">
115
115
  <div class="qld__code-header-left">
116
116
  {{#if github_link.value}}
117
- <a href="{{github_link.value}}" class="qld__code-header-link" target="_blank"><i class="fa-regular fa-arrow-up-right-from-square"></i> Github</a>
117
+ <a href="{{github_link.value}}" class="qld__code-header-link" target="_blank" aria-label="Visit Github, opens in new tab">Github<i class="fa-regular fa-arrow-up-right-from-square"></i></a>
118
118
  {{/if}}
119
119
  {{#if figma_link.value}}
120
- <a href="{{figma_link.value}}" class="qld__code-header-link" target="_blank"><i class="fa-regular fa-arrow-up-right-from-square"></i> Figma</a>
120
+ <a href="{{figma_link.value}}" class="qld__code-header-link" target="_blank" aria-label="Visit Figma, opens in new tab">Figma<i class="fa-regular fa-arrow-up-right-from-square"></i></a>
121
121
  {{/if}}
122
122
  {{#if action_link_title.value}}
123
- <a href="{{action_link_address.value}}" class="qld__code-header-link" target="_blank"><i class="fa-regular fa-arrow-up-right-from-square"></i>{{action_link_title.value}}</a>
123
+ <a href="{{action_link_address.value}}" class="qld__code-header-link" target="_blank" aria-label="Visit {{action_link_title.value}}, opens in new tab">{{action_link_title.value}}<i class="fa-regular fa-arrow-up-right-from-square"></i></a>
124
124
  {{/if}}
125
125
  </div>
126
126
  </div>
@@ -129,13 +129,13 @@
129
129
  <div class="qld__code-header">
130
130
  <div class="qld__code-header-left">
131
131
  {{#if github_link.value}}
132
- <a href="{{github_link.value}}" class="qld__code-header-link" target="_blank"><i class="fa-regular fa-arrow-up-right-from-square"></i> Github</a>
132
+ <a href="{{github_link.value}}" class="qld__code-header-link" target="_blank" aria-label="Visit Github, opens in new tab">Github<i class="fa-regular fa-arrow-up-right-from-square"></i></a>
133
133
  {{/if}}
134
134
  {{#if figma_link.value}}
135
- <a href="{{figma_link.value}}" class="qld__code-header-link" target="_blank"><i class="fa-regular fa-arrow-up-right-from-square"></i> Figma</a>
135
+ <a href="{{figma_link.value}}" class="qld__code-header-link" target="_blank" aria-label="Visit Figma, opens in new tab">Figma<i class="fa-regular fa-arrow-up-right-from-square"></i></a>
136
136
  {{/if}}
137
137
  {{#if action_link_title.value}}
138
- <a href="{{action_link_address.value}}" class="qld__code-header-link" target="_blank"><i class="fa-regular fa-arrow-up-right-from-square"></i>{{action_link_title.value}}</a>
138
+ <a href="{{action_link_address.value}}" class="qld__code-header-link" target="_blank" aria-label="Visit {{action_link_title.value}}, opens in new tab">{{action_link_title.value}}<i class="fa-regular fa-arrow-up-right-from-square"></i></a>
139
139
  {{/if}}
140
140
  </div>
141
141
  {{#ifCond show_code.value '==' 'true'}}
@@ -17,7 +17,7 @@
17
17
 
18
18
  const fileName = file.name;
19
19
  const fileTemplate = document.createElement('div');
20
-
20
+
21
21
  fileTemplate.classList.add('qld__form-file');
22
22
 
23
23
  fileTemplate.innerHTML = `<div class="qld__form-file-info-wrapper"><div class="qld__form-file-loader">
@@ -46,6 +46,7 @@
46
46
  const fileId = file.id != undefined ? file.id : fileName;
47
47
  let fileType = file.type != undefined ? getAssetType(file.type) : '';
48
48
 
49
+
49
50
  if (file && file.size) {
50
51
  fileSize = Math.ceil(file.size / 1000);
51
52
  }
@@ -78,7 +79,7 @@
78
79
  const fileName = file.name;
79
80
  const fileTemplate = document.createElement('div');
80
81
  const fileId = file.id != undefined ? file.id : fileName;
81
-
82
+ console.log("error:", file.name);
82
83
  fileTemplate.classList.add('qld__form-file','qld__form-file--error');
83
84
 
84
85
  fileTemplate.innerHTML = `<div class="qld__form-file-info-wrapper"><div class="qld__form-file-loader">
@@ -137,8 +138,17 @@
137
138
  const fileName = file.name;
138
139
  // Regex testing for characters: <, >, :, ", /, \, |, ?, *
139
140
  // Also tests for control characters: (\x00 to \x1F)
140
- const illegalFileNameCharacters = /[<>:"/\\|?*\x00-\x1F]/;
141
+ // const illegalFileNameCharacters = /[<>:"/\\|?*\x00-\x1F]/;
141
142
 
143
+ // Combined regex for both illegal characters and HTML/JS patterns
144
+ const illegalFileNameCharacters = /[<>:"/\\|?*\x00-\x1F]|(<script.*?>|<\/script>|<.*?>|javascript:|<html.*?>|<\/html>)/i;
145
+
146
+ // If the file name contains illegal characters
147
+ if (illegalFileNameCharacters.test(fileName)) {
148
+ console.error("Unsupported characters in file name. Only use letters, numbers, space, and special characters: -_(’");
149
+ return 'Unsupported characters in file name.';
150
+ }
151
+
142
152
  // If a file of the same name has already been uploaded to the field
143
153
  if (currentFiles.some(function(item) {return file.id == item.id})) {
144
154
  console.error('Duplicate file name');
@@ -164,16 +174,12 @@
164
174
  }
165
175
 
166
176
  // If the max file limit has been reached
167
- if (!(fileSize > 0)) {
177
+ if (fileSize <= 0) {
168
178
  console.error('The selected file is empty');
169
179
  return 'The selected file is empty';
170
180
  }
171
181
 
172
- // If the file name contains illegal characters
173
- if (illegalFileNameCharacters.test(fileName)) {
174
- console.error("Unsupported characters in file name. Only use letters, numbers, space, and special characters: -_(’");
175
- return 'The selected file is empty';
176
- }
182
+
177
183
 
178
184
  return true;
179
185
  }
@@ -411,6 +417,27 @@
411
417
  });
412
418
  }
413
419
 
420
+ /**
421
+ * Sanitise File name
422
+ *
423
+ * @memberof module:fileUploads
424
+ */
425
+
426
+ const sanitiseAndValidateFileName = function (fileName) {
427
+ // Remove potentially dangerous characters (e.g., <, >, ", /, \, etc.) and unwanted characters
428
+ let sanitisedFileName = fileName
429
+ .replace(/[^a-zA-Z0-9\s\-_\.]/g, '_') // Replace unwanted characters with '_'
430
+ .replace(/[<>:"/\\|?*]/g, '_') // Remove dangerous characters
431
+ .trim(); // Trim leading/trailing spaces
432
+
433
+ // Prevent starting or ending with special characters or spaces
434
+ sanitisedFileName = sanitisedFileName.replace(/^[^a-zA-Z0-9]+|[^a-zA-Z0-9]+$/g, '');
435
+
436
+ // Return the sanitized file name
437
+ return sanitisedFileName;
438
+ };
439
+
440
+
414
441
  /**
415
442
  * Handle any files the user has dropped/selected
416
443
  *
@@ -421,46 +448,62 @@
421
448
  const usingJsApi = input_field_settings.jsApi !== undefined;
422
449
  const $dropZone = input_field_settings.dropzone_element;
423
450
  let promiseArray = [];
424
-
451
+
425
452
  // Set 'updating' class for dropzone element
426
453
  toggleDropzoneClass($dropZone, "updating");
427
-
428
- // Loop over all of the passed in files, and handle them based on input_field_settings
429
- for (let i = 0; i < files.length; i++) {
430
- const file = files[i];
431
- // Set an initial ID for the file object
432
- file.id = file.id !== undefined ? file.id : file.name;
454
+
455
+ // Loop over all of the passed-in files, and handle them based on input_field_settings
456
+ for (const element of files) {
457
+ const file = element;
458
+
433
459
  // Returns either an error message (string), or true (boolean)
434
460
  let isValid = isFileValid(file, input_field_settings);
435
- // Set the fileInfo block to the loading template HTML
436
- let $fileInfo = loadingTemplate(file);
461
+
462
+ // Sanitise File Name for UI display purposes
463
+ let sanitisedFileName = sanitiseAndValidateFileName(file.name);
464
+
465
+ // Create a new File object with the sanitised filename while preserving the content and other properties
466
+ const sanitisedFile = new File([file], sanitisedFileName, {
467
+ type: file.type,
468
+ lastModified: file.lastModified,
469
+ });
470
+
471
+ // Ensure that we carry over the custom properties (e.g., `id`) from the original file
472
+ file.id = file.id !== undefined ? file.id : sanitisedFileName;
473
+ // file.name = sanitisedFileName;
474
+ // console.log(sanitisedFile.id);
475
+
476
+ // Pass the actual File object to the loadingTemplate function, not just the sanitised name
477
+ let $fileInfo = loadingTemplate(sanitisedFile); // <-- Here we pass the sanitisedFile object
437
478
  // Append the file info box to the file preview list
438
479
  $fileList.appendChild($fileInfo);
439
-
480
+
440
481
  // If the file passes the validation rules
441
- if(isValid === true) {
482
+ if (isValid === true) {
442
483
  // If we're using the JS API to create file assets
443
- if(usingJsApi) {
444
- promiseArray.push(uploadFileJsApi(file, $fileInfo, input_field_settings));
484
+ if (usingJsApi) {
485
+ promiseArray.push(uploadFileJsApi(sanitisedFile, $fileInfo, input_field_settings));
445
486
  } else {
446
- // Push File object into files array
447
- input_field_settings.files.push(file);
448
- promiseArray.push(simulateFileUpload(file, $fileInfo));
487
+ // Push the sanitised File object into the files array (not the original file)
488
+ input_field_settings.files.push(sanitisedFile);
489
+ promiseArray.push(simulateFileUpload(sanitisedFile, $fileInfo));
449
490
  }
450
491
  } else {
451
- $fileInfo.replaceWith(errorTemplate(file, isValid));
492
+ $fileInfo.replaceWith(errorTemplate(sanitisedFile, isValid));
452
493
  }
453
494
  }
495
+
454
496
  // Only update the FileList if the JS API isn't being used
455
- if(!usingJsApi){
497
+ if (!usingJsApi) {
456
498
  // Default functionality for a file type input is to replace the current FileList with the newly selected file/s
457
499
  // This will override that for subsequent interactions with the file input, or clicking the cancel button.
458
500
  updateFileInputFileList(input_field_settings);
459
501
  }
502
+
460
503
  // Once all promises have resolved, remove the updating class, and validate the field
461
504
  try {
462
505
  await Promise.all(promiseArray);
463
- } catch(error) {
506
+ } catch (error) {
464
507
  console.error(error);
465
508
  } finally {
466
509
  // Remove 'updating' class from dropzone
@@ -468,7 +511,8 @@
468
511
  // Validate file input
469
512
  $(input_field_settings.input_element).valid();
470
513
  }
471
- }
514
+ };
515
+
472
516
 
473
517
  /**
474
518
  * Update the FileList for the file input
@@ -756,4 +800,4 @@
756
800
  QLD.fileUploads.init();
757
801
  });
758
802
 
759
- }());
803
+ }());
@@ -7,7 +7,7 @@
7
7
  <div class="row qld__footer__row">
8
8
  <div class="col-xs-12 qld__footer__column">
9
9
  <div class="qld__footer__title">
10
- <h4 class="qld__footer__heading">{{footerSiteTitle.value}}</h4>
10
+ <h2 class="qld__footer__heading">{{footerSiteTitle.value}}</h2>
11
11
  </div>
12
12
  </div>
13
13
  </div>
@@ -21,7 +21,7 @@
21
21
  <div class="row qld__footer-contact">
22
22
  <div class="col-xs-12 col-sm-8 col-lg-12">
23
23
  {{#if footerCTAHeading}}
24
- <h4 class="qld__footer__heading">{{footerCTAHeading.value}}</h4>
24
+ <h3 class="qld__footer__heading">{{footerCTAHeading.value}}</h3>
25
25
  {{/if}}
26
26
  {{#if footerCTALead}}
27
27
  <p class="qld__footer__cta-content">
@@ -57,7 +57,7 @@
57
57
  <div class="col-xs-12 col-lg-2 qld__footer__column">
58
58
  <nav class="qld__footer__navigation" aria-label="footer">
59
59
  {{#if ../footerOptionalExtraLinksHeading.value}}
60
- <h4 class="qld__footer__heading">{{../footerOptionalExtraLinksHeading.value}}</h4>
60
+ <h3 class="qld__footer__heading">{{../footerOptionalExtraLinksHeading.value}}</h3>
61
61
  {{/if}}
62
62
  <ul class="qld__link-list">
63
63
  {{#each footerOptionalSecondLinksList}}
@@ -102,7 +102,7 @@
102
102
  <div class="col-xs-12 col-lg-2 qld__footer__column">
103
103
  <nav class="qld__footer__social" aria-label="social media links">
104
104
  {{#if ../footerSocialLinksHeading.value}}
105
- <h4 class="qld__footer__heading">{{../footerSocialLinksHeading.value}}</h4>
105
+ <h3 class="qld__footer__heading">{{../footerSocialLinksHeading.value}}</h3>
106
106
  {{/if}}
107
107
  <ul class="qld__link-list">
108
108
  {{#each footerSocialLinks}}
@@ -1,16 +1,20 @@
1
1
  {{#ifCond site.metadata.alertDisplay.value '==' 'true'}}
2
- <section class="qld__global-alert qld__global-alert--{{site.metadata.alertLevel.value}}">
2
+ <div
3
+ role="region"
4
+ aria-label="{{#ifCond site.metadata.alertLevel.value '==' 'default'}}Warning{{/ifCond}}{{#ifCond site.metadata.alertLevel.value '==' 'critical'}}Alert{{/ifCond}}{{#ifCond site.metadata.alertLevel.value '==' 'general'}}Information{{/ifCond}}"
5
+ class="qld__global-alert qld__global-alert--{{site.metadata.alertLevel.value}}">
6
+
3
7
  <div class="container-fluid">
4
8
  <div class="qld__global-alert__main">
5
9
  <div class="qld__global-alert__icon">
6
10
  {{#ifCond site.metadata.alertLevel.value '==' 'default'}}
7
- <svg aria-label="Alert" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md"><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__warning"></use></svg>
11
+ <svg aria-label="Warning" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md"><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__warning"></use></svg>
8
12
  {{/ifCond}}
9
13
  {{#ifCond site.metadata.alertLevel.value '==' 'critical'}}
10
- <svg aria-label="Critical alert" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md"><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__critical"></use></svg>
14
+ <svg aria-label="Alert" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md"><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__critical"></use></svg>
11
15
  {{/ifCond}}
12
16
  {{#ifCond site.metadata.alertLevel.value '==' 'general'}}
13
- <svg aria-label="General Alert" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md"><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__info"></use></svg>
17
+ <svg aria-label="Information" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md"><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__info"></use></svg>
14
18
  {{/ifCond}}
15
19
  </div>
16
20
  <div class="qld__global-alert__content">
@@ -33,21 +37,24 @@
33
37
  </div>
34
38
  </div>
35
39
  </div>
36
- </section>
40
+ </div>
37
41
  {{/ifCond}}
38
42
  {{#ifCond site.metadata.secondAlertDisplay.value '==' 'true'}}
39
- <section class="qld__global-alert qld__global-alert--{{site.metadata.secondAlertLevel.value}}">
43
+ <div
44
+ role="region"
45
+ aria-label="{{#ifCond site.metadata.secondAlertLevel.value '==' 'default'}}Warning{{/ifCond}}{{#ifCond site.metadata.secondAlertLevel.value '==' 'critical'}}Alert{{/ifCond}}{{#ifCond site.metadata.secondAlertLevel.value '==' 'general'}}Information{{/ifCond}}"
46
+ class="qld__global-alert qld__global-alert--{{site.metadata.secondAlertLevel.value}}">
40
47
  <div class="container-fluid">
41
48
  <div class="qld__global-alert__main">
42
49
  <div class="qld__global-alert__icon">
43
50
  {{#ifCond site.metadata.secondAlertLevel.value '==' 'default'}}
44
- <svg aria-label="Alert" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md"><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__warning"></use></svg>
51
+ <svg aria-label="Warning" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md"><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__warning"></use></svg>
45
52
  {{/ifCond}}
46
53
  {{#ifCond site.metadata.secondAlertLevel.value '==' 'critical'}}
47
- <svg aria-label="Critical alert" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md"><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__critical"></use></svg>
54
+ <svg aria-label="Alert" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md"><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__critical"></use></svg>
48
55
  {{/ifCond}}
49
56
  {{#ifCond site.metadata.secondAlertLevel.value '==' 'general'}}
50
- <svg aria-label="General Alert" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md"><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__info"></use></svg>
57
+ <svg aria-label="Information" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md"><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__info"></use></svg>
51
58
  {{/ifCond}}
52
59
  </div>
53
60
  <div class="qld__global-alert__content">
@@ -70,21 +77,24 @@
70
77
  </div>
71
78
  </div>
72
79
  </div>
73
- </section>
80
+ </div>
74
81
  {{/ifCond}}
75
82
  {{#ifCond site.metadata.thirdAlertDisplay.value '==' 'true'}}
76
- <section class="qld__global-alert qld__global-alert--{{site.metadata.thirdAlertLevel.value}}">
83
+ <div
84
+ role="region"
85
+ aria-label="{{#ifCond site.metadata.thirdAlertLevel.value '==' 'default'}}Warning{{/ifCond}}{{#ifCond site.metadata.thirdAlertLevel.value '==' 'critical'}}Alert{{/ifCond}}{{#ifCond site.metadata.thirdAlertLevel.value '==' 'general'}}Information{{/ifCond}}"
86
+ class="qld__global-alert qld__global-alert--{{site.metadata.thirdAlertLevel.value}}">
77
87
  <div class="container-fluid">
78
88
  <div class="qld__global-alert__main">
79
89
  <div class="qld__global-alert__icon">
80
90
  {{#ifCond site.metadata.thirdAlertLevel.value '==' 'default'}}
81
- <svg aria-label="Alert" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md"><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__warning"></use></svg>
91
+ <svg aria-label="Warning" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md"><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__warning"></use></svg>
82
92
  {{/ifCond}}
83
93
  {{#ifCond site.metadata.thirdAlertLevel.value '==' 'critical'}}
84
- <svg aria-label="Critical alert" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md"><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__critical"></use></svg>
94
+ <svg aria-label="Alert" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md"><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__critical"></use></svg>
85
95
  {{/ifCond}}
86
96
  {{#ifCond site.metadata.thirdAlertLevel.value '==' 'general'}}
87
- <svg aria-label="General Alert" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md"><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__info"></use></svg>
97
+ <svg aria-label="Information" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md"><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__info"></use></svg>
88
98
  {{/ifCond}}
89
99
  </div>
90
100
  <div class="qld__global-alert__content">
@@ -107,5 +117,5 @@
107
117
  </div>
108
118
  </div>
109
119
  </div>
110
- </section>
120
+ </div>
111
121
  {{/ifCond}}
@@ -1,6 +1,6 @@
1
1
  {{#with component.data}}
2
2
  <section class="qld__body" id="{{#if metadata.id_field.value}}{{metadata.id_field.value}}{{else}}horizontal-rule-{{assetid}}{{/if}}">
3
3
  <hr class="qld__horizontal-rule {{metadata.colour.value}} {{metadata.theme.value}}" style="height:{{metadata.height.value}};margin-top:{{metadata.margin_top.value}};margin-bottom:{{metadata.margin_top.value}};
4
- ">
4
+ " aria-hidden="true">
5
5
  </section>
6
6
  {{/with}}
@@ -20,7 +20,13 @@
20
20
 
21
21
  var headingSelector = nav.getAttribute('data-headingType') ? nav.getAttribute('data-headingType') : 'h2';
22
22
  var pageContent = isLandingPage ? mainEl : document.getElementById('content');
23
- var headings = pageContent.querySelectorAll(headingSelector + ':not(.qld__inpage-nav-links__heading):not(.banner__heading)');
23
+ // Exclude Code CT, and accordion h3, h4, h5, h6
24
+ var headings = pageContent.querySelectorAll(
25
+ headingSelector +
26
+ ':not(.qld__inpage-nav-links__heading):not(.banner__heading):not(.qld__code *):not(.qld__accordion h3):not(.qld__accordion h4):not(.qld__accordion h5):not(.qld__accordion h6)'
27
+ );
28
+
29
+
24
30
  var list = nav.querySelector('.qld__link-list');
25
31
  list.innerHTML = '';
26
32
 
@@ -19,7 +19,7 @@
19
19
  {{#if site.metadata.mainNavHomeIconShow.value}}
20
20
  <li class="{{#if current.home}}active{{/if}} qld__main-nav__item">
21
21
  <div class="qld__main-nav__item-title">
22
- <a class="qld__main-nav__item-link" {{#if current.home}}aria-current="page"{{/if}} href="./?a={{site.data.assetid}}">
22
+ <a class="qld__main-nav__item-link" aria-label="Home" {{#if current.home}}aria-current="page" {{/if}} href="./?a={{site.data.assetid}}">
23
23
  <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__home"></use></svg>
24
24
  <span class="qld__main-nav__item-text" data-name="{{{asset_short_name}}}">Home</span>
25
25
  </a>
@@ -22,7 +22,7 @@
22
22
  {{#if site.metadata.mainNavHomeIconShow.value}}
23
23
  <li class="qld__main-nav__item {{#if current.home}}active{{/if}}">
24
24
  <div class="qld__main-nav__item-title">
25
- <a class="qld__main-nav__item-home qld__main-nav__item-link" {{#if current.home}}aria-current="page"{{/if}} href="./?a={{site.data.assetid}}">
25
+ <a class="qld__main-nav__item-home qld__main-nav__item-link" aria-label="Home" {{#if current.home}}aria-current="page"{{/if}} href="./?a={{site.data.assetid}}">
26
26
  <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--sm"><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__home"></use></svg>
27
27
  <span class="qld__main-nav__item-text" data-name="{{{asset_short_name}}}">Home</span>
28
28
  </a>
@@ -33,6 +33,7 @@
33
33
  & &--heading.qld__display-lg {
34
34
  color: var(--QLD-color-light__heading);
35
35
  @include QLD-space(margin-bottom, 1unit);
36
+ line-height: 2.25rem;
36
37
  }
37
38
 
38
39
  & a{
@@ -15,7 +15,7 @@
15
15
  <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__error"></use></svg>
16
16
  {{/ifCond}} --}}
17
17
  {{#if metadata.heading.value}}
18
- <div class="qld__page-alerts--heading qld__display-lg">{{metadata.heading.value}}</div>
18
+ <{{metadata.heading_level.value}} class="qld__page-alerts--heading qld__display-lg">{{metadata.heading.value}}</{{metadata.heading_level.value}}>
19
19
  {{/if}}
20
20
  {{#if metadata.body.value}}
21
21
  <div>{{{metadata.body.value}}}</div>
@@ -21,6 +21,21 @@
21
21
  "required": false,
22
22
  "editable": true
23
23
  },
24
+ "heading_level": {
25
+ "type": "metadata_field_select",
26
+ "description": "",
27
+ "friendly_name": "Heading level",
28
+ "value": "h2",
29
+ "options": {
30
+ "h2": "h2",
31
+ "h3": "h3",
32
+ "h4": "h4",
33
+ "h5": "h5",
34
+ "h6": "h6"
35
+ },
36
+ "required": false,
37
+ "editable": true
38
+ },
24
39
  "heading": {
25
40
  "type": "metadata_field_text",
26
41
  "description": "",
@@ -52,62 +52,62 @@
52
52
  <div class="qld__tab-container{{#if metadata.theme.value}} qld__tab-container--{{metadata.theme.value}}{{/if}} qld__tab-container__fixed" id="tab-{{assetid}}">
53
53
  <button class="qld__tab-nav__item-scroll tab-overflow-nav-button-left" aria-hidden="true" aria-label="Scroll tab buttons left" tabindex="-1"><i class="fa-solid fa-chevron-left"></i></button>
54
54
  <button class="qld__tab-nav__item-scroll tab-overflow-nav-button-right" aria-hidden="true" aria-label="Scroll tab buttons right" tabindex="-1"><i class="fa-solid fa-chevron-right"></i></button>
55
- <header class="qld__tabs" role="tablist">
55
+ <div class="qld__tabs" role="tablist">
56
56
  {{#ifCond metadata.type.value '==' 'wysiwyg'}}
57
57
  {{#if metadata.title_1.value}}
58
- <button class="qld__tab-button active" data-tab="tab1-{{assetid}}" aria-selected="true" aria-controls="tab1-{{assetid}}-content" tabindex="0" id="tab1-{{assetid}}-button"><span>{{#if metadata.icon_1.value}}<i class="{{metadata.icon_1.value}}"></i>{{/if}}{{metadata.title_1.value}}</span></button>
58
+ <button role="tab" class="qld__tab-button active" data-tab="tab1-{{assetid}}" aria-selected="true" aria-controls="tab1-{{assetid}}-content" tabindex="0" id="tab1-{{assetid}}-button"><span>{{#if metadata.icon_1.value}}<i class="{{metadata.icon_1.value}}"></i>{{/if}}{{metadata.title_1.value}}</span></button>
59
59
  {{/if}}
60
60
  {{#ifCond metadata.tab_num.value '>=' '2'}}
61
61
  {{#if metadata.title_2.value}}
62
- <button class="qld__tab-button" data-tab="tab2-{{assetid}}" aria-selected="false" aria-controls="tab2-{{assetid}}-content" tabindex="-1" id="tab2-{{assetid}}-button"><span>{{#if metadata.icon_2.value}}<i class="{{metadata.icon_2.value}}"></i>{{/if}}{{metadata.title_2.value}}</span></button>
62
+ <button role="tab" class="qld__tab-button" data-tab="tab2-{{assetid}}" aria-selected="false" aria-controls="tab2-{{assetid}}-content" tabindex="-1" id="tab2-{{assetid}}-button"><span>{{#if metadata.icon_2.value}}<i class="{{metadata.icon_2.value}}"></i>{{/if}}{{metadata.title_2.value}}</span></button>
63
63
  {{/if}}
64
64
  {{/ifCond}}
65
65
  {{#ifCond metadata.tab_num.value '>=' '3'}}
66
66
  {{#if metadata.title_3.value}}
67
- <button class="qld__tab-button" data-tab="tab3-{{assetid}}" aria-selected="false" aria-controls="tab3-{{assetid}}-content" tabindex="-1" id="tab3-{{assetid}}-button"><span>{{#if metadata.icon_3.value}}<i class="{{metadata.icon_3.value}}"></i>{{/if}}{{metadata.title_3.value}}</span></button>
67
+ <button role="tab" class="qld__tab-button" data-tab="tab3-{{assetid}}" aria-selected="false" aria-controls="tab3-{{assetid}}-content" tabindex="-1" id="tab3-{{assetid}}-button"><span>{{#if metadata.icon_3.value}}<i class="{{metadata.icon_3.value}}"></i>{{/if}}{{metadata.title_3.value}}</span></button>
68
68
  {{/if}}
69
69
  {{/ifCond}}
70
70
  {{#ifCond metadata.tab_num.value '>=' '4'}}
71
71
  {{#if metadata.title_4.value}}
72
- <button class="qld__tab-button" data-tab="tab4-{{assetid}}" aria-selected="false" aria-controls="tab4-{{assetid}}-content" tabindex="-1" id="tab4-{{assetid}}-button"><span>{{#if metadata.icon_4.value}}<i class="{{metadata.icon_4.value}}"></i>{{/if}}{{metadata.title_4.value}}</span></button>
72
+ <button role="tab" class="qld__tab-button" data-tab="tab4-{{assetid}}" aria-selected="false" aria-controls="tab4-{{assetid}}-content" tabindex="-1" id="tab4-{{assetid}}-button"><span>{{#if metadata.icon_4.value}}<i class="{{metadata.icon_4.value}}"></i>{{/if}}{{metadata.title_4.value}}</span></button>
73
73
  {{/if}}
74
74
  {{/ifCond}}
75
75
  {{#ifCond metadata.tab_num.value '>=' '5'}}
76
76
  {{#if metadata.title_5.value}}
77
- <button class="qld__tab-button" data-tab="tab5-{{assetid}}" aria-selected="false" aria-controls="tab5-{{assetid}}-content" tabindex="-1" id="tab5-{{assetid}}-button"><span>{{#if metadata.icon_5.value}}<i class="{{metadata.icon_5.value}}"></i>{{/if}}{{metadata.title_5.value}}</span></button>
77
+ <button role="tab" class="qld__tab-button" data-tab="tab5-{{assetid}}" aria-selected="false" aria-controls="tab5-{{assetid}}-content" tabindex="-1" id="tab5-{{assetid}}-button"><span>{{#if metadata.icon_5.value}}<i class="{{metadata.icon_5.value}}"></i>{{/if}}{{metadata.title_5.value}}</span></button>
78
78
  {{/if}}
79
79
  {{/ifCond}}
80
80
  {{#ifCond metadata.tab_num.value '>=' '6'}}
81
81
  {{#if metadata.title_6.value}}
82
- <button class="qld__tab-button" data-tab="tab6-{{assetid}}" aria-selected="false" aria-controls="tab6-{{assetid}}-content" tabindex="-1" id="tab6-{{assetid}}-button"><span>{{#if metadata.icon_6.value}}<i class="{{metadata.icon_6.value}}"></i>{{/if}}{{metadata.title_6.value}}</span></button>
82
+ <button role="tab" class="qld__tab-button" data-tab="tab6-{{assetid}}" aria-selected="false" aria-controls="tab6-{{assetid}}-content" tabindex="-1" id="tab6-{{assetid}}-button"><span>{{#if metadata.icon_6.value}}<i class="{{metadata.icon_6.value}}"></i>{{/if}}{{metadata.title_6.value}}</span></button>
83
83
  {{/if}}
84
84
  {{/ifCond}}
85
85
  {{#ifCond metadata.tab_num.value '>=' '7'}}
86
86
  {{#if metadata.title_7.value}}
87
- <button class="qld__tab-button" data-tab="tab7-{{assetid}}" aria-selected="false" aria-controls="tab7-{{assetid}}-content" tabindex="-1" id="tab7-{{assetid}}-button"><span>{{#if metadata.icon_7.value}}<i class="{{metadata.icon_7.value}}"></i>{{/if}}{{metadata.title_7.value}}</span></button>
87
+ <button role="tab" class="qld__tab-button" data-tab="tab7-{{assetid}}" aria-selected="false" aria-controls="tab7-{{assetid}}-content" tabindex="-1" id="tab7-{{assetid}}-button"><span>{{#if metadata.icon_7.value}}<i class="{{metadata.icon_7.value}}"></i>{{/if}}{{metadata.title_7.value}}</span></button>
88
88
  {{/if}}
89
89
  {{/ifCond}}
90
90
  {{#ifCond metadata.tab_num.value '>=' '8'}}
91
91
  {{#if metadata.title_8.value}}
92
- <button class="qld__tab-button" data-tab="tab8-{{assetid}}" aria-selected="false" aria-controls="tab8-{{assetid}}-content" tabindex="-1" id="tab8-{{assetid}}-button"><span>{{#if metadata.icon_8.value}}<i class="{{metadata.icon_8.value}}"></i>{{/if}}{{metadata.title_8.value}}</span></button>
92
+ <button role="tab" class="qld__tab-button" data-tab="tab8-{{assetid}}" aria-selected="false" aria-controls="tab8-{{assetid}}-content" tabindex="-1" id="tab8-{{assetid}}-button"><span>{{#if metadata.icon_8.value}}<i class="{{metadata.icon_8.value}}"></i>{{/if}}{{metadata.title_8.value}}</span></button>
93
93
  {{/if}}
94
94
  {{/ifCond}}
95
95
  {{#ifCond metadata.tab_num.value '>=' '9'}}
96
96
  {{#if metadata.title_9.value}}
97
- <button class="qld__tab-button" data-tab="tab9-{{assetid}}" aria-selected="false" aria-controls="tab9-{{assetid}}-content" tabindex="-1" id="tab9-{{assetid}}-button"><span>{{#if metadata.icon_9.value}}<i class="{{metadata.icon_9.value}}"></i>{{/if}}{{metadata.title_9.value}}</span></button>
97
+ <button role="tab" class="qld__tab-button" data-tab="tab9-{{assetid}}" aria-selected="false" aria-controls="tab9-{{assetid}}-content" tabindex="-1" id="tab9-{{assetid}}-button"><span>{{#if metadata.icon_9.value}}<i class="{{metadata.icon_9.value}}"></i>{{/if}}{{metadata.title_9.value}}</span></button>
98
98
  {{/if}}
99
99
  {{/ifCond}}
100
100
  {{#ifCond metadata.tab_num.value '>=' '10'}}
101
101
  {{#if metadata.title_10.value}}
102
- <button class="qld__tab-button" data-tab="tab10-{{assetid}}" aria-selected="false" aria-controls="tab10-{{assetid}}-content" tabindex="-1" id="tab10-{{assetid}}-button"><span>{{#if metadata.icon_10.value}}<i class="{{metadata.icon_10.value}}"></i>{{/if}}{{metadata.title_10.value}}</span></button>
102
+ <button role="tab" class="qld__tab-button" data-tab="tab10-{{assetid}}" aria-selected="false" aria-controls="tab10-{{assetid}}-content" tabindex="-1" id="tab10-{{assetid}}-button"><span>{{#if metadata.icon_10.value}}<i class="{{metadata.icon_10.value}}"></i>{{/if}}{{metadata.title_10.value}}</span></button>
103
103
  {{/if}}
104
104
  {{/ifCond}}
105
105
  {{else}}
106
106
  {{#each ../component.assets}}
107
- <button class="qld__tab-button {{#ifCond @key '==' 0}}active{{/ifCond}}" data-tab="tab{{@key}}-{{this.assetid}}" aria-selected="{{#ifCond @key '==' 0}}true{{else}}false{{/ifCond}}" aria-controls="tab{{@key}}-{{this.assetid}}-content" tabindex="{{#ifCond @key '==' 0}}0{{else}}-1{{/ifCond}}" id="tab{{@key}}-button"><span>{{#if this.metadata.tabIcon.value}}<i class="{{this.metadata.tabIcon.value}}"></i>{{/if}}{{this.name}}</span></button>
107
+ <button role="tab" class="qld__tab-button {{#ifCond @key '==' 0}}active{{/ifCond}}" data-tab="tab{{@key}}-{{this.assetid}}" aria-selected="{{#ifCond @key '==' 0}}true{{else}}false{{/ifCond}}" aria-controls="tab{{@key}}-{{this.assetid}}-content" tabindex="{{#ifCond @key '==' 0}}0{{else}}-1{{/ifCond}}" id="tab{{@key}}-button"><span>{{#if this.metadata.tabIcon.value}}<i class="{{this.metadata.tabIcon.value}}"></i>{{/if}}{{this.name}}</span></button>
108
108
  {{/each}}
109
109
  {{/ifCond}}
110
- </header>
110
+ </div>
111
111
  {{#ifCond metadata.type.value '==' 'wysiwyg'}}
112
112
  {{#if metadata.content_1.value}}
113
113
  <div data-tab="tab1-{{assetid}}" class="qld__tab-content active" role="tabpanel" aria-labelledby="tab1-{{assetid}}-button" id="tab1-{{assetid}}-content" tabindex="0" aria-hidden="false">{{{metadata.content_1.value}}}</div>
@@ -1,6 +1,6 @@
1
1
  {{#if site.metadata.siteBackToTopShow.value}}
2
2
  <div class="qld__widgets">
3
- <a href="#" class="qld__btn qld__btn--floating
3
+ <a href="#content" class="qld__btn qld__btn--floating
4
4
  qld__btn--back-to-top show" aria-label="Back to top">
5
5
  <span>Back to top</span>
6
6
  </a>
@@ -1,4 +1,4 @@
1
- module.exports = function(items, url, options) {
1
+ module.exports = function(items, letterHeading, url, options) {
2
2
  var html = '<li class="qld__a-z_listing__options__item">';
3
3
  var services = [];
4
4
  var letters = [];
@@ -49,7 +49,8 @@ module.exports = function(items, url, options) {
49
49
 
50
50
  return 0;
51
51
  })
52
- html += '<h3 class="qld__a-z_listing__list__item__header"><span id="'+letters[i]+'">'+letters[i]+'</span></h3>';
52
+
53
+ html += '<'+letterHeading+' class="qld__a-z_listing__list__item__header"><span id="'+letters[i]+'">'+letters[i]+'</span></'+letterHeading+'>';
53
54
  html += '<ul class="qld__a-z_listing__list__item__services">';
54
55
  for(var k = 0; k < services[letters[i]].length; k++) {
55
56
  html += '<li class="qld__a-z_listing__list__item__services__item"><a class="qld__a-z_listing__list__item__services__item__link" href="./?a='+services[letters[i]][k].id+'"><span>'+services[letters[i]][k].name+'</span></a></li>';