Issue #3024184 by seanB, andrewmacpherson, Kristen Pol: Make the tabbing order match the visual reading order in MediaLibraryWidget

(cherry picked from commit dd324bd)

Author: webchick

modules/media_library/css/media_library.theme.css

@@ -165,14 +165,14 @@
   margin: 0.75em;
 }
 
-.media-library-item__remove,
-.media-library-item__remove:hover,
-.media-library-item__remove:focus,
-.media-library-item__remove.button,
-.media-library-item__remove.button:disabled,
-.media-library-item__remove.button:disabled:active,
-.media-library-item__remove.button:hover,
-.media-library-item__remove.button:focus {
+.media-library-item .media-library-item__remove,
+.media-library-item .media-library-item__remove:hover,
+.media-library-item .media-library-item__remove:focus,
+.media-library-item .media-library-item__remove.button,
+.media-library-item .media-library-item__remove.button:disabled,
+.media-library-item .media-library-item__remove.button:disabled:active,
+.media-library-item .media-library-item__remove.button:hover,
+.media-library-item .media-library-item__remove.button:focus {
   position: absolute;
   z-index: 1;
   top: 0;
@@ -190,11 +190,11 @@
   transition: 0.2s border-color;
 }
 
-.media-library-item__remove:hover,
-.media-library-item__remove:focus,
-.media-library-item__remove.button:hover,
-.media-library-item__remove.button:focus,
-.media-library-item__remove.button:disabled:active {
+.media-library-item .media-library-item__remove:hover,
+.media-library-item .media-library-item__remove:focus,
+.media-library-item .media-library-item__remove.button:hover,
+.media-library-item .media-library-item__remove.button:focus,
+.media-library-item .media-library-item__remove.button:disabled:active {
   border-color: #40b6ff;
 }
 

modules/media_library/src/Plugin/Field/FieldWidget/MediaLibraryWidget.php

@@ -139,16 +139,6 @@ public function formElement(FieldItemListInterface $items, $delta, array $elemen
       ],
     ];
 
-    $element['selection'] = [
-      '#type' => 'container',
-      '#attributes' => [
-        'class' => [
-          'js-media-library-selection',
-          'media-library-selection',
-        ],
-      ],
-    ];
-
     if (empty($referenced_entities)) {
       $element['empty_selection'] = [
         '#markup' => $this->t('<p>No media items are selected.</p>'),
@@ -170,6 +160,16 @@ public function formElement(FieldItemListInterface $items, $delta, array $elemen
       ];
     }
 
+    $element['selection'] = [
+      '#type' => 'container',
+      '#attributes' => [
+        'class' => [
+          'js-media-library-selection',
+          'media-library-selection',
+        ],
+      ],
+    ];
+
     foreach ($referenced_entities as $delta => $media_item) {
       $element['selection'][$delta] = [
         '#type' => 'container',
@@ -181,14 +181,13 @@ public function formElement(FieldItemListInterface $items, $delta, array $elemen
         ],
         'preview' => [
           '#type' => 'container',
-          // @todo Make the view mode configurable in https://www.drupal.org/project/drupal/issues/2971209
-          'rendered_entity' => $view_builder->view($media_item, 'media_library'),
           'remove_button' => [
             '#type' => 'submit',
             '#name' => $field_name . '-' . $delta . '-media-library-remove-button' . $id_suffix,
             '#value' => $this->t('Remove'),
             '#attributes' => [
               'class' => ['media-library-item__remove'],
+              'aria-label' => $this->t('Remove @label', ['@label' => $media_item->label()]),
             ],
             '#ajax' => [
               'callback' => [static::class, 'updateWidget'],
@@ -198,6 +197,8 @@ public function formElement(FieldItemListInterface $items, $delta, array $elemen
             // Prevent errors in other widgets from preventing removal.
             '#limit_validation_errors' => $limit_validation_errors,
           ],
+          // @todo Make the view mode configurable in https://www.drupal.org/project/drupal/issues/2971209
+          'rendered_entity' => $view_builder->view($media_item, 'media_library'),
         ],
         'target_id' => [
           '#type' => 'hidden',

modules/media_library/tests/src/FunctionalJavascript/MediaLibraryTest.php

@@ -186,6 +186,7 @@ public function testWidget() {
     $assert_session->pageTextContains('Cat');
     $assert_session->pageTextContains('Bear');
     // Remove "Dog" (happens to be the first remove button on the page).
+    $assert_session->elementAttributeContains('css', '.media-library-item__remove', 'aria-label', 'Remove Dog');
     $assert_session->elementExists('css', '.media-library-item__remove')->click();
     $assert_session->assertWaitOnAjaxRequest();
     $assert_session->pageTextNotContains('Dog');