Ticket #43137: 43137.diff

src/wp-includes/widgets/class-wp-widget-media-gallery.php

@@ -172 +172 @@
                 parent::render_control_template_scripts();
                 ?>
                 <script type="text/html" id="tmpl-wp-media-widget-gallery-preview">
-                        <# var describedById = 'describedBy-' + String( Math.random() ); #>
                         <# if ( data.ids.length ) { #>
-                                <div class="gallery media-widget-gallery-preview">
+                                <ul class="gallery media-widget-gallery-preview" role="list">
                                         <# _.each( data.ids, function( id, index ) { #>
                                                 <#
                                                 var attachment = data.attachments[ id ];
@@ -183 +182 @@
                                                 }
                                                 #>
                                                 <# if ( index < 6 ) { #>
-                                                        <dl class="gallery-item">
-                                                                <dt class="gallery-icon">
-                                                                <# if ( attachment.sizes.thumbnail ) { #>
-                                                                        <img src="{{ attachment.sizes.thumbnail.url }}" width="{{ attachment.sizes.thumbnail.width }}" height="{{ attachment.sizes.thumbnail.height }}" alt="" />
-                                                                <# } else { #>
-                                                                        <img src="{{ attachment.url }}" alt="" />
-                                                                <# } #>
-                                                                <# if ( index === 5 && data.ids.length > 6 ) { #>
+                                                        <li class="gallery-item">
+                                                                <div class="gallery-icon">
+                                                                        <img alt="{{ attachment.alt }}"
+                                                                                <# if ( index === 5 && data.ids.length > 6 ) { #> aria-hidden="true" <# } #>
+                                                                                <# if ( attachment.sizes.thumbnail ) { #>
+                                                                                        src="{{ attachment.sizes.thumbnail.url }}" width="{{ attachment.sizes.thumbnail.width }}" height="{{ attachment.sizes.thumbnail.height }}"
+                                                                                <# } else { #>
+                                                                                        src="{{ attachment.url }}"
+                                                                                <# } #>
+                                                                                <# if ( ! attachment.alt && attachment.filename ) { #>
+                                                                                        aria-label="<?php echo esc_attr( sprintf(
+                                                                                                /* translators: %s is the image file name. */
+                                                                                                __( 'Current image has no alternative text. The file name is: %s' ),
+                                                                                                '{{ attachment.filename }}'
+                                                                                        ) ); ?>"
+                                                                                <# } #>
+                                                                        />
+                                                                        <# if ( index === 5 && data.ids.length > 6 ) { #>
                                                                         <div class="gallery-icon-placeholder">
-                                                                                <p class="gallery-icon-placeholder-text">+{{ data.ids.length - 5 }}</p>
+                                                                                <p class="gallery-icon-placeholder-text"
+                                                                                        aria-label="<?php
+                                                                                                printf(
+                                                                                                        /* translators: %s is the amount of additional, not visible images in the gallery widget preview. */
+                                                                                                        __( 'Additional images added to this gallery: %s' ),
+                                                                                                        '{{ data.ids.length - 5 }}'
+                                                                                                );
+                                                                                        ?>"
+                                                                                >+{{ data.ids.length - 5 }}</p>
                                                                         </div>
-                                                                <# } #>
-                                                                </dt>
-                                                        </dl>
+                                                                        <# } #>
+                                                                </div>
+                                                        </li>
                                                 <# } #>
                                         <# } ); #>
-                                </div>
+                                </ul>
                         <# } else { #>
                                 <div class="attachment-media-view">
                                         <p class="placeholder"><?php echo esc_html( $this->l10n['no_media_selected'] ); ?></p>

src/wp-includes/widgets/class-wp-widget-media-image.php

@@ -334 +334 @@
                         <# } #>
                 </script>
                 <script type="text/html" id="tmpl-wp-media-widget-image-preview">
-                        <# var describedById = 'describedBy-' + String( Math.random() ); #>
                         <# if ( data.error && 'missing_attachment' === data.error ) { #>
                                 <div class="notice notice-error notice-alt notice-missing-attachment">
                                         <p><?php echo $this->l10n['missing_attachment']; ?></p>
@@ -344 +343 @@
                                         <p><?php _e( 'Unable to preview media due to an unknown error.' ); ?></p>
                                 </div>
                         <# } else if ( data.url ) { #>
-                                <img class="attachment-thumb" src="{{ data.url }}" draggable="false" alt="{{ data.alt }}" <# if ( ! data.alt && data.currentFilename ) { #> aria-describedby="{{ describedById }}" <# } #> />
-                                <# if ( ! data.alt && data.currentFilename ) { #>
-                                        <p class="hidden" id="{{ describedById }}">
-                                        <?php
-                                                /* translators: placeholder is image filename */
-                                                echo sprintf( __( 'Current image: %s' ), '{{ data.currentFilename }}' );
-                                        ?>
-                                        </p>
-                                <# } #>
+                                <img class="attachment-thumb" src="{{ data.url }}" draggable="false" alt="{{ data.alt }}"
+                                        <# if ( ! data.alt && data.currentFilename ) { #>
+                                                aria-label="<?php echo esc_attr( sprintf(
+                                                        /* translators: %s is the image file name. */
+                                                        __( 'Current image has no alternative text. The file name is: %s' ),
+                                                        '{{ data.currentFilename }}'
+                                                ) ); ?>"
+                                        <# } #>
+                                />
                         <# } #>
                 </script>
                 <?php