Commit c793f992 authored by Gábor Hojtsy's avatar Gábor Hojtsy

Issue #3035408 by seanB, andrewmacpherson, phenaproxima, mgifford, rainbreaw:...

Issue #3035408 by seanB, andrewmacpherson, phenaproxima, mgifford, rainbreaw: Identify purpose of vertical tabs in MediaLibraryWidget dialog for assistive tech users
parent 0dd75767
......@@ -82,6 +82,15 @@
$menu
.find('a', context)
.once('media-library-menu-item')
.on('keypress', e => {
// The AJAX link has the button role, so we need to make sure the link
// is also triggered when pressing the spacebar.
if (e.which === 32) {
e.preventDefault();
e.stopPropagation();
$(e.currentTarget).trigger('click');
}
})
.on('click', e => {
e.preventDefault();
e.stopPropagation();
......@@ -125,17 +134,24 @@
};
ajaxObject.execute();
// Set the active tab.
// Set the selected tab.
$menu.find('.active-tab').remove();
$menu.find('a').removeClass('active');
$(e.currentTarget)
.addClass('active')
.html(
Drupal.t(
'@title<span class="active-tab visually-hidden"> (active tab)</span>',
{ '@title': $(e.currentTarget).html() },
'<span class="visually-hidden">Show </span>@title<span class="visually-hidden"> media</span><span class="active-tab visually-hidden"> (selected)</span>',
{ '@title': $(e.currentTarget).data('title') },
),
);
// Announce the updated content.
Drupal.announce(
Drupal.t('Showing @title media.', {
'@title': $(e.currentTarget).data('title'),
}),
);
});
},
};
......
......@@ -31,7 +31,13 @@
Drupal.behaviors.MediaLibraryTabs = {
attach: function attach(context) {
var $menu = $('.js-media-library-menu');
$menu.find('a', context).once('media-library-menu-item').on('click', function (e) {
$menu.find('a', context).once('media-library-menu-item').on('keypress', function (e) {
if (e.which === 32) {
e.preventDefault();
e.stopPropagation();
$(e.currentTarget).trigger('click');
}
}).on('click', function (e) {
e.preventDefault();
e.stopPropagation();
......@@ -70,7 +76,11 @@
$menu.find('.active-tab').remove();
$menu.find('a').removeClass('active');
$(e.currentTarget).addClass('active').html(Drupal.t('@title<span class="active-tab visually-hidden"> (active tab)</span>', { '@title': $(e.currentTarget).html() }));
$(e.currentTarget).addClass('active').html(Drupal.t('<span class="visually-hidden">Show </span>@title<span class="visually-hidden"> media</span><span class="active-tab visually-hidden"> (selected)</span>', { '@title': $(e.currentTarget).data('title') }));
Drupal.announce(Drupal.t('Showing @title media.', {
'@title': $(e.currentTarget).data('title')
}));
});
}
};
......
......@@ -231,19 +231,24 @@ protected function buildMediaTypeMenu(MediaLibraryState $state) {
$link_state->set('media_library_content', 1);
$title = $allowed_type->label();
$display_title = [
'#markup' => $this->t('<span class="visually-hidden">Show </span>@title<span class="visually-hidden"> media</span>', ['@title' => $title]),
];
if ($allowed_type_id === $selected_type_id) {
$title = [
'#markup' => $this->t('@title<span class="active-tab visually-hidden"> (active tab)</span>', ['@title' => $title]),
$display_title = [
'#markup' => $this->t('<span class="visually-hidden">Show </span>@title<span class="visually-hidden"> media</span><span class="active-tab visually-hidden"> (selected)</span>', ['@title' => $title]),
];
}
$menu['#links']['media-library-menu-' . $allowed_type_id] = [
'title' => $title,
'title' => $display_title,
'url' => Url::fromRoute('media_library.ui', [], [
'query' => $link_state->all(),
]),
'attributes' => [
'class' => ['media-library-menu__link'],
'role' => 'button',
'data-title' => $title,
],
];
}
......
......@@ -471,7 +471,7 @@ public function testWidget() {
foreach ($links as $link) {
$link_titles[] = $link->getText();
}
$expected_link_titles = ['Type Three (active tab)', 'Type One', 'Type Two', 'Type Four'];
$expected_link_titles = ['Show Type Three media (selected)', 'Show Type One media', 'Show Type Two media', 'Show Type Four media'];
$this->assertSame($link_titles, $expected_link_titles);
$this->drupalGet('admin/structure/types/manage/basic_page/form-display');
$assert_session->buttonExists('field_twin_media_settings_edit')->press();
......@@ -490,7 +490,22 @@ public function testWidget() {
$link_titles = array_map(function ($link) {
return $link->getText();
}, $page->findAll('css', '.media-library-menu a'));
$this->assertSame($link_titles, ['Type One (active tab)', 'Type Three', 'Type Four', 'Type Two']);
$this->assertSame($link_titles, ['Show Type One media (selected)', 'Show Type Three media', 'Show Type Four media', 'Show Type Two media']);
$page->find('css', '.ui-dialog-titlebar-close')->click();
// Assert the announcements for media type navigation in the media library.
$assert_session->elementExists('css', '.media-library-open-button[name^="field_unlimited_media"]')->click();
$assert_session->assertWaitOnAjaxRequest();
$page->clickLink('Type Three');
$assert_session->assertWaitOnAjaxRequest();
$this->assertNotEmpty($assert_session->waitForText('Showing Type Three media.'));
$page->clickLink('Type One');
$assert_session->assertWaitOnAjaxRequest();
$this->assertNotEmpty($assert_session->waitForText('Showing Type One media.'));
// Assert the links can be triggered by via the spacebar.
$assert_session->elementExists('named', ['link', 'Type Three'])->keyPress(32);
$assert_session->assertWaitOnAjaxRequest();
$this->assertNotEmpty($assert_session->waitForText('Showing Type Three media.'));
$page->find('css', '.ui-dialog-titlebar-close')->click();
// Assert media is only visible on the tab for the related media type.
......@@ -501,7 +516,8 @@ public function testWidget() {
$assert_session->pageTextNotContains('Turtle');
$page->clickLink('Type Three');
$assert_session->assertWaitOnAjaxRequest();
$assert_session->elementExists('named', ['link', 'Type Three (active tab)']);
$this->assertNotEmpty($assert_session->waitForText('Showing Type Three media.'));
$assert_session->elementExists('named', ['link', 'Show Type Three media (selected)']);
$assert_session->pageTextNotContains('Dog');
$assert_session->pageTextNotContains('Bear');
$assert_session->pageTextNotContains('Turtle');
......@@ -1080,7 +1096,7 @@ public function testWidgetUpload() {
$this->assertCount(2, $selected_checkboxes);
// Ensure the created item is added in the widget.
$assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Insert selected');
$this->assertNotEmpty($assert_session->waitForText('Added one media item.'));
$this->assertNotEmpty($assert_session->waitForText('Added 2 media items.'));
$assert_session->assertWaitOnAjaxRequest();
$assert_session->pageTextNotContains('Add or select media');
$assert_session->pageTextContains('Unlimited Cardinality Image');
......
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