feat: add accessibility check

PrestaShop · Nov 4, 2024 · cd78c7d · cd78c7d
1 parent 300248d
commit cd78c7d
Show file tree

Hide file tree

Showing 9 changed files with 136 additions and 6 deletions.
diff --git a/_dev/src/scss/components/_logs.scss b/_dev/src/scss/components/_logs.scss
@@ -31,7 +31,7 @@ $e: ".logs";
     &__scroll {
       flex-grow: 1;
       min-height: var(--#{$ua-prefix}logs-height);
-      overflow-y: scroll;
+      overflow-y: auto;
       scroll-behavior: smooth;
     }
 

diff --git a/storybook/.storybook/main.ts b/storybook/.storybook/main.ts
@@ -34,7 +34,8 @@ const config: StorybookConfig = {
     "@storybook/addon-webpack5-compiler-swc",
     "@storybook/addon-links",
     "@storybook/addon-essentials",
-    "@storybook/addon-styling-webpack"
+    "@storybook/addon-styling-webpack",
+    "@storybook/addon-a11y"
   ],
   framework: {
     name: "@sensiolabs/storybook-symfony-webpack5",

diff --git a/storybook/package-lock.json b/storybook/package-lock.json
diff --git a/storybook/package.json b/storybook/package.json
@@ -1,6 +1,7 @@
 {
     "devDependencies": {
         "@sensiolabs/storybook-symfony-webpack5": "file:vendor/sensiolabs/storybook-bundle/storybook",
+        "@storybook/addon-a11y": "^8.4.1",
         "@storybook/addon-essentials": "^8.0.0",
         "@storybook/addon-links": "^8.0.0",
         "@storybook/addon-styling-webpack": "^1.0.0",

diff --git a/storybook/stories/components/RadioCardLocal.stories.js b/storybook/stories/components/RadioCardLocal.stories.js
@@ -45,8 +45,8 @@ export const Local = {
     },
     form_fields: {
       channel: "local",
-      archive_zip: "local",
-      archive_xml: "local",
+      archive_zip: "local_zip",
+      archive_xml: "local_xml",
     },
     current_values: {
       channel: "local",

diff --git a/views/templates/components/logs-progress.html.twig b/views/templates/components/logs-progress.html.twig
@@ -12,6 +12,8 @@
   <div class="progress log-progress__bar">
     <div class="progress-bar"
       role="progressbar"
+      aria-label="{{ "Progress is %s%"|trans({'%s': progressPercentage}) }}"
+      title="{{ "Progress is %s%"|trans({'%s': progressPercentage}) }}"
       aria-valuenow="60"
       aria-valuemin="0"
       aria-valuemax="100"

diff --git a/views/templates/components/logs.html.twig b/views/templates/components/logs.html.twig
@@ -1,7 +1,7 @@
 {% if logs %}
   <div class="logs">
     <div class="logs__inner">
-      <div class="logs__scroll">
+      <div class="logs__scroll" tabindex="0">
         <div class="logs__list">
           {% for log in logs %}
             <div class="logs__line logs__line--{{ log.status }}"

diff --git a/views/templates/components/modal.html.twig b/views/templates/components/modal.html.twig
@@ -1,5 +1,6 @@
 <div class="modal fade {% if modalDanger %}modal--danger{% endif %}"
   {% if modalId %}id="{{ modalId }}"{% endif %}
+  aria-label="{{ title }}"
   role="dialog"
   tabindex="-1">
   <div class="modal-dialog {% if modalSize and modalSize != "md" %}modal-{{ modalSize }}{% endif %}"

diff --git a/views/templates/components/render-select.html.twig b/views/templates/components/render-select.html.twig
@@ -2,7 +2,7 @@
 
 {% block action_content %}
   <div class="render-field__select">
-    <select name="{{ name }}" id="{{ id }}">
+    <select name="{{ name }}" id="{{ id }}" aria-label="{{ name }}">
       {% for choice_value, choice_key in choices %}
         <option value="{{ choice_value|default(0) }}" {{ choice_value == value ? 'selected' : '' }}>
           {{ choice_key }}