[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:  (none)
     Type:  defect (bug)  |      Status:  new
 Priority:  normal        |   Milestone:  Awaiting Review
Component:  Editor        |     Version:  6.4.3
 Severity:  normal        |  Resolution:
 Keywords:                |     Focuses:  accessibility
--------------------------+------------------------------
Changes (by sabernhardt):

 * component:  TinyMCE => Editor


Comment:

 Adrian Roselli has stated that an `h1` in a dialog is
 [https://stackoverflow.com/questions/38448811/is-it-semantically-correct-
 to-use-h1-in-a-dialog#answer-38467898 technically not correct], though it
 should not be changed for only one dialog.

 The Classic Editor's "Insert/edit link" dialog has had the `h1` since
 [36991].

 {{{
 <div id="wp-link-wrap" class="wp-core-ui has-text-field" style="display:
 block;" role="dialog" aria-labelledby="link-modal-title">
         <form id="wp-link" tabindex="-1">
                 <input type="hidden" id="_ajax_linking_nonce"
 name="_ajax_linking_nonce" value="4cab82dbc7">
                 <h1 id="link-modal-title">Insert/edit link</h1>
 }}}

 Similar dialogs in the Classic Editor do not have a heading tag:

 - {{{<div id="mceu_84" class="mce-container mce-panel mce-floatpanel mce-
 window mce-in" hidefocus="1" style="border-width: 1px; z-index: 100101;
 left: 263px; top: 96.5px; width: 460px; height: 448px;" role="dialog"
 aria-labelledby="mceu_84" aria-describedby="mceu_84-none" aria-
 label="Keyboard Shortcuts"><div class="mce-reset" role="document"><div
 id="mceu_84-head" class="mce-window-head"><div id="mceu_84-title" class
 ="mce-title">Keyboard Shortcuts</div>}}}
 - {{{<div id="mceu_98" class="mce-container mce-panel mce-floatpanel mce-
 window mce-in" hidefocus="1" style="border-width: 1px; z-index: 100101;
 left: 157px; top: 136.5px; width: 672px; height: 368px;" role="dialog"
 aria-labelledby="mceu_98" aria-describedby="mceu_98-none" aria-
 label="Special character"><div class="mce-reset" role="application"><div
 id="mceu_98-head" class="mce-window-head"><div id="mceu_98-title" class
 ="mce-title">Special character</div>}}}
 - {{{<div id="mceu_112" class="mce-container mce-panel mce-floatpanel mce-
 window mce-in" hidefocus="1" style="border-width: 1px; z-index: 100101;
 left: 311.5px; top: 161.5px; width: 363px; height: 318px;" role="dialog"
 aria-labelledby="mceu_112" aria-describedby="mceu_112-none" aria-
 label="Color"><div class="mce-reset" role="application"><div
 id="mceu_112-head" class="mce-window-head"><div id="mceu_112-title" class
 ="mce-title">Color</div>}}}

 The "Add media" dialog also has an `h1`:

 {{{
 <div tabindex="0" class="media-modal wp-core-ui" role="dialog" aria-
 labelledby="media-frame-title">
         <button type="button" class="media-modal-close"><span class
 ="media-modal-icon"><span class="screen-reader-text">Close
 dialog</span></span></button>
         <div class="media-modal-content" role="document">
                 <div class="media-frame mode-select wp-core-ui" id="__wp-
 uploader-id-0">
                         <div class="media-frame-title" id="media-frame-
 title"><h1>Add media</h1></div>
 }}}

 Likewise, the block editor's Classic block dialog (when the editor is in
 an iframe) has an `h1` heading.

 {{{<div class="components-modal__frame block-editor-freeform-
 modal__content" role="dialog" aria-labelledby="components-modal-header-0"
 tabindex="-1"><div class="components-modal__content" role="document"><div
 class="components-modal__header"><div class="components-modal__header-
 heading-container"><h1 id="components-modal-header-0" class="components-
 modal__header-heading">Classic Editor</h1>}}}

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