[wp-trac] [WordPress Trac] #63981: Taxonomy meta box tabs not programmatically identified

[WordPress Trac]

#63981: Taxonomy meta box tabs not programmatically identified
-------------------------------+-----------------------------
 Reporter:  alh0319            |      Owner:  (none)
     Type:  defect (bug)       |     Status:  new
 Priority:  normal             |  Milestone:  Awaiting Review
Component:  Posts, Post Types  |    Version:
 Severity:  normal             |   Keywords:
  Focuses:                     |
-------------------------------+-----------------------------
 In the classic editor, when a hierarchical taxonomy is present the metabox
 for selecting terms has two tabs "All $TaxName" and "Most Used". This is
 an example of those tabs in the Categories meta box:

 [https://drive.google.com/file/d/1UAV58Nb1quT6zn9c39zXNCnjt4zG70iP/view?usp=drive_link
 Image showing tabs in Categories meta box]

 Code for this element:

 {{{
 <div id="taxonomy-category" class="categorydiv">
                 <ul id="category-tabs" class="category-tabs">
                         <li class="tabs"><a href="#category-all">All
 Categories</a></li>
                         <li class="hide-if-no-js"><a href="#category-
 pop">Most Used</a></li>
                 </ul>

                 <div id="category-pop" class="tabs-panel" style="display:
 none;">
                         <ul id="categorychecklist-pop"
 class="categorychecklist form-no-clear">

                 <li id="popular-category-66" class="popular-category">
                         <label class="selectit">
                                 <input id="in-popular-category-66"
 type="checkbox" checked="checked" value="66">
                                 News                    </label>
                 </li>

                                         </ul>
                 </div>

                 <div id="category-all" class="tabs-panel">
                         <input type="hidden" name="post_category[]"
 value="0">                  <ul id="categorychecklist" data-wp-
 lists="list:category" class="categorychecklist form-no-clear">

 <li id="in-category-66-1" class="popular-category"><label
 class="selectit"><input value="66" type="checkbox" name="post_category[]"
 id="in-category-66-2" checked="checked"> News</label></li>

 <li id="in-category-1-1"><label class="selectit"><input value="1"
 type="checkbox" name="post_category[]" id="in-category-1-2">
 Uncategorized</label></li>
                         </ul>
                 </div>
                                 <div id="category-adder" class="wp-hidden-
 children">
                                 <a id="category-add-toggle" href
 ="#category-add" class="hide-if-no-js taxonomy-add-new">
                                         + Add Category
 </a>
                                 <p id="category-add" class="category-add
 wp-hidden-child">
                                         <label class="screen-reader-text"
 for="newcategory">Add Category</label>
                                         <input type="text"
 name="newcategory" id="newcategory" class="form-required form-input-tip"
 value="New Category Name" aria-required="true">
                                         <label class="screen-reader-text"
 for="newcategory_parent">
                                                 Parent Category:
 </label>
                                         <select name="newcategory_parent"
 id="newcategory_parent" class="postform">
         <option value="-1">— Parent Category —</option>
         <option class="level-0" value="66">News</option>
         <option class="level-0" value="1">Uncategorized</option>
 </select>
                                         <input type="button" id="category-
 add-submit" data-wp-lists="add:categorychecklist:category-add"
 class="button category-add-submit" value="Add Category">
                                         <input type="hidden" id
 ="_ajax_nonce-add-category" name="_ajax_nonce-add-category"
 value="c53a523941">                                  <span id="category-
 ajax-response"></span>
                                 </p>
                         </div>
                         </div>
 }}}


 These tabs are not programmatically defined and don't follow the expected
 keyboard navigation pattern for tabs. They are announced as links by
 screen readers. They also don't indicate which tab is currently selected.

 [https://drive.google.com/file/d/1pVTbHHL5MSW9oUgkTg0_vaMQeWyLGfAS/view?usp=drive_link
 Image showing NVDA announcements for the tabs in a custom taxonomy]

 As currently coded, these tabs fail
 [https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html WCAG
 4.1.2 Name, Role, Value]

 ==== Recommended Fix

 The following fixes need to be applied to these tabs. The fixes should
 work for core Categories and also any custom taxonomies created by
 plugins/themes, such as WooCommerce product categories and brands.

 1. Add `role="tablist"` to the container for the tabs.
 2. Add `role="tab"` to each tab and an aria-controls attribute that links
 each tab to the ID of the tab panel that it controls.
 3. Add `role="tabpanel"` to the div that contains the tab contents.
 4. Add `aria-selected="true"` to the tab for the currently active panel
 and use JavaScript to change which tab the attribute is on as they are
 selected.
 5. Only the selected tab should be in the taborder - right and left arrow
 keys should be used to move between the tabs. The next tab stop after the
 selected tab should be the first focusable element in the tab panel.
 6. Tabs should be able to be triggered/selected with the space bar and the
 return/enter key.

 For more information refer to:
 [https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-manual/ APG
 Manual Tabs Example]

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/63981>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform