Commit dd324bd1 authored by webchick's avatar webchick

Issue #3024184 by seanB, andrewmacpherson, Kristen Pol: Make the tabbing order...

Issue #3024184 by seanB, andrewmacpherson, Kristen Pol: Make the tabbing order match the visual reading order in MediaLibraryWidget
parent 641bf942
......@@ -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;
}
......
......@@ -124,16 +124,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>'),
......@@ -155,6 +145,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',
......@@ -166,14 +166,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'],
......@@ -183,6 +182,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',
......
......@@ -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');
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment