Enhance dropdown components for better accessibility (#2370)

.changeset/quiet-plants-begin.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Enhance dropdown components for better accessibility

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 %}

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">

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">

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">

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>

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">

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 -%}

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">

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>
 

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>

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">