Issue Summary

The list mark-up is not defined for some interactive elements in the main content area.

Steps to Reproduce

1. Navigate to the "Plan" dropdown and select any plan.
2. Using screen reader explore the content.
3. Verify that list mark-up is not defined for the interactive elements.

Screenshot

Actual Results

List mark-up is not used to present related information programatically. For example, button elements such as "3M", "1Y", "Fit", and "Custom" is not marked as unordered list which visually looks like a list of related items. As a result, screen reader users will find it difficult to navigate to the list and different list items quickly.

Expected Results

Use appropriate list mark-up, such as <ul> and <li> to identify related information. In addition, consider applying styles to maintain the visual presentation of a web page.
 
In this scenario remove role "menuitem" from the source code.
 
Code Snippet

<ul>
<li>
<button class="_13IoD sc-fAjcbJ dKHlbz" spacing="default" type="button"><span style="align-self: center; display: inline-flex; flex-wrap: nowrap; max-width: 100%; position: relative;"><span style="align-items: center; align-self: center; flex: 1 1 auto; margin: 0px 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: opacity 0.3s ease 0s; opacity: 1;">3M</span></span></button>
</li>
(...)
</ul>

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 Version 13.6.1
Chrome - Version 120.0.6099.234 (Official Build) (x86_64)
Firefox- Version 112.0.1 (64-bit)
Safari- Version 17.3 (18617.2.4.11.9, 18617)
JAWS- Version 2022
NVDA- Version 2020.3