Issue #3273099 by rkoller, jaydeep_patel, tinto, smustgrave: Fix several accessibility related issues on the edit Image style page

Author: nod_

modules/image/css/image.admin.css

@@ -14,7 +14,11 @@
 }
 .image-style-preview .preview-image {
   position: relative;
-  margin: auto;
+  margin: 0.5em auto auto auto;
+}
+.image-style-preview .preview-image a,
+.image-style-preview .preview-image a img {
+  display: block;
 }
 .image-style-preview .preview-image .width {
   position: absolute;

modules/image/image.admin.inc

@@ -81,7 +81,10 @@ function template_preprocess_image_style_preview(&$variables) {
   $variables['original']['rendered'] = [
     '#theme' => 'image',
     '#uri' => $original_path,
-    '#alt' => t('Sample original image'),
+    '#alt' => t('Source image: @width pixels wide, @height pixels high', [
+      '@width' => $variables['original']['width'],
+      '@height' => $variables['original']['height'],
+    ]),
     '#title' => '',
     '#attributes' => [
       'width' => $variables['original']['width'],
@@ -95,7 +98,10 @@ function template_preprocess_image_style_preview(&$variables) {
   $variables['derivative']['rendered'] = [
     '#theme' => 'image',
     '#uri' => $variables['derivative']['url'] . '?cache_bypass=' . $variables['cache_bypass'] . '&itok=' . $variables['itok'],
-    '#alt' => t('Sample modified image'),
+    '#alt' => t('Derivative image: @width pixels wide, @height pixels high', [
+      '@width' => $variables['derivative']['width'],
+      '@height' => $variables['derivative']['height'],
+    ]),
     '#title' => '',
     '#attributes' => [
       'width' => $variables['derivative']['width'],

modules/image/src/Form/ImageStyleEditForm.php

@@ -60,7 +60,7 @@ public function form(array $form, FormStateInterface $form_state) {
     $preview_arguments = ['#theme' => 'image_style_preview', '#style' => $this->entity];
     $form['preview'] = [
       '#type' => 'item',
-      '#title' => $this->t('Preview'),
+      '#title' => $this->t('Preview (Click for actual images)'),
       '#markup' => \Drupal::service('renderer')->render($preview_arguments),
       // Render preview above parent elements.
       '#weight' => -5,

modules/image/templates/image-style-preview.html.twig

@@ -33,7 +33,7 @@
 <div class="image-style-preview preview clearfix">
   {# Preview of the original image. #}
   <div class="preview-image-wrapper">
-      {{ 'original'|t }} (<a href="{{ original.url }}">{{ 'view actual size'|t }}</a>)
+      {{ 'Source image'|t }}
       <div class="preview-image original-image" style="width: {{ preview.original.width }}px; height: {{ preview.original.height }}px;">
         <a href="{{ original.url }}">
           {{ original.rendered }}
@@ -45,7 +45,7 @@
 
   {# Derivative of the image style. #}
   <div class="preview-image-wrapper">
-    {{ style_name }} (<a href="{{ derivative.url }}?{{ cache_bypass }}">{{ 'view actual size'|t }}</a>)
+    {{ 'Derivative image'|t }}
     <div class="preview-image modified-image" style="width: {{ preview.derivative.width }}px; height: {{ preview.derivative.height }}px;">
       <a href="{{ derivative.url }}?{{ cache_bypass }}">
         {{ derivative.rendered }}