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

Issue #2852724 by VladimirAus, tinto, jofitz, smustgrave, brenv, andrewmacpherson, rkoller, mgifford, cortezj: Machine-name field is not effectively hidden from keyboard and screen reader users

merge-requests/3519/merge
Lauri Eskola 2023-03-04 09:31:12 +02:00
parent 5030f45e0c
commit 60cce5921b
No known key found for this signature in database
GPG Key ID: 382FC0F5B0DF53F8
3 changed files with 12 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
core/misc/machine-name.js
View File

@ -46,7 +46,7 @@
function clickEditHandler(e) {
const data = e.data;
data.$wrapper.removeClass('visually-hidden');
data.$wrapper.removeClass('hidden');
data.$target.trigger('focus');
data.$suffix.hide();
data.$source.off('.machineName');
@ -117,7 +117,7 @@
// Figure out the maximum length for the machine name.
options.maxlength = $target.attr('maxlength');
// Hide the form item container of the machine name form element.
$wrapper.addClass('visually-hidden');
$wrapper.addClass('hidden');
// Initial machine name from the target field default value.
const machine = $target[0].value;
// Append the machine name preview to the source field.
@ -161,9 +161,9 @@
// If it is editable, append an edit link.
const $link = $(
`<span class="admin-link"><button type="button" class="link">${Drupal.t(
'Edit',
)}</button></span>`,
'<span class="admin-link"><button type="button" class="link" aria-label="'
.concat(Drupal.t('Edit machine name'), '">')
.concat(Drupal.t('Edit'), '</button></span>'),
).on('click', eventData, clickEditHandler);
$suffix.append($link);

4
core/modules/media/tests/src/FunctionalJavascript/MediaEmbedFilterConfigurationUiTest.php
View File

@ -256,10 +256,10 @@ class MediaEmbedFilterConfigurationUiTest extends MediaJavascriptTestBase {
*/
protected function showHiddenFields() {
$script = <<<JS
var hidden_fields = document.querySelectorAll(".visually-hidden");
var hidden_fields = document.querySelectorAll(".hidden");
[].forEach.call(hidden_fields, function(el) {
el.classList.remove("visually-hidden");
el.classList.remove("hidden");
});
JS;

11
core/tests/Drupal/FunctionalJavascriptTests/Core/MachineNameTest.php
View File

@ -104,19 +104,18 @@ class MachineNameTest extends WebDriverTestBase {
$this->assertEmpty($machine_name_2_value->getHtml(), 'The second machine name field should still be empty');
}
// Validate the machine name field is hidden. Elements are visually hidden
// using positioning, isVisible() will therefore not work.
$this->assertEquals(TRUE, $machine_name_1_wrapper->hasClass('visually-hidden'), 'The ID field must not be visible');
$this->assertEquals(TRUE, $machine_name_2_wrapper->hasClass('visually-hidden'), 'The ID field must not be visible');
// Validate the machine name field is hidden.
$this->assertFalse($machine_name_1_wrapper->isVisible(), 'The ID field must not be visible');
$this->assertFalse($machine_name_2_wrapper->isVisible(), 'The ID field must not be visible');
// Test switching back to the manual editing mode by clicking the edit link.
$button_1->click();
// Validate the visibility of the machine name field.
$this->assertEquals(FALSE, $machine_name_1_wrapper->hasClass('visually-hidden'), 'The ID field must now be visible');
$this->assertTrue($machine_name_1_wrapper->isVisible(), 'The ID field must now be visible');
// Validate the visibility of the second machine name field.
$this->assertEquals(TRUE, $machine_name_2_wrapper->hasClass('visually-hidden'), 'The ID field must not be visible');
$this->assertFalse($machine_name_2_wrapper->isVisible(), 'The ID field must not be visible');
// Validate if the element contains the correct value.
$this->assertEquals($test_values[1]['expected'], $machine_name_1_field->getValue(), 'The ID field value must be equal to the php generated machine name');