admin-lte 4.0.0-beta3 → 4.0.0-rc2

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 (74) hide show
  1. package/.browserslistrc +9 -4
  2. package/ACCESSIBILITY-COMPLIANCE.md +369 -0
  3. package/CHANGELOG.md +314 -0
  4. package/README.md +43 -7
  5. package/dist/css/adminlte.css +1412 -1264
  6. package/dist/css/adminlte.css.map +1 -1
  7. package/dist/css/adminlte.min.css +1 -1
  8. package/dist/css/adminlte.min.css.map +1 -1
  9. package/dist/css/adminlte.rtl.css +1430 -1256
  10. package/dist/css/adminlte.rtl.css.map +1 -1
  11. package/dist/css/adminlte.rtl.min.css +1 -1
  12. package/dist/css/adminlte.rtl.min.css.map +1 -1
  13. package/dist/js/adminlte.js +786 -345
  14. package/dist/js/adminlte.js.map +1 -1
  15. package/dist/js/adminlte.min.js +3 -3
  16. package/dist/js/adminlte.min.js.map +1 -1
  17. package/dist/pages/UI/general.html +41 -9
  18. package/dist/pages/UI/icons.html +38 -6
  19. package/dist/pages/UI/timeline.html +38 -6
  20. package/dist/pages/docs/browser-support.html +39 -25
  21. package/dist/pages/docs/color-mode.html +44 -31
  22. package/dist/pages/docs/components/main-header.html +39 -25
  23. package/dist/pages/docs/components/main-sidebar.html +40 -27
  24. package/dist/pages/docs/faq.html +38 -23
  25. package/dist/pages/docs/how-to-contribute.html +39 -25
  26. package/dist/pages/docs/introduction.html +44 -35
  27. package/dist/pages/docs/javascript/treeview.html +39 -25
  28. package/dist/pages/docs/layout.html +38 -6
  29. package/dist/pages/docs/license.html +38 -23
  30. package/dist/pages/examples/lockscreen.html +17 -5
  31. package/dist/pages/examples/login-v2.html +16 -4
  32. package/dist/pages/examples/login.html +16 -4
  33. package/dist/pages/examples/register-v2.html +16 -4
  34. package/dist/pages/examples/register.html +16 -4
  35. package/dist/pages/forms/general.html +38 -6
  36. package/dist/pages/generate/theme.html +155 -5
  37. package/dist/pages/index.html +42 -27
  38. package/dist/pages/index2.html +39 -7
  39. package/dist/pages/index3.html +38 -6
  40. package/dist/pages/layout/collapsed-sidebar.html +38 -6
  41. package/dist/pages/layout/fixed-complete.html +862 -0
  42. package/dist/pages/layout/fixed-footer.html +861 -0
  43. package/dist/pages/layout/fixed-header.html +861 -0
  44. package/dist/pages/layout/fixed-sidebar.html +38 -6
  45. package/dist/pages/layout/layout-custom-area.html +38 -6
  46. package/dist/pages/layout/layout-rtl.html +38 -6
  47. package/dist/pages/layout/logo-switch.html +17 -5
  48. package/dist/pages/layout/sidebar-mini.html +38 -6
  49. package/dist/pages/layout/unfixed-sidebar.html +38 -6
  50. package/dist/pages/tables/simple.html +38 -6
  51. package/dist/pages/widgets/cards.html +38 -6
  52. package/dist/pages/widgets/info-box.html +38 -6
  53. package/dist/pages/widgets/small-box.html +38 -6
  54. package/eslint.config.js +81 -0
  55. package/package.json +34 -31
  56. package/src/scss/_accessibility.scss +292 -0
  57. package/src/scss/_app-footer.scss +8 -0
  58. package/src/scss/_app-header.scss +8 -0
  59. package/src/scss/_table.scss +1 -9
  60. package/src/scss/_variables.scss +2 -1
  61. package/src/scss/adminlte.scss +3 -0
  62. package/src/ts/accessibility.ts +533 -0
  63. package/src/ts/adminlte.ts +48 -9
  64. package/src/ts/card-widget.ts +1 -2
  65. package/src/ts/push-menu.ts +1 -2
  66. package/src/ts/util/index.ts +39 -7
  67. package/.astro/content-assets.mjs +0 -1
  68. package/.astro/content-modules.mjs +0 -1
  69. package/.astro/content.d.ts +0 -166
  70. package/.astro/data-store.json +0 -1
  71. package/.astro/settings.json +0 -5
  72. package/.astro/types.d.ts +0 -2
  73. package/adminlte-v4.0.0-beta1-with-dist.zip +0 -0
  74. package/adminlte-v4.0.0-beta3.zip +0 -0
