Issue Summary

On the "Move a page" modal dialog, The vertically oriented buttons is behaving as tabs with manual activation. These tabs are missing appropriate roles and State.

Steps to Reproduce

1. Using screen reader, navigate to the "More options" link & activate move.
2. A modal will appear.
3. Listen that the elements are not identified as tab and the number of tabs are not announced as well.
4. Listen that the elements are not identified as tab. 

Screenshot

Actual Results

The "Advanced", "Search" & so on elements are not programmatically determined as tabs. Also, the number of tabs is not programmatically determined.On activating the elements, the related content gets dynamically updated.
Although the dynamic change in the content is easier to understand for sighted users, it is not intuitive for screen reader users.

Expected Results

Apply the following changes:

• Provide the role="tablist" for the <ul> tag containing the elements that behaves as a tab.
• Provide role="presentation" for <li> elements containing tabs.
• Specify 'id' attribute for the container of visible text that determines the name of the tablist. Reference the value of the 'id' attribute correctly via 'aria-labelledby' attribute of tablist
• Set the role="tab" for the <a> tags used for displaying tabs In addition, specify the ARIA attributes for tabs, such as “aria-controls” and “aria-selected”. (The value of the aria-selected attribute needs to change on the basis of currently active tab.)
• Set aria-selected=”true” for the active tab.
• Specify an 'id' attribute for the <div> tags used to display the content of respective tab. Reference the value of the 'id' attribute correctly via 'aria-controls' attribute of each tab.
• Ensure that tabpanel should contain at least one focusable element, if it is not possible then provide tabindex="0" to tabpanel element to make focusable.
• Additionally,Provide  aria-orientation= "vertical" to the <div> tag. 
  More information can be found at https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-manual.html 

Code snippet

<ul role=“tablist” aria-labelledby="tablist-1" class="dialog-page-menu" style="height: 476px;">
<li  class="page-menu-item selected"><button class="item-button" role="tab"
            aria-selected="true"
            aria-controls="tabpanel-1" id="location-panel-id" id="tab-1>Advanced</button></li> 
(...)

Workaround

Currently there is no known workaround for this behavior. A workaround will be added here when available.

Environment

MacBook Pro (16-inch, 2019)
macOs Ventura 13.3.1
Chrome - Version 113.0.5672.63 (Official Build) (x86_64)
Firefox- Version 92.0 (64-bit)
Safari- Version 16.4 (18615.1.26.110.1)
JAWS- Version 2022
NVDA- Version 2021.2
Voiceover - Version Latest