Fix Accessibility Violation: Improve accessibility of suite navigation bar

[huangkevin-apr]

Description

This PR addresses 3 accessibility violations in the suite navigation bar component of website, improving compliance with WCAG 2.2 guidelines.

Issues Fixed

• WCAG 4.1.2 (Name, Role, Value): The waffle menu button lacked an accessible name for screen readers
• WCAG 1.1.1 (Non-text Content): The decorative waffle icon image was missing an alt attribute
• WCAG 2.4.1 (Bypass Blocks): The navigation bar was not marked as a landmark region

Changes Made

Added accessible label to menu button

• Added aria-label="Applications" to the waffle menu button
• This ensures screen reader users understand the button's purpose

Marked icon as decorative

• Added alt="" to the waffle icon image
• Since the parent button now has an accessible label, the image should be treated as decorative to avoid redundant announcements

Converted to semantic navigation landmark

• Changed the wrapping
  to element
• This creates a proper navigation landmark, allowing assistive technology users to easily identify and navigate to this region

Testing

• Verified with IBM Equal Access Accessibility Checker
• Reduced violations from 7 to 4 issues

Fix Before:
7 Violations

Fix After:
4 Violations (3 Violations have been resolved: please see the green boxes)

Additional Info

The patch submitted in this PR was generated by A11YRepair, an automated Web Accessibility repair tool that I developed to address common accessibility violations in web applications. The generated fixes were manually reviewed and validated before submission.

Reasoning process of A11YRepair:

{
    "1/1": "Based on my analysis of the A11Y Bug Report, Webpage Screenshot, and WCAG Guidelines, I have identified the root causes of the accessibility violations.\n\nThe primary issue is that the \"waffle\" icon, which functions as a button to open a menu, is not properly labeled for assistive technologies. This violates WCAG Success Criterion 4.1.2 because its name cannot be programmatically determined. Additionally, the navigation bar itself is not contained within a landmark region, making it difficult for users to bypass this block of content, which violates SC 2.4.1. Finally, the image used for the waffle icon is not marked as decorative, which is a violation of SC 1.1.1 since its parent button will be given an accessible name.\n\nTo fix these issues, I will apply the following changes to `/plugins/theme-rushstack-suite-nav/src/theme/Root/index.tsx`:\n1.  Add an `aria-label=\"Applications\"` to the `div` with `role=\"button\"` to provide an accessible name for the waffle menu button.\n2.  Add an empty `alt=\"\"` attribute to the `img` element inside the button to mark it as decorative.\n3.  Change the wrapping `div` with `className={styles.suiteNavBar}` to a `<nav>` element to define the navigation bar as a landmark region.\n\nHere are the generated patches:\n\n```typescript\n### /plugins/theme-rushstack-suite-nav/src/theme/Root/index.tsx\n<<<<<<< SEARCH\n    return (\n      <>\n        <div className={styles.suiteNavBar}>\n          <div\n            role=\"button\"\n            className={[styles.waffle, styles.waffleInteraction].join(' ')}\n            onClick={this._onOpenPopup}\n          >\n            <img src={'/images/suitenav/rs-waffle.svg'} />\n          </div>\n          <div className={styles.waffleDivider} />\n\n          <a href=\"https://rushstack.io/\" className={styles.suiteNavItem}>\n            Rush Stack\n          </a>\n          <a href=\"https://rushstack.io/pages/shop/\" className={styles.suiteNavItem}>\n            Shop\n          </a>\n          <a href=\"https://rushstack.io/blog/\" className={styles.suiteNavItem}>\n            Blog\n          </a>\n          <a href=\"https://rushstack.io/community/events/\" className={styles.suiteNavItem}>\n            Events\n          </a>\n        </div>\n\n        {popupPane}\n=======\n    return (\n      <>\n        <nav className={styles.suiteNavBar}>\n          <div\n            role=\"button\"\n            aria-label=\"Applications\"\n            className={[styles.waffle, styles.waffleInteraction].join(' ')}\n            onClick={this._onOpenPopup}\n          >\n            <img src={'/images/suitenav/rs-waffle.svg'} alt=\"\" />\n          </div>\n          <div className={styles.waffleDivider} />\n\n          <a href=\"https://rushstack.io/\" className={styles.suiteNavItem}>\n            Rush Stack\n          </a>\n          <a href=\"https://rushstack.io/pages/shop/\" className={styles.suiteNavItem}>\n            Shop\n          </a>\n          <a href=\"https://rushstack.io/blog/\" className={styles.suiteNavItem}>\n            Blog\n          </a>\n          <a href=\"https://rushstack.io/community/events/\" className={styles.suiteNavItem}>\n            Events\n          </a>\n        </nav>\n\n        {popupPane}\n>>>>>>> REPLACE\n```"
}