package/dist/pages/layout/fixed-sidebar.html CHANGED
@@ -4,25 +4,37 @@
4
4
  <head>
5
5
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6
6
  <title>AdminLTE 4 | Fixed Sidebar</title>
7
+ <!--begin::Accessibility Meta Tags-->
8
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
9
+ <meta name="color-scheme" content="light dark" />
10
+ <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
11
+ <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
12
+ <!--end::Accessibility Meta Tags-->
7
13
  <!--begin::Primary Meta Tags-->
8
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
9
14
  <meta name="title" content="AdminLTE 4 | Fixed Sidebar" />
10
15
  <meta name="author" content="ColorlibHQ" />
11
16
  <meta
12
17
  name="description"
13
- content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS."
18
+ content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS. Fully accessible with WCAG 2.1 AA compliance."
14
19
  />
15
20
  <meta
16
21
  name="keywords"
17
- content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard"
22
+ content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
18
23
  />
19
24
  <!--end::Primary Meta Tags-->
25
+ <!--begin::Accessibility Features-->
26
+ <!-- Skip links will be dynamically added by accessibility.js -->
27
+ <meta name="supported-color-schemes" content="light dark" />
28
+ <link rel="preload" href="../../../dist/css/adminlte.css" as="style" />
29
+ <!--end::Accessibility Features-->
20
30
  <!--begin::Fonts-->
21
31
  <link
22
32
  rel="stylesheet"
23
33
  href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
24
34
  integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
25
35
  crossorigin="anonymous"
36
+ media="print"
37
+ onload="this.media='all'"
26
38
  />
27
39
  <!--end::Fonts-->
28
40
  <!--begin::Third Party Plugin(OverlayScrollbars)-->
@@ -276,8 +288,10 @@
276
288
  <ul
277
289
  class="nav sidebar-menu flex-column"
278
290
  data-lte-toggle="treeview"
279
- role="menu"
291
+ role="navigation"
292
+ aria-label="Main navigation"
280
293
  data-accordion="false"
294
+ id="navigation"
281
295
  >
282
296
  <li class="nav-item">
283
297
  <a href="#" class="nav-link">
@@ -365,6 +379,24 @@
365
379
  <p>Fixed Sidebar</p>
366
380
  </a>
367
381
  </li>
382
+ <li class="nav-item">
383
+ <a href="../layout/fixed-header.html" class="nav-link">
384
+ <i class="nav-icon bi bi-circle"></i>
385
+ <p>Fixed Header</p>
386
+ </a>
387
+ </li>
388
+ <li class="nav-item">
389
+ <a href="../layout/fixed-footer.html" class="nav-link">
390
+ <i class="nav-icon bi bi-circle"></i>
391
+ <p>Fixed Footer</p>
392
+ </a>
393
+ </li>
394
+ <li class="nav-item">
395
+ <a href="../layout/fixed-complete.html" class="nav-link">
396
+ <i class="nav-icon bi bi-circle"></i>
397
+ <p>Fixed Complete</p>
398
+ </a>
399
+ </li>
368
400
  <li class="nav-item">
369
401
  <a href="../layout/layout-custom-area.html" class="nav-link">
370
402
  <i class="nav-icon bi bi-circle"></i>
@@ -772,7 +804,7 @@
772
804
  <!--end::To the end-->
773
805
  <!--begin::Copyright-->
774
806
  <strong>
775
- Copyright &copy; 2014-2024&nbsp;
807
+ Copyright &copy; 2014-2025&nbsp;
776
808
  <a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
777
809
  </strong>
778
810
  All rights reserved.
@@ -812,7 +844,7 @@
812
844
  };
