Verified Commit 82984b58 authored by Théodore Biadala's avatar Théodore Biadala
Browse files

Issue #3273099 by rkoller, jaydeep_patel, tinto, smustgrave: Fix several... 

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

(cherry picked from commit 843bf350)
parent f62d898c

core/modules/image/css/image.admin.css

+5 −1
Original line number Diff line number Diff line
@@ -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;

core/modules/image/image.admin.inc

+8 −2
Original line number Diff line number Diff line
@@ -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'],

core/modules/image/src/Form/ImageStyleEditForm.php

+1 −1
Original line number Diff line number Diff line
@@ -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,

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

+2 −2
Original line number Diff line number Diff line
@@ -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 }}