Changeset 52225

Timestamp:

11/19/2021 10:54:34 PM (3 years ago)

Author:

audrasjb

Message:

Editor: Add missing label to new-post-slug input on Classic Editor.

Previously, the input for changing the permalink of a post does not have a label in the Classic Editor. This change adds a visually hidden label. It also makes sure browsers do not run spellcheck on the input field.

Props sabernhardt.
Fixes #53725.

File:

• trunk/src/js/_enqueues/admin/post.js (modified) (2 diffs)

trunk/src/js/_enqueues/admin/post.js

@@ -973 +973 @@
      */
     function editPermalink() {
-        var i, slug_value,
+        var i, slug_value, slug_label,
             $el, revert_e,
             c = 0,
@@ -1049 +1049 @@
         }
         slug_value = ( c > full.length / 4 ) ? '' : full;
-
-        $el.html( '<input type="text" id="new-post-slug" value="' + slug_value + '" autocomplete="off" />' ).children( 'input' ).on( 'keydown', function( e ) {
+        slug_label = __( 'URL Slug' );
+
+        $el.html( '<label for="new-post-slug" class="screen-reader-text">' + slug_label + '</label><input type="text" id="new-post-slug" value="' + slug_value + '" autocomplete="off" spellcheck="false" />' ).children( 'input' ).on( 'keydown', function( e ) {
             var key = e.which;
             // On [Enter], just save the new slug, don't save the post.