Drupal
/
drupal
mirror of https://git.drupalcode.org/project/drupal.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

(cherry picked from commit 843bf35004)
merge-requests/9515/head
nod_ 2024-09-12 17:05:12 +02:00
parent f62d898c3c
commit 82984b589f
No known key found for this signature in database
GPG Key ID: 76624892606FA197
4 changed files with 16 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
core/modules/image/css/image.admin.css
View File

@ -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;

10
core/modules/image/image.admin.inc
View File

@ -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'],

2
core/modules/image/src/Form/ImageStyleEditForm.php
View File

@ -60,7 +60,7 @@ class ImageStyleEditForm extends ImageStyleFormBase {
$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,

4
core/modules/image/templates/image-style-preview.html.twig
View File

@ -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 }}