Quick filter links are not accessible for screen reader users.

Issue description

On Jira Backlog page, the quick filter elements such as "New", "Touched", "Only My issues", etc are not accessible for screen reader users.

Steps to reproduce

1. With screen reader turned on, navigate to the Jira dashboard page.
2. Navigate to the project menu button in the header section and activate it.
3. Activate any project from the menu. For Example : "QA".
4. Navigate to any of the pages link in the left navigation such as "Backlog", "Active sprints", etc and activate it.
5. Navigate to the Quick filters section in the main content area.
6. Navigate to the filter elements such as "New", "Touched", "Only My issues", etc.

Actual Results

Following issues were observed with the quick filter elements.

• The Quick filter elements such as "New", "Touched", "Only My issues", etc are coded as link (anchor) elements and have role="button" instead of native button element, due to which they don't get activated via space key.
• The screen reader doesn‚Äôt announce the current state of the filter elements i.e. pressed or not pressed. This makes screen reader users difficult to understand whether the filter is applied or not.
• The tooltip text "Use Quick Filters to view a subset of issues‚Ķ" which appears when user hover mouse over the text Quick filter is not accessible for screen reader and keyboard-only users.
• The tooltip text associated with the quick filter elements is not accessible for keyboard-only users.
• The quick filter elements are not associated with the text "Quick filters". This makes difficult for screen reader users to understand the purpose of the elements.
• The quick filter links are wrapped inside definition list (dl ,dt, dd) incorrectly.
• When user activates the quick filter links, the main content area is updated accordingly. This status is not conveyed to the screen reader users.

Expected Results

Apply following fixes to the quick filter elements.

• Use native button elements for the quick filter elements. This implicitly has the support of both enter & space key activation.
• The screen reader should announce the current state of the quick filter buttons i.e. pressed or not pressed. Provide
  aria-pressed="false" on the button element. Update the value to true/false as per user interaction.
• The tooltip text associated with the individual quick filter button should be accessible for keyboard-only users. The tooltip text should be displayed on the page when a filter button receives keyboard focus.
• To make tooltip text "Use Quick Filters to view a subset of issues‚Ķ" accessible, an button can be provided next to the text Quick Filters and it should display the tooltip text when user focus on the button and also the tooltip should be displayed on the page.
• The quick filter buttons should be wrapped inside an unordered list elements (ul & li).
• An off-screen status message should be added in a live region to convey the screen reader when the main content is updated.
  For Example :
  Following status messages should be announced for screen reader users.
  "Now showing Only Your issues in the main content."
  "Now showing Recently Updated issues in the main content."

• Quick filter buttons should be associated with the text "Quick Filters". An aria-labelledby attribute can be used on the button element. The screen reader should announce the label as "Quick Filters: Only My Issues, button, not pressed".
  Code snippet:
  <span id="header">Quick Filters:</span>
  <button id="button1" aria-labelledby="header button1" aria-pressed="true">Only My Issues </button>

Screen recording

https://a11y-internal.atlassian.net/secure/attachment/16549/Screen+Recording+2022-01-04+at+4.41.36+PM.mov Screen Recording 2022-01-04 at 4.41.36 PM.mov

AXQA Ref:AXQA-83