From b5e2f54bf8ea0d183f8bd5d273c63fe75f37caa4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kuna?=
 <1282324+codecalm@users.noreply.github.com>
Date: Thu, 15 May 2025 23:49:10 +0200
Subject: [PATCH] Enhance dropdown components for better accessibility (#2370)

---
 .changeset/quiet-plants-begin.md               | 5 +++++
 preview/pages/charts.html                      | 2 +-
 shared/includes/cards/charts/active-users.html | 2 +-
 shared/includes/cards/charts/new-clients.html  | 2 +-
 shared/includes/cards/charts/revenue.html      | 2 +-
 shared/includes/cards/charts/sales.html        | 2 +-
 shared/includes/cards/icons-banner.html        | 4 ++--
 shared/includes/layout/navbar-logo.html        | 6 +++---
 shared/includes/layout/page-header.html        | 2 +-
 shared/includes/parts/charts/activity.html     | 2 +-
 shared/includes/parts/dropdown/days.html       | 6 +++---
 shared/includes/settings.html                  | 4 +++-
 12 files changed, 23 insertions(+), 16 deletions(-)
 create mode 100644 .changeset/quiet-plants-begin.md

diff --git a/.changeset/quiet-plants-begin.md b/.changeset/quiet-plants-begin.md
new file mode 100644
index 000000000..9b9a8e7c1
--- /dev/null
+++ b/.changeset/quiet-plants-begin.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Enhance dropdown components for better accessibility
diff --git a/preview/pages/charts.html b/preview/pages/charts.html
index f30c3e28c..f2362399d 100644
--- a/preview/pages/charts.html
+++ b/preview/pages/charts.html
@@ -18,7 +18,7 @@ permalink: charts.html
 				<div class="d-flex">
 					<h3 class="card-title">Social referrals</h3>
 					<div class="ms-auto">
-						{% include "parts/dropdown/days.html" %}
+						{% include "parts/dropdown/days.html" id="social-referrals" label="Select time range for sales data" %}
 					</div>
 				</div>
 				{% include "ui/chart.html" chart-id="social-referrals" legend=true %}
diff --git a/shared/includes/cards/charts/active-users.html b/shared/includes/cards/charts/active-users.html
index f13dcad09..7c01d5f8b 100644
--- a/shared/includes/cards/charts/active-users.html
+++ b/shared/includes/cards/charts/active-users.html
@@ -3,7 +3,7 @@
 		<div class="d-flex align-items-center">
 			<div class="subheader">Active subscriptions</div>
 			<div class="ms-auto lh-1">
-				{% include "parts/dropdown/days.html" %}
+				{% include "parts/dropdown/days.html" id="active-users" label="Select time range for active users" %}
 			</div>
 		</div>
 		<div class="d-flex align-items-baseline">
diff --git a/shared/includes/cards/charts/new-clients.html b/shared/includes/cards/charts/new-clients.html
index 439831f3d..473187243 100644
--- a/shared/includes/cards/charts/new-clients.html
+++ b/shared/includes/cards/charts/new-clients.html
@@ -3,7 +3,7 @@
 		<div class="d-flex align-items-center">
 			<div class="subheader">New clients</div>
 			<div class="ms-auto lh-1">
-				{% include "parts/dropdown/days.html" %}
+				{% include "parts/dropdown/days.html" id="new-clients" label="Select time range for new clients" %}
 			</div>
 		</div>
 		<div class="d-flex align-items-baseline">
diff --git a/shared/includes/cards/charts/revenue.html b/shared/includes/cards/charts/revenue.html
index 9d9711b92..f346de845 100644
--- a/shared/includes/cards/charts/revenue.html
+++ b/shared/includes/cards/charts/revenue.html
@@ -3,7 +3,7 @@
 		<div class="d-flex align-items-center">
 			<div class="subheader">Revenue</div>
 			<div class="ms-auto lh-1">
-				{% include "parts/dropdown/days.html" %}
+				{% include "parts/dropdown/days.html" id="revenue" label="Select time range for revenue" %}
 			</div>
 		</div>
 		<div class="d-flex align-items-baseline">
diff --git a/shared/includes/cards/charts/sales.html b/shared/includes/cards/charts/sales.html
index 94b5bb522..eca86e049 100644
--- a/shared/includes/cards/charts/sales.html
+++ b/shared/includes/cards/charts/sales.html
@@ -3,7 +3,7 @@
 		<div class="d-flex align-items-center">
 			<div class="subheader">Sales</div>
 			<div class="ms-auto lh-1">
-				{% include "parts/dropdown/days.html" %}
+				{% include "parts/dropdown/days.html" id="sales" label="Select time range for sales data" %}
 			</div>
 		</div>
 		<div class="h1 mb-3">75%</div>
diff --git a/shared/includes/cards/icons-banner.html b/shared/includes/cards/icons-banner.html
index 072e3960b..61065794e 100644
--- a/shared/includes/cards/icons-banner.html
+++ b/shared/includes/cards/icons-banner.html
@@ -10,9 +10,9 @@
 		<div class="row align-items-center">
 			<div class="col-10">
 				<h3 class="h1">Tabler Icons</h3>
-				<div class="markdown text-secondary">
+				<div class="markdown">
 					All icons come from the Tabler Icons set and are MIT-licensed. Visit
-					<a href="{{ site.icons.link }}" target="_blank" rel="noopener">tabler.io/icons</a>,
+					<a href="{{ site.icons.link }}" target="_blank" rel="noopener">Tabler Icons Website</a>,
 					download any of the {{ icons-count }} icons in SVG, PNG or&nbsp;React and use them in your favourite design tools.
 				</div>
 				<div class="mt-3">
diff --git a/shared/includes/layout/navbar-logo.html b/shared/includes/layout/navbar-logo.html
index 4768b9c7d..a62746f37 100644
--- a/shared/includes/layout/navbar-logo.html
+++ b/shared/includes/layout/navbar-logo.html
@@ -1,12 +1,12 @@
 <!-- BEGIN NAVBAR LOGO -->
 {%- assign prefix = include.prefix | default: 'navbar' -%}
 {%- assign breakpoint = include.breakpoint | default: 'lg' -%}
-{%- capture class-attr %}class="{{ prefix }}-brand {{ prefix }}-brand-autodark{% if include.class %} {{ include.class }}{% endif %}"{%- endcapture -%}
+{%- capture class-attr %} class="{{ prefix }}-brand {{ prefix }}-brand-autodark{% if include.class %} {{ include.class }}{% endif %}"{%- endcapture -%}
 {%- if include.header -%}
 <div {{ class-attr }}>
-	<a href="{{ page | relative }}{% if include.href %}/{{ include.href }}{% endif %}">
+	<a href="{{ page | relative }}{% if include.href %}/{{ include.href }}{% endif %}" aria-label="{{ site.title }}">
 {%- else -%}
-	<a href="{{ page | relative }}{% if include.href %}/{{ include.href }}{% endif %}" {{ class-attr }}>
+	<a href="{{ page | relative }}{% if include.href %}/{{ include.href }}{% endif %}" aria-label="{{ site.title }}"{{ class-attr }}>
 {%- endif -%}
 	{%- unless include.hide-logo -%}
 	{%- if include.small-logo -%}
diff --git a/shared/includes/layout/page-header.html b/shared/includes/layout/page-header.html
index 3e538efa5..9abd762bd 100644
--- a/shared/includes/layout/page-header.html
+++ b/shared/includes/layout/page-header.html
@@ -9,7 +9,7 @@
 {% if page-header-file %}
 	{% include "layout/headers/{{ page-header-file }}.html" %}
 {% elsif page-header %}
-<div class="page-header{% if class %} {{ class }}{% endif %} d-print-none{% if layout-navbar-overlap and layout-navbar-dark %} text-white{% endif %}">
+<div class="page-header{% if class %} {{ class }}{% endif %} d-print-none{% if layout-navbar-overlap and layout-navbar-dark %} text-white{% endif %}" aria-label="Page header">
 	<div class="container-xl">
 		<div class="row g-2 align-items-center">
 			<div class="col">
diff --git a/shared/includes/parts/charts/activity.html b/shared/includes/parts/charts/activity.html
index 6f0e2955a..d25e972f0 100644
--- a/shared/includes/parts/charts/activity.html
+++ b/shared/includes/parts/charts/activity.html
@@ -3,7 +3,7 @@
 		<div class="d-flex">
 			<h3 class="card-title">Active users</h3>
 			<div class="ms-auto">
-				{% include "parts/dropdown/days.html" %}
+				{% include "parts/dropdown/days.html" id="active-users" label="Select time range for active users" %}
 			</div>
 		</div>
 
diff --git a/shared/includes/parts/dropdown/days.html b/shared/includes/parts/dropdown/days.html
index 1abbcf519..343c28a6f 100644
--- a/shared/includes/parts/dropdown/days.html
+++ b/shared/includes/parts/dropdown/days.html
@@ -1,7 +1,7 @@
 <div class="dropdown">
-   <a class="dropdown-toggle text-secondary" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ include.value | default: 'Last 7 days' }}</a>
-   <div class="dropdown-menu dropdown-menu-end">
-      <a class="dropdown-item active" href="#">Last 7 days</a>
+   <a class="dropdown-toggle text-secondary"{% if include.id %} id="{{ include.id }}-dropdown"{% endif %} href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="{{ include.label | default: 'Select time range' }}">{{ include.value | default: 'Last 7 days' }}</a>
+   <div class="dropdown-menu dropdown-menu-end"{% if include.id %} aria-labelledby="{{ include.id }}-dropdown"{% endif %}>
+      <a class="dropdown-item active" href="#" aria-current="true">Last 7 days</a>
       <a class="dropdown-item" href="#">Last 30 days</a>
       <a class="dropdown-item" href="#">Last 3 months</a>
    </div>
diff --git a/shared/includes/settings.html b/shared/includes/settings.html
index d73fc0ba0..c6bf14499 100644
--- a/shared/includes/settings.html
+++ b/shared/includes/settings.html
@@ -1,5 +1,7 @@
 <div class="settings">
-	<a href="#" class="btn btn-floating btn-icon btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasSettings"> {% include "ui/icon.html" icon="brush" %} </a>
+	<a href="#" class="btn btn-floating btn-icon btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasSettings" aria-controls="offcanvasSettings" aria-label="Theme Builder">
+		{% include "ui/icon.html" icon="brush" %}
+	</a>
 
 	<form class="offcanvas offcanvas-start offcanvas-narrow" tabindex="-1" id="offcanvasSettings">
 		<div class="offcanvas-header">