813
845
  document.addEventListener('DOMContentLoaded', function () {
814
846
  const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
815
- if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
847
+ if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
816
848
  OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
817
849
  scrollbars: {
818
850
  theme: Default.scrollbarTheme,
package/dist/pages/layout/layout-custom-area.html CHANGED
@@ -4,25 +4,37 @@
4
4
  <head>
5
5
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6
6
  <title>AdminLTE 4 | Layout Custom Area</title>
7
+ <!--begin::Accessibility Meta Tags-->
8
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
9
+ <meta name="color-scheme" content="light dark" />
10
+ <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
11
+ <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
12
+ <!--end::Accessibility Meta Tags-->
7
13
  <!--begin::Primary Meta Tags-->
8
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
9
14
  <meta name="title" content="AdminLTE 4 | Layout Custom Area" />
10
15
  <meta name="author" content="ColorlibHQ" />
11
16
  <meta
12
17
  name="description"
13
- content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS."
18
+ content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS. Fully accessible with WCAG 2.1 AA compliance."
14
19
  />
15
20
  <meta
16
21
  name="keywords"
17
- content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard"
22
+ content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
18
23
  />
19
24
  <!--end::Primary Meta Tags-->
25
+ <!--begin::Accessibility Features-->
26
+ <!-- Skip links will be dynamically added by accessibility.js -->
27
+ <meta name="supported-color-schemes" content="light dark" />
28
+ <link rel="preload" href="../../../dist/css/adminlte.css" as="style" />
29
+ <!--end::Accessibility Features-->
20
30
  <!--begin::Fonts-->
21
31
  <link
22
32
  rel="stylesheet"
23
33
  href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
24
34
  integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
25
35
  crossorigin="anonymous"
36
+ media="print"
37
+ onload="this.media='all'"
26
38
  />
27
39
  <!--end::Fonts-->
28
40
  <!--begin::Third Party Plugin(OverlayScrollbars)-->
@@ -276,8 +288,10 @@
276
288
  <ul
277
289
  class="nav sidebar-menu flex-column"
278
290
  data-lte-toggle="treeview"
279
- role="menu"
291
+ role="navigation"
292
+ aria-label="Main navigation"
280
293
  data-accordion="false"
294
+ id="navigation"
281
295
  >
282
296
  <li class="nav-item">
283
297
  <a href="#" class="nav-link">
@@ -365,6 +379,24 @@
365
379
  <p>Fixed Sidebar</p>
366
380
  </a>
367
381
  </li>
382
+ <li class="nav-item">
383
+ <a href="../layout/fixed-header.html" class="nav-link">
384
+ <i class="nav-icon bi bi-circle"></i>
385
+ <p>Fixed Header</p>
386
+ </a>
387
+ </li>
388
+ <li class="nav-item">
389
+ <a href="../layout/fixed-footer.html" class="nav-link">
390
+ <i class="nav-icon bi bi-circle"></i>
391
+ <p>Fixed Footer</p>
392
+ </a>
393
+ </li>
394
+ <li class="nav-item">
395
+ <a href="../layout/fixed-complete.html" class="nav-link">
396
+ <i class="nav-icon bi bi-circle"></i>
397
+ <p>Fixed Complete</p>
398
+ </a>
399
+ </li>
368
400
  <li class="nav-item">
369
401
  <a href="../layout/layout-custom-area.html" class="nav-link active">
370
402
  <i class="nav-icon bi bi-circle"></i>
@@ -804,7 +836,7 @@
804
836
  <!--end::To the end-->
805
837
  <!--begin::Copyright-->
806
838
  <strong>
807
- Copyright &copy; 2014-2024&nbsp;
839
+ Copyright &copy; 2014-2025&nbsp;
808
840
  <a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
809
841
  </strong>
810
842
  All rights reserved.
@@ -844,7 +876,7 @@
844
876
  };
845
877
  document.addEventListener('DOMContentLoaded', function () {
846
878
  const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
847
- if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
879
+ if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
848
880
  OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
849
881
  scrollbars: {
850
882
  theme: Default.scrollbarTheme,
package/dist/pages/layout/layout-rtl.html CHANGED
@@ -4,25 +4,37 @@
4
4
  <head>
5
5
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6
6
  <title>AdminLTE 4 | Layout RTL</title>
7
+ <!--begin::Accessibility Meta Tags-->
8
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
9
+ <meta name="color-scheme" content="light dark" />
10
+ <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
11
+ <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
12
+ <!--end::Accessibility Meta Tags-->
7
13
  <!--begin::Primary Meta Tags-->
8
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
9
14
  <meta name="title" content="AdminLTE 4 | Layout RTL" />
10
15
  <meta name="author" content="ColorlibHQ" />
11
16
  <meta
12
17
  name="description"
13
- content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS."
18
+ content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS. Fully accessible with WCAG 2.1 AA compliance."
14
19
  />
15
20
  <meta
16
21
  name="keywords"
17
- content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard"
22
+ content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
18
23
  />
19
24
  <!--end::Primary Meta Tags-->
25
+ <!--begin::Accessibility Features-->
26
+ <!-- Skip links will be dynamically added by accessibility.js -->
27
+ <meta name="supported-color-schemes" content="light dark" />
28
+ <link rel="preload" href="../../../dist/css/adminlte.rtl.css" as="style" />
29
+ <!--end::Accessibility Features-->
20
30
  <!--begin::Fonts-->
21
31
  <link
22
32
  rel="stylesheet"
23
33
  href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
24
34
  integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
25
35
  crossorigin="anonymous"
36
+ media="print"
37
+ onload="this.media='all'"
26
38
  />
27
39
  <!--end::Fonts-->
28
40
  <!--begin::Third Party Plugin(OverlayScrollbars)-->
@@ -276,8 +288,10 @@
276
288
  <ul
277
289
  class="nav sidebar-menu flex-column"
278
290
  data-lte-toggle="treeview"
279
- role="menu"
291
+ role="navigation"
292
+ aria-label="Main navigation"
280
293
  data-accordion="false"
294
+ id="navigation"
281
295
  >
282
296
  <li class="nav-item">
283
297
  <a href="#" class="nav-link">
@@ -365,6 +379,24 @@
365
379
  <p>Fixed Sidebar</p>
366
380
  </a>
367
381
  </li>
382
+ <li class="nav-item">
383
+ <a href="../layout/fixed-header.html" class="nav-link">
384
+ <i class="nav-icon bi bi-circle"></i>
385
+ <p>Fixed Header</p>
386
+ </a>
387
+ </li>
388
+ <li class="nav-item">
389
+ <a href="../layout/fixed-footer.html" class="nav-link">
390
+ <i class="nav-icon bi bi-circle"></i>
391
+ <p>Fixed Footer</p>
392
+ </a>
393
+ </li>
394
+ <li class="nav-item">
395
+ <a href="../layout/fixed-complete.html" class="nav-link">
396
+ <i class="nav-icon bi bi-circle"></i>
397
+ <p>Fixed Complete</p>
398
+ </a>
399
+ </li>
368
400
  <li class="nav-item">
369
401
  <a href="../layout/layout-custom-area.html" class="nav-link">
370
402
  <i class="nav-icon bi bi-circle"></i>
@@ -772,7 +804,7 @@
772
804
  <!--end::To the end-->
773
805
  <!--begin::Copyright-->
774
806
  <strong>
775
- Copyright &copy; 2014-2024&nbsp;
807
+ Copyright &copy; 2014-2025&nbsp;
776
808
  <a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
777
809
  </strong>
778
810
  All rights reserved.
@@ -812,7 +844,7 @@
812
844
  };
813
845
  document.addEventListener('DOMContentLoaded', function () {
814
846
  const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
815
- if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
847
+ if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
816
848
  OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
817
849
  scrollbars: {
818
850
  theme: Default.scrollbarTheme,
package/dist/pages/layout/logo-switch.html CHANGED
@@ -4,25 +4,37 @@
4
4
  <head>
5
5
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6
6
  <title>AdminLTE 4 | Sidebar Mini</title>
7
+ <!--begin::Accessibility Meta Tags-->
8
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
9
+ <meta name="color-scheme" content="light dark" />
10
+ <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
11
+ <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
12
+ <!--end::Accessibility Meta Tags-->
7
13
  <!--begin::Primary Meta Tags-->
8
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
9
14
  <meta name="title" content="AdminLTE 4 | Sidebar Mini" />
10
15
  <meta name="author" content="ColorlibHQ" />
11
16
  <meta
12
17
  name="description"
13
- content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS."
18
+ content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS. Fully accessible with WCAG 2.1 AA compliance."
14
19
  />
15
20
  <meta
16
21
  name="keywords"
17
- content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard"
22
+ content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
18
23
  />
19
24
  <!--end::Primary Meta Tags-->
25
+ <!--begin::Accessibility Features-->
26
+ <!-- Skip links will be dynamically added by accessibility.js -->
27
+ <meta name="supported-color-schemes" content="light dark" />
28
+ <link rel="preload" href="../../../dist/css/adminlte.css" as="style" />
29
+ <!--end::Accessibility Features-->
20
30
  <!--begin::Fonts-->
21
31
  <link
22
32
  rel="stylesheet"
23
33
  href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
24
34
  integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
25
35
  crossorigin="anonymous"
36
+ media="print"
37
+ onload="this.media='all'"
26
38
  />
27
39
  <!--end::Fonts-->
28
40
  <!--begin::Third Party Plugin(OverlayScrollbars)-->
@@ -429,7 +441,7 @@
429
441
  <!--end::To the end-->
430
442
  <!--begin::Copyright-->
431
443
  <strong>
432
- Copyright &copy; 2014-2024&nbsp;
444
+ Copyright &copy; 2014-2025&nbsp;
433
445
  <a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
434
446
  </strong>
435
447
  All rights reserved.
@@ -469,7 +481,7 @@
469
481
  };
470
482
  document.addEventListener('DOMContentLoaded', function () {
471
483
  const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
472
- if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
484
+ if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
473
485
  OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
474
486
  scrollbars: {
475
487
  theme: Default.scrollbarTheme,
package/dist/pages/layout/sidebar-mini.html CHANGED
@@ -4,25 +4,37 @@
4
4
  <head>
5
5
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6
6
  <title>AdminLTE 4 | Sidebar Mini</title>
7
+ <!--begin::Accessibility Meta Tags-->
8
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
9
+ <meta name="color-scheme" content="light dark" />
10
+ <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
11
+ <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
12
+ <!--end::Accessibility Meta Tags-->
7
13
  <!--begin::Primary Meta Tags-->
8
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
9
14
  <meta name="title" content="AdminLTE 4 | Sidebar Mini" />
10
15
  <meta name="author" content="ColorlibHQ" />
11
16
  <meta
12
17
  name="description"
13
- content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS."
18
+ content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS. Fully accessible with WCAG 2.1 AA compliance."
14
19
  />
15
20
  <meta
16
21
  name="keywords"
17
- content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard"
22
+ content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
18
23
  />
19
24
  <!--end::Primary Meta Tags-->
25
+ <!--begin::Accessibility Features-->
26
+ <!-- Skip links will be dynamically added by accessibility.js -->
27
+ <meta name="supported-color-schemes" content="light dark" />
28
+ <link rel="preload" href="../../../dist/css/adminlte.css" as="style" />
29
+ <!--end::Accessibility Features-->
20
30
  <!--begin::Fonts-->
21
31
  <link
22
32
  rel="stylesheet"
23
33
  href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
24
34
  integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
25
35
  crossorigin="anonymous"
36
+ media="print"
37
+ onload="this.media='all'"
26
38
  />
27
39
  <!--end::Fonts-->
28
40
  <!--begin::Third Party Plugin(OverlayScrollbars)-->
@@ -276,8 +288,10 @@
276
288
  <ul
277
289
  class="nav sidebar-menu flex-column"
278
290
  data-lte-toggle="treeview"
279
- role="menu"
291
+ role="navigation"
292
+ aria-label="Main navigation"
280
293
  data-accordion="false"
294
+ id="navigation"
281
295
  >
282
296
  <li class="nav-item">
283
297
  <a href="#" class="nav-link">
@@ -365,6 +379,24 @@
365
379
  <p>Fixed Sidebar</p>
366
380
  </a>
367
381
  </li>
382
+ <li class="nav-item">
383
+ <a href="../layout/fixed-header.html" class="nav-link">
384
+ <i class="nav-icon bi bi-circle"></i>
385
+ <p>Fixed Header</p>
386
+ </a>
387
+ </li>
388
+ <li class="nav-item">
389
+ <a href="../layout/fixed-footer.html" class="nav-link">
390
+ <i class="nav-icon bi bi-circle"></i>
391
+ <p>Fixed Footer</p>
392
+ </a>
393
+ </li>
394
+ <li class="nav-item">
395
+ <a href="../layout/fixed-complete.html" class="nav-link">
396
+ <i class="nav-icon bi bi-circle"></i>
397
+ <p>Fixed Complete</p>
398
+ </a>
399
+ </li>
368
400
  <li class="nav-item">
369
401
  <a href="../layout/layout-custom-area.html" class="nav-link">
370
402
  <i class="nav-icon bi bi-circle"></i>
@@ -772,7 +804,7 @@
772
804
  <!--end::To the end-->
773
805
  <!--begin::Copyright-->
774
806
  <strong>
775
- Copyright &copy; 2014-2024&nbsp;
807
+ Copyright &copy; 2014-2025&nbsp;
776
808
  <a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
777
809
  </strong>
778
810
  All rights reserved.
@@ -812,7 +844,7 @@
812
844
  };
813
845
  document.addEventListener('DOMContentLoaded', function () {
814
846
  const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
815
- if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
847
+ if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
816
848
  OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
817
849
  scrollbars: {
818
850
  theme: Default.scrollbarTheme,
package/dist/pages/layout/unfixed-sidebar.html CHANGED
@@ -4,25 +4,37 @@
4
4
  <head>
5
5
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6
6
  <title>AdminLTE 4 | Unfixed Sidebar</title>
7
+ <!--begin::Accessibility Meta Tags-->
8
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
9
+ <meta name="color-scheme" content="light dark" />
10
+ <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
11
+ <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
12
+ <!--end::Accessibility Meta Tags-->
7
13
  <!--begin::Primary Meta Tags-->
8
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
9
14
  <meta name="title" content="AdminLTE 4 | Unfixed Sidebar" />
10
15
  <meta name="author" content="ColorlibHQ" />
11
16
  <meta
12
17
  name="description"
13
- content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS."
18
+ content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS. Fully accessible with WCAG 2.1 AA compliance."
14
19
  />
15
20
  <meta
16
21
  name="keywords"
17
- content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard"
22
+ content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
18
23
  />
19
24
  <!--end::Primary Meta Tags-->
25
+ <!--begin::Accessibility Features-->
26
+ <!-- Skip links will be dynamically added by accessibility.js -->
27
+ <meta name="supported-color-schemes" content="light dark" />
28
+ <link rel="preload" href="../../../dist/css/adminlte.css" as="style" />
29
+ <!--end::Accessibility Features-->
20
30
  <!--begin::Fonts-->
21
31
  <link
22
32
  rel="stylesheet"
23
33
  href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
24
34
  integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
25
35
  crossorigin="anonymous"
36
+ media="print"
37
+ onload="this.media='all'"
26
38
  />
27
39
  <!--end::Fonts-->
28
40
  <!--begin::Third Party Plugin(OverlayScrollbars)-->
@@ -276,8 +288,10 @@
276
288
  <ul
277
289
  class="nav sidebar-menu flex-column"
278
290
  data-lte-toggle="treeview"
279
- role="menu"
291
+ role="navigation"
292
+ aria-label="Main navigation"
280
293
  data-accordion="false"
294
+ id="navigation"
281
295
  >
282
296
  <li class="nav-item">
283
297
  <a href="#" class="nav-link">
@@ -365,6 +379,24 @@
365
379
  <p>Fixed Sidebar</p>
366
380
  </a>
367
381
  </li>
382
+ <li class="nav-item">
383
+ <a href="../layout/fixed-header.html" class="nav-link">
384
+ <i class="nav-icon bi bi-circle"></i>
385
+ <p>Fixed Header</p>
386
+ </a>
387
+ </li>
388
+ <li class="nav-item">
389
+ <a href="../layout/fixed-footer.html" class="nav-link">
390
+ <i class="nav-icon bi bi-circle"></i>
391
+ <p>Fixed Footer</p>
392
+ </a>
393
+ </li>
394
+ <li class="nav-item">
395
+ <a href="../layout/fixed-complete.html" class="nav-link">
396
+ <i class="nav-icon bi bi-circle"></i>
397
+ <p>Fixed Complete</p>
398
+ </a>
399
+ </li>
368
400
  <li class="nav-item">
369
401
  <a href="../layout/layout-custom-area.html" class="nav-link">
370
402
  <i class="nav-icon bi bi-circle"></i>
@@ -771,7 +803,7 @@
771
803
  <!--end::To the end-->
772
804
  <!--begin::Copyright-->
773
805
  <strong>
774
- Copyright &copy; 2014-2024&nbsp;
806
+ Copyright &copy; 2014-2025&nbsp;
775
807
  <a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
776
808
  </strong>
777
809
  All rights reserved.
@@ -811,7 +843,7 @@
811
843
  };
812
844
  document.addEventListener('DOMContentLoaded', function () {
813
845
  const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
814
- if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
846
+ if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
815
847
  OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
816
848
  scrollbars: {
817
849
  theme: Default.scrollbarTheme,
package/dist/pages/tables/simple.html CHANGED
@@ -4,25 +4,37 @@
4
4
  <head>
5
5
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6
6
  <title>AdminLTE 4 | Simple Tables</title>
7
+ <!--begin::Accessibility Meta Tags-->
8
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
9
+ <meta name="color-scheme" content="light dark" />
10
+ <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
11
+ <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
12
+ <!--end::Accessibility Meta Tags-->
7
13
  <!--begin::Primary Meta Tags-->
8
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
9
14
  <meta name="title" content="AdminLTE 4 | Simple Tables" />
10
15
  <meta name="author" content="ColorlibHQ" />
11
16
  <meta
12
17
  name="description"
13
- content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS."
18
+ content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS. Fully accessible with WCAG 2.1 AA compliance."
14
19
  />
15
20
  <meta
16
21
  name="keywords"
17
- content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard"
22
+ content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
18
23
  />
19
24
  <!--end::Primary Meta Tags-->
25
+ <!--begin::Accessibility Features-->
26
+ <!-- Skip links will be dynamically added by accessibility.js -->
27
+ <meta name="supported-color-schemes" content="light dark" />
28
+ <link rel="preload" href="../../../dist/css/adminlte.css" as="style" />
29
+ <!--end::Accessibility Features-->
20
30
  <!--begin::Fonts-->
21
31
  <link
22
32
  rel="stylesheet"
23
33
  href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
24
34
  integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
25
35
  crossorigin="anonymous"
36
+ media="print"
37
+ onload="this.media='all'"
26
38
  />
27
39
  <!--end::Fonts-->
28
40
  <!--begin::Third Party Plugin(OverlayScrollbars)-->
@@ -276,8 +288,10 @@
276
288
  <ul
277
289
  class="nav sidebar-menu flex-column"
278
290
  data-lte-toggle="treeview"
279
- role="menu"
291
+ role="navigation"
292
+ aria-label="Main navigation"
280
293
  data-accordion="false"
294
+ id="navigation"
281
295
  >
282
296
  <li class="nav-item">
283
297
  <a href="#" class="nav-link">
@@ -365,6 +379,24 @@
365
379
  <p>Fixed Sidebar</p>
366
380
  </a>
367
381
  </li>
382
+ <li class="nav-item">
383
+ <a href="../layout/fixed-header.html" class="nav-link">
384
+ <i class="nav-icon bi bi-circle"></i>
385
+ <p>Fixed Header</p>
386
+ </a>
387
+ </li>
388
+ <li class="nav-item">
389
+ <a href="../layout/fixed-footer.html" class="nav-link">
390
+ <i class="nav-icon bi bi-circle"></i>
391
+ <p>Fixed Footer</p>
392
+ </a>
393
+ </li>
394
+ <li class="nav-item">
395
+ <a href="../layout/fixed-complete.html" class="nav-link">
396
+ <i class="nav-icon bi bi-circle"></i>
397
+ <p>Fixed Complete</p>
398
+ </a>
399
+ </li>
368
400
  <li class="nav-item">
369
401
  <a href="../layout/layout-custom-area.html" class="nav-link">
370
402
  <i class="nav-icon bi bi-circle"></i>
@@ -1022,7 +1054,7 @@
1022
1054
  <!--end::To the end-->
1023
1055
  <!--begin::Copyright-->
1024
1056
  <strong>
1025
- Copyright &copy; 2014-2024&nbsp;
1057
+ Copyright &copy; 2014-2025&nbsp;
1026
1058
  <a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
1027
1059
  </strong>
1028
1060
  All rights reserved.
@@ -1062,7 +1094,7 @@
1062
1094
  };
1063
1095
  document.addEventListener('DOMContentLoaded', function () {
1064
1096
  const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
1065
- if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
1097
+ if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
1066
1098
  OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
1067
1099
  scrollbars: {
1068
1100
  theme: Default.scrollbarTheme,