WCAG improvements (#268)

Related to Sylius/Sylius#18026

Author: loic425

src/BootstrapAdminUi/assets/styles/_body.scss

@@ -10,6 +10,9 @@
 * {
     --tblr-breadcrumb-item-active-color: var(--tblr-gray-500);
     --tblr-breadcrumb-divider-color: var(--tblr-gray-300);
+    --tblr-code-color: #36393B;
+    --tblr-blue-rgb: 17, 81, 141;
+    --tblr-green-rgb: 0, 97, 16;
 }
 
 [data-bs-theme=dark] {

src/BootstrapAdminUi/assets/styles/_buttons.scss

@@ -0,0 +1,4 @@
+.btn:not(.btn-sm) {
+    min-height: 44px;
+    min-width: 44px;
+}

src/BootstrapAdminUi/assets/styles/_form.scss

@@ -55,6 +55,10 @@ textarea.form-control {
     }
 }
 
+.form-control, .form-select {
+    min-height: 44px;
+}
+
 .form-control:focus {
     box-shadow: none;
 }

src/BootstrapAdminUi/assets/styles/_navbar.scss

@@ -11,18 +11,33 @@
     &.navbar-nav {
         gap: 0.5rem;
     }
+}
 
-    &.navbar-brand-image {
-        height: 4rem;
-    }
+.navbar input {
+    min-height: 44px;
+}
+
+.navbar-brand-image {
+    height: 3rem;
 }
 
 .navbar-collapse a.nav-link,
 .navbar-collapse a.dropdown-item {
     transition: all .1s;
+    min-height: 44px;
 
     &:hover {
         color: var(--tblr-primary) !important;
         background: transparent;
     }
 }
+.nav-button {
+    min-height: 44px;
+    min-width: 44px;
+}
+.navbar-collapse .nav-link:focus-visible {
+    outline: solid 2px rgb(153, 200, 255);
+}
+.navbar-plus-badge{
+    width: 50px;
+}

src/BootstrapAdminUi/assets/styles/main.scss

@@ -12,6 +12,7 @@
 @import "@tabler/core/src/scss/tabler.scss";
 
 @import "body";
+@import "buttons";
 @import "accordion";
 @import "alert";
 @import "datatable";

src/BootstrapAdminUi/public/app.css

@@ -2,6 +2,7 @@
 
 <div class="col-12 col-md-auto ms-auto d-print-none">
     <div class="btn-list">
+        {% hook 'actions' %}
         {% if resources.definition.actionGroups.main is defined %}
             {% for action in resources.definition.getEnabledActions('main')|sylius_sort_by('position') %}
                 {{ sylius_grid_render_action(resources, action, null) }}

src/BootstrapAdminUi/public/app.rtl.css

@@ -20,14 +20,16 @@
                                 <div class="col-auto">
                                     {% set firstSpeaker = talk.speakers.first %}
 
-                                    {% if firstSpeaker.avatar %}
-                                        {% set avatar_path = vich_uploader_asset(firstSpeaker.avatar) %}
+                                    {% if firstSpeaker %}
+                                        {% if firstSpeaker.avatar %}
+                                            {% set avatar_path = vich_uploader_asset(firstSpeaker.avatar) %}
 
-                                        {{ avatar.default(avatar_path, 'img-thumbnail') }}
-                                    {% else %}
-                                        <span class="avatar">
-                                            {{ firstSpeaker.firstName|first }}{{ firstSpeaker.lastName|first }}
-                                        </span>
+                                            {{ avatar.default(avatar_path, 'img-thumbnail') }}
+                                        {% else %}
+                                            <span class="avatar">
+                                                {{ firstSpeaker.firstName|first }}{{ firstSpeaker.lastName|first }}
+                                            </span>
+                                        {% endif %}
                                     {% endif %}
                                 </div>
                                 <div class="col text-truncate">