[wp-trac] [WordPress Trac] #60799: Change the Header Tag in Link Modal from <h1> to <h2> for Better Accessibility

[WordPress Trac]

#60799: Change the Header Tag in Link Modal from <h1> to <h2> for Better
Accessibility
--------------------------+----------------------------
 Reporter:  lyonmuller    |       Owner:  jwgoedert
     Type:  defect (bug)  |      Status:  assigned
 Priority:  normal        |   Milestone:  6.6
Component:  Editor        |     Version:  6.4.3
 Severity:  normal        |  Resolution:
 Keywords:                |     Focuses:  accessibility
--------------------------+----------------------------

Comment (by jwgoedert):

 Thank you @alexstine for giving this valuable feedback.

 I spent some time going through the classic editor and confirming the
 findings of @sabernhardt and captured relevant code below.

 I think after @alexstine's input I agree that these as modals may stand
 alone and warrant h1 tags as they seem to stand alone. I have only tested
 with voiceover and have had mixed results.


 Images above are the "Insert/Edit Link" menu(accessed via 'link options'
 in after hitting 'Insert/Edit Link', "Classic Editor" modal, and the "Add
 Media" modal which contains six menu items which dynamically become the
 heading after being clicked.

 The "Insert/Edit Link" h1 tag is hardcoded in the class-wp-editor.php
 file.([https://github.com/WordPress/wordpress-
 develop/blob/80096ddf29d3ffa4d5654f5f788df7f598b48756/src/wp-includes
 /class-wp-editor.php#L1881])
 {{{
 <h1 id="link-modal-title"><?php _e( 'Insert/edit link' ); ?></h1>
 }}}

 The "Add Media" headers are set dynamically using the 'createTitle'
 function in 'media-frame.js' [https://github.com/WordPress/wordpress-
 develop/blob/80096ddf29d3ffa4d5654f5f788df7f598b48756/src/js/media/views
 /media-frame.js#L162] by setting the value of 'tagName' on line 165 to
 'h1'.


 {{{
         /**
          * @param {Object} title
          * @this wp.media.controller.Region
          */
         createTitle: function( title ) {
                 title.view = new wp.media.View({
                         controller: this,
                         tagName: 'h1'
                 });
         },
 }}}

 Styles are applied in the 'media-views.css' [https://github.com/WordPress
 /wordpress-develop/blob/80096ddf29d3ffa4d5654f5f788df7f598b48756/src/wp-
 includes/css/media-views.css#L805] to the 'h1' tag.

 {{{
 .media-frame-title h1 {
         padding: 0 16px;
         font-size: 22px;
         line-height: 2.27272727;
         margin: 0;
 }
 }}}

 I will wait for discussion and clarificaiton before diving further or
 creating any PRs.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/60799#comment:8>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform