Unverified Commit 60cce592 authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #2852724 by VladimirAus, tinto, jofitz, smustgrave, brenv,... 

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
parent 5030f45e

core/misc/machine-name.js

+5 −5
Original line number Diff line number Diff line
@@ -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);

core/modules/media/tests/src/FunctionalJavascript/MediaEmbedFilterConfigurationUiTest.php

+2 −2
Original line number Diff line number Diff line
@@ -256,10 +256,10 @@ public function providerTestValidations() { 
   */

  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;

core/tests/Drupal/FunctionalJavascriptTests/Core/MachineNameTest.php

+5 −6
Original line number Diff line number Diff line
@@ -104,19 +104,18 @@ public function testMachineName() { 
      $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');