[wp-trac] [WordPress Trac] #53951: Twenty Twenty: Search modal aria-expanded

[WordPress Trac]

#53951: Twenty Twenty: Search modal aria-expanded
-------------------------------------+-------------------------------------
 Reporter:  utz119                   |       Owner:  alexstine
     Type:  defect (bug)             |      Status:  accepted
 Priority:  normal                   |   Milestone:  6.0
Component:  Bundled Theme            |     Version:
 Severity:  normal                   |  Resolution:
 Keywords:  has-patch has-testing-   |     Focuses:  accessibility,
  instructions needs-testing         |  javascript
-------------------------------------+-------------------------------------
Changes (by afercia):

 * keywords:  has-patch has-testing-instructions dev-feedback => has-patch
     has-testing-instructions needs-testing


Comment:

 Looking a bit into this issue, seems to me the root problem is that `aria-
 expanded` needs to be handled on multiple elements at once. Ideally, the
 state of the toggle search buttons for mobile and desktop should be
 synced.

 [attachment:"53951.2.diff"] changes the `twentytwentyToggleAttribute`
 function so that:
 - It selects all the toggles with the same `data-toggle-target` attribute
 of the passed element.
 - Loops through the collected toggles to update their aria-expanded
 attribute.

 I kept the role="dialog" added in previous patches and also added an aria-
 label to the dialog.

 Some testing would be greatly appreciated. Things to test:
 - Both the desktop and mobile Search toggle buttons get their aria-
 expanded attribute updated, in all cases: click, Escape key press, click
 outside. On both the desktop and responsive view.
 - Check the mobile menu toggle still works as expected.
 - Check the mobile sub-menus toggles still work as expected.

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