@W-12627135 - Fix ARIA for ListMenuTrigger Component

[bendvc]

Description

This PR fixes @W-12627135 where the ARIA roles, states and properties were places on the wrong element in the menu and could potentially confuse screen readers.

The fix here was to simply wrap the Link component with the popover trigger and not next it inside of the Link. This results in similar markup, but now the link has all the correct ARIA attributes that it should.

This image was provided by the auditors, highlighting the ARIA props being on the wrong element:

This image is the markup after this PR changes, showing that now the ARIA props are correctly situated on the link tag:

NOTE: There have been some changes to the components that have resulted in some differences in the markup (e.g. you can see this additional fade div) those changes have no bearings on this solution.

Types of Changes

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Documentation update
• Breaking change (could cause existing functionality to not work as expected)
• Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

• Removing a public function or component or prop
• Adding a required argument to a function
• Changing the data type of a function parameter or return value
• Adding a new peer dependency to package.json

Changes

• Change what components are encompassed by the popover trigger.

How to Test-Drive This PR

• Check out and preview this code.
• Use html inspector to inspect the "down-chevron" icon next to "New Arrivals" in the main navigation.
• Ensure that the markup looks like the image provided above where the ARIA attributes "haspopup", "expanded", "controls", etc are on the anchor tag and not the div within it.

Checklists

General

• Changes are covered by test cases
• CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

• There are no changes to UI

or...

• Changes were tested with a Screen Reader (iOS VoiceOver or Android Talkback) and had no issues
• Changes comply with WCAG 2.0 guidelines levels A and AA
• Changes to common UI patterns and interactions comply with WAI-ARIA best practices

Localization

• Changes include a UI text update in the Retail React App (which requires translation)

[bfeister]

Nice and straightforward 🚀