fix: improved accessibility (#635)

README.md

@@ -87,6 +87,7 @@ Did you decide to start using Unfold but you don't have time to make the switch
   - [Pre-commit](#pre-commit)
   - [Poetry configuration](#poetry-configuration)
   - [Compiling Tailwind](#compiling-tailwind)
+  - [Design system](#design-system)
   - [Using VS Code with containers](#using-vs-code-with-containers)
     - [Development server](#development-server)
     - [Compiling Tailwind in devcontainer](#compiling-tailwind-in-devcontainer)
@@ -1381,6 +1382,17 @@ Some components like datepickers, calendars or selectors in admin was not possib
 
 **Note:** most of the custom styles located in style.css are created via `@apply some-tailwind-class;` as is not possible to manually add CSS class to element which are for example created via jQuery.
 
+
+### Design system
+
+| Component                         | Classes                                                |
+| --------------------------------- | ------------------------------------------------------ |
+| Regular text                      | text-gray-600 dark:text-gray-300                       |
+| Hover regular text                | text-gray-700 dark:text-gray-200                       |
+| Headings                          | font-semibold text-gray-900 dark:text-gray-100         |
+| Icon                              | text-gray-400 dark:text-gray-500                       |
+| Hover icon                        | hover:text-gray-500 dark:hover:text-gray-400           |
+
 ### Using VS Code with containers
 
 Unfold already contains prepared support for VS Code development. After cloning the project locally, open the main folder in VS Code (in terminal `code .`). Immediately, you would see a message from VS Code **Folder contains a Dev Container configuration file. Reopen folder to develop in a container** which will inform you that the support for containers is prepared. Confirm the message by clicking on **Reopen in Container**. If the message is not there, you can still manually open the project in a container by running the command **Dev Containers: Reopen in Container**.

src/unfold/admin.py

@@ -119,7 +119,9 @@
     }
 )
 
-checkbox = UnfoldBooleanWidget({"class": "action-select"}, lambda value: False)
+checkbox = UnfoldBooleanWidget(
+    {"class": "action-select", "aria-label": _("Select record")}, lambda value: False
+)
 
 helpers.AdminField = UnfoldAdminField
 

src/unfold/contrib/filters/templates/unfold/filters/filters_date_range.html

@@ -2,7 +2,7 @@
 
 {% with choices.0 as choice %}
     <div class="flex flex-col mb-6">
-        <h3 class="font-medium mb-2 text-gray-700 text-sm dark:text-gray-200">{% blocktrans with filter_title=title %}By {{ filter_title }}{% endblocktrans %}</h3>
+        <h3 class="font-semibold mb-2 text-gray-900 dark:text-gray-100">{% blocktrans with filter_title=title %}By {{ filter_title }}{% endblocktrans %}</h3>
 
         <div class="flex flex-col space-y-4">
             {% for field in choice.form %}

src/unfold/contrib/filters/templates/unfold/filters/filters_datetime_range.html

@@ -2,7 +2,7 @@
 
 {% with choices.0 as choice %}
     <div class="flex flex-col mb-6">
-        <h3 class="font-medium mb-2 text-gray-700 text-sm dark:text-gray-200">{% blocktrans with filter_title=title %}By {{ filter_title }}{% endblocktrans %}</h3>
+        <h3 class="font-semibold mb-2 text-gray-900 dark:text-gray-100">{% blocktrans with filter_title=title %}By {{ filter_title }}{% endblocktrans %}</h3>
 
         <div class="flex flex-col space-y-4">
             {% for field in choice.form %}

src/unfold/contrib/filters/templates/unfold/filters/filters_numeric_range.html

@@ -2,7 +2,7 @@
 
 {% with choices.0 as choice %}
     <div class="flex flex-col mb-6">
-        <h3 class="font-medium mb-2 text-gray-700 text-sm dark:text-gray-200">{% blocktrans with filter_title=title %}By {{ filter_title }}{% endblocktrans %}</h3>
+        <h3 class="font-semibold mb-2 text-gray-900 dark:text-gray-100">{% blocktrans with filter_title=title %}By {{ filter_title }}{% endblocktrans %}</h3>
 
         <div class="flex flex-row gap-4">
             {% for field in choice.form %}

src/unfold/contrib/filters/templates/unfold/filters/filters_numeric_single.html

@@ -2,7 +2,7 @@
 
 {% with choices.0 as choice %}
     <div class="flex flex-col mb-6">
-        <h3 class="font-medium mb-2 text-gray-700 text-sm dark:text-gray-200">{% blocktrans with filter_title=title %}By {{ filter_title }}{% endblocktrans %}</h3>
+        <h3 class="font-semibold mb-2 text-gray-900 dark:text-gray-100">{% blocktrans with filter_title=title %}By {{ filter_title }}{% endblocktrans %}</h3>
 
         {% for field in choice.form %}
             <div class="flex flex-row flex-wrap group relative{% if field.errors %} errors{% endif %}">

src/unfold/contrib/filters/templates/unfold/filters/filters_numeric_slider.html

@@ -3,7 +3,7 @@
 
 {% with choices.0 as choice %}
     <div class="admin-numeric-filter-wrapper mb-6">
-        <h3 class="font-medium mb-2 text-gray-700 text-sm dark:text-gray-200">
+        <h3 class="font-semibold mb-2 text-gray-900 dark:text-gray-100">
             {% blocktrans with filter_title=title %}By {{ filter_title }}{% endblocktrans %}
         </h3>
 

src/unfold/contrib/guardian/templates/unfold/guardian/group_form.html

@@ -3,25 +3,25 @@
 <form method="post">
     {% csrf_token %}
 
-    <h2 class="font-medium mb-3 text-sm text-gray-700 dark:text-gray-200">
+    <h2 class="font-semibold mb-3  text-gray-900 dark:text-gray-100">
         {% trans "Group permissions" %}
     </h2>
 
     {% if groups_perms.items %}
-        <table id="group-permissions" class="border-gray-200 border-spacing-none border-separate mb-6 text-gray-700 w-full dark:text-gray-300 lg:border lg:rounded-md lg:shadow-sm lg:dark:border-gray-800">
-            <thead class="hidden lg:table-header-group">
+        <table id="group-permissions" class="border-gray-200 border-spacing-none border-separate mb-6 w-full lg:border lg:rounded-md lg:shadow-sm lg:dark:border-gray-800">
+            <thead class="hidden lg:table-header-group text-gray-900 dark:text-gray-100">
                 <tr>
-                    <th class="align-middle font-medium px-3 py-2 text-left text-gray-400 text-sm">
+                    <th class="align-middle font-medium px-3 py-2 text-left">
                         {% trans "Group" %}
                     </th>
 
                     {% for perm in model_perms %}
-                        <th class="align-middle font-medium px-3 py-2 text-left text-gray-400 text-sm">
+                        <th class="align-middle font-medium px-3 py-2 text-left">
                             {{ perm.name }}
                         </th>
                     {% endfor %}
 
-                    <th class="align-middle font-medium px-3 py-2 text-right text-gray-400 text-sm">
+                    <th class="align-middle font-medium px-3 py-2 text-right">
                         {% trans "Action" %}
                     </th>
                 </tr>
@@ -30,14 +30,14 @@ <h2 class="font-medium mb-3 text-sm text-gray-700 dark:text-gray-200">
             <tbody>
                 {% for group, group_perms in groups_perms.items %}
                     <tr class="block border mb-3 rounded-md shadow-sm lg:table-row lg:border-none lg:mb-0 lg:shadow-none dark:border-gray-800">
-                        <th class="align-middle flex border-t border-gray-200 font-normal px-3 py-2 text-left text-sm before:flex before:capitalize before:content-[attr(data-label)] before:items-center before:mr-auto before:text-gray-500 first:border-t-0 dark:before:text-gray-300 lg:before:hidden lg:first:border-t lg:py-3 lg:table-cell dark:border-gray-800" data-label="{% trans "User" %}">
-                            <span class="text-gray-700 dark:text-gray-200">
+                        <th class="align-middle flex border-t border-gray-200 font-normal px-3 py-2 text-left  before:flex before:capitalize before:content-[attr(data-label)] before:items-center before:mr-auto first:border-t-0  lg:before:hidden lg:first:border-t lg:py-3 lg:table-cell dark:border-gray-800" data-label="{% trans "User" %}">
+                            <span>
                                 {{ group }}
                             </span>
                         </th>
 
                         {% for perm in model_perms %}
-                            <td class="align-middle flex border-t border-gray-200 font-normal px-3 py-2 text-left text-sm before:flex before:capitalize before:content-[attr(data-label)] before:items-center before:mr-auto before:text-gray-500 first:border-t-0 dark:before:text-gray-300 lg:before:hidden lg:first:border-t lg:py-3 lg:table-cell dark:border-gray-800" data-label="{{ perm.name }}">
+                            <td class="align-middle flex border-t border-gray-200 font-normal px-3 py-2 text-left  before:flex before:capitalize before:content-[attr(data-label)] before:items-center before:mr-auto first:border-t-0  lg:before:hidden lg:first:border-t lg:py-3 lg:table-cell dark:border-gray-800" data-label="{{ perm.name }}">
                                 {% if perm.codename in group_perms %}
                                     {% include "unfold/helpers/boolean.html" with value=False %}
                                 {% else %}
@@ -46,7 +46,7 @@ <h2 class="font-medium mb-3 text-sm text-gray-700 dark:text-gray-200">
                             </td>
                         {% endfor %}
 
-                        <td class="align-middle flex border-t border-gray-200 font-normal px-3 py-2 text-right text-sm before:flex before:capitalize before:content-[attr(data-label)] before:items-center before:mr-auto before:text-gray-500 first:border-t-0 dark:before:text-gray-300 lg:before:hidden lg:first:border-t lg:py-3 lg:table-cell dark:border-gray-800" data-label="{% trans "Action" %}">
+                        <td class="align-middle flex border-t border-gray-200 font-normal px-3 py-2 text-right  before:flex before:capitalize before:content-[attr(data-label)] before:items-center before:mr-auto first:border-t-0  lg:before:hidden lg:first:border-t lg:py-3 lg:table-cell dark:border-gray-800" data-label="{% trans "Action" %}">
                             <a href="group-manage/{{ group.id|safe }}/" class="hover:text-gray-700 dark:hover:text-white">
                                 {% trans "Edit" %}
                             </a>

src/unfold/contrib/guardian/templates/unfold/guardian/user_form.html

@@ -3,25 +3,25 @@
 <form method="post">
     {% csrf_token %}
 
-    <h2 class="font-medium mb-3 text-sm text-gray-700 dark:text-gray-200">
+    <h2 class="font-medium mb-3  text-gray-700 dark:text-gray-200">
         {% trans "User permissions" %}
     </h2>
 
     {% if users_perms.items %}
-        <table id="user-permissions" class="border-gray-200 border-spacing-none border-separate mb-6 text-gray-700 w-full dark:text-gray-300 lg:border lg:rounded-md lg:shadow-sm lg:dark:border-gray-800">
-            <thead class="hidden lg:table-header-group">
+        <table id="user-permissions" class="border-gray-200 border-spacing-none border-separate mb-6 w-full lg:border lg:rounded-md lg:shadow-sm lg:dark:border-gray-800">
+            <thead class="hidden lg:table-header-group text-gray-900 dark:text-gray-100">
                 <tr>
-                    <th class="align-middle font-medium px-3 py-2 text-left text-gray-400 text-sm">
+                    <th class="align-middle font-medium px-3 py-2 text-left">
                         {% trans "User" %}
                     </th>
 
                     {% for perm in model_perms %}
-                        <th class="align-middle font-medium px-3 py-2 text-left text-gray-400 text-sm">
+                        <th class="align-middle font-medium px-3 py-2 text-left">
                             {{ perm.name }}
                         </th>
                     {% endfor %}
 
-                    <th class="align-middle font-medium px-3 py-2 text-right text-gray-400 text-sm">
+                    <th class="align-middle font-medium px-3 py-2 text-right">
                         {% trans "Action" %}
                     </th>
                 </tr>
@@ -30,14 +30,14 @@ <h2 class="font-medium mb-3 text-sm text-gray-700 dark:text-gray-200">
             <tbody>
                 {% for user, user_perms in users_perms.items %}
                     <tr class="block border mb-3 rounded-md shadow-sm lg:table-row lg:border-none lg:mb-0 lg:shadow-none dark:border-gray-800">
-                        <th class="align-middle flex border-t border-gray-200 font-normal px-3 py-2 text-left text-sm before:flex before:capitalize before:content-[attr(data-label)] before:items-center before:mr-auto before:text-gray-500 first:border-t-0 dark:before:text-gray-300 lg:before:hidden lg:first:border-t lg:py-3 lg:table-cell dark:border-gray-800" data-label="{% trans "User" %}">
-                            <span class="text-gray-700 dark:text-gray-200">
+                        <th class="align-middle flex border-t border-gray-200 font-normal px-3 py-2 text-left  before:flex before:capitalize before:content-[attr(data-label)] before:items-center before:mr-auto  first:border-t-0  lg:before:hidden lg:first:border-t lg:py-3 lg:table-cell dark:border-gray-800" data-label="{% trans "User" %}">
+                            <span>
                                 {{ user }}
                             </span>
                         </th>
 
                         {% for perm in model_perms %}
-                            <td class="align-middle flex border-t border-gray-200 font-normal px-3 py-2 text-left text-sm before:flex before:capitalize before:content-[attr(data-label)] before:items-center before:mr-auto before:text-gray-500 first:border-t-0 dark:before:text-gray-300 lg:before:hidden lg:first:border-t lg:py-3 lg:table-cell dark:border-gray-800" data-label="{{ perm.name }}">
+                            <td class="align-middle flex border-t border-gray-200 font-normal px-3 py-2 text-left  before:flex before:capitalize before:content-[attr(data-label)] before:items-center before:mr-auto  first:border-t-0  lg:before:hidden lg:first:border-t lg:py-3 lg:table-cell dark:border-gray-800" data-label="{{ perm.name }}">
                                 {% if perm.codename in group_perms %}
                                     {% include "unfold/helpers/boolean.html" with value=False %}
                                 {% else %}
@@ -46,7 +46,7 @@ <h2 class="font-medium mb-3 text-sm text-gray-700 dark:text-gray-200">
                             </td>
                         {% endfor %}
 
-                        <td class="align-middle flex border-t border-gray-200 font-normal px-3 py-2 text-right text-sm before:flex before:capitalize before:content-[attr(data-label)] before:items-center before:mr-auto before:text-gray-500 first:border-t-0 dark:before:text-gray-300 lg:before:hidden lg:first:border-t lg:py-3 lg:table-cell dark:border-gray-800" data-label="{% trans "Action" %}">
+                        <td class="align-middle flex border-t border-gray-200 font-normal px-3 py-2 text-right  before:flex before:capitalize before:content-[attr(data-label)] before:items-center before:mr-auto  first:border-t-0  lg:before:hidden lg:first:border-t lg:py-3 lg:table-cell dark:border-gray-800" data-label="{% trans "Action" %}">
                             <a href="user-manage/{{ user.id|safe }}/" class="hover:text-gray-700 dark:hover:text-white">
                                 {% trans "Edit" %}
                             </a>

src/unfold/contrib/import_export/templates/admin/import_export/import_confirm.html

@@ -6,7 +6,7 @@
 
         {{ confirm_form.as_p }}
 
-        <p class="font-medium p-4 text-sm text-gray-700 dark:text-gray-200">
+        <p class="font-semibold p-4 text-sm text-gray-900 dark:text-gray-100">
             {% trans "Below is a preview of data to be imported. If you are satisfied with the results, click 'Confirm import'" %}
         </p>
 

src/unfold/contrib/import_export/templates/admin/import_export/import_errors.html

@@ -14,8 +14,8 @@
         {% for line, errors in result.row_errors %}
             {% for error in errors %}
                 <li x-data="{ open: false }">
-                    <div class="bg-red-50 border border-red-200 cursor-pointer mb-4 rounded shadow-sm text-red-500 text-sm dark:bg-red-500/20 dark:border-red-500/20" x-on:click="open = ! open">
-                        <div class="border-b border-red-200 flex flex-row font-medium py-3 px-4 dark:border-red-500/20">
+                    <div class="bg-red-50 border border-red-200 cursor-pointer mb-4 rounded shadow-sm text-red-500 dark:bg-red-500/20 dark:border-red-500/20" x-on:click="open = ! open">
+                        <div class="border-b border-red-200 flex flex-row font-semibold py-3 px-4 dark:border-red-500/20">
                             {% trans "Line number" %}: {{ line }} - {{ error.error }}
                         </div>
 
@@ -26,7 +26,7 @@
                         </div>
                     </div>
 
-                    <div class="block border leading-relaxed rounded p-4 text-sm traceback dark:border-gray-800 dark:text-gray-300 " x-show="open">
+                    <div class="block border leading-relaxed mb-4 rounded p-4 traceback dark:border-gray-800 dark:text-gray-300 " x-show="open">
                         {{ error.traceback|linebreaks }}
                     </div>
                 </li>

src/unfold/contrib/import_export/templates/admin/import_export/import_preview.html

@@ -1,13 +1,13 @@
 {% load admin_urls i18n import_export_tags unfold %}
 
 {% block preview %}
-    <table class="border-gray-200 border-spacing-none border-separate text-gray-700 w-full dark:text-gray-300 lg:border lg:rounded-md lg:shadow-sm lg:dark:border-gray-800">
-        <thead class="hidden lg:table-header-group">
+    <table class="border-gray-200 border-spacing-none border-separate w-full lg:border lg:rounded-md lg:shadow-sm lg:dark:border-gray-800">
+        <thead class="hidden lg:table-header-group text-gray-900 dark:text-gray-100">
             <tr>
-                <th class="align-middle capitalize font-medium px-3 py-2 text-left text-gray-400 text-sm"></th>
+                <th class="align-middle capitalize font-semibold px-3 py-2 text-left"></th>
 
                 {% for field in result.diff_headers %}
-                    <th class="align-middle capitalize font-medium px-3 py-2 text-left text-gray-400 text-sm">
+                    <th class="align-middle capitalize font-semibold px-3 py-2 text-left">
                         {{ field }}
                     </th>
                 {% endfor %}
@@ -17,7 +17,7 @@
         <tbody>
             {% for row in result.valid_rows %}
                 <tr class="{{ row.import_type }} {% cycle '' 'bg-gray-50 dark:bg-white/[.02]' %} block border mb-3 rounded-md shadow-sm lg:table-row lg:border-none lg:mb-0 lg:shadow-none dark:border-gray-800">
-                    <td class="align-middle flex border-t border-gray-200 font-normal px-3 py-2 text-left text-sm before:block before:capitalize before:content-[attr(data-label)] before:mr-auto before:text-gray-500 dark:before:text-gray-300 lg:before:hidden lg:py-3 lg:table-cell dark:border-gray-800">
+                    <td class="align-middle flex border-t border-gray-200 font-normal px-3 py-2 text-left before:block before:capitalize before:content-[attr(data-label)] before:mr-auto lg:before:hidden lg:py-3 lg:table-cell dark:border-gray-800">
                         {% if row.import_type == 'new' %}
                             {% trans "New" %}
                         {% elif row.import_type == 'skip' %}
@@ -30,7 +30,7 @@
                     </td>
 
                     {% for field in row.diff %}
-                        <td data-label="{{ result.diff_headers|index:forloop.counter0 }}" class="align-middle flex border-t border-gray-200 font-normal px-3 py-2 text-left text-sm before:block before:capitalize before:content-[attr(data-label)] before:mr-auto before:text-gray-500 dark:before:text-gray-300 lg:before:hidden lg:py-3 lg:table-cell dark:border-gray-800">
+                        <td data-label="{{ result.diff_headers|index:forloop.counter0 }}" class="align-middle flex border-t border-gray-200 font-normal px-3 py-2 text-left before:block before:capitalize before:content-[attr(data-label)] before:mr-auto lg:before:hidden lg:py-3 lg:table-cell dark:border-gray-800">
                             {{ field }}
                         </td>
                     {% endfor %}