Fix swatch keyboard navigation (a11y) @W-16000154@

[bfeister]

Description

• [x] Fix swatch navigability (tabIndex: -1 as previously implemented is a no-go for keyboard navigation)
• [x] Add semantically required href attribute
• [x] Add unit test to preserve / ensure semantic hrefs

Before the fix

After the fix

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

• (change1)

How to Test-Drive This PR

• (step1)

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]

The GUS ticket requesting TAB navigation makes in invalid (from an a11y perspective) request. ARROW (left / right) navigation, not TAB is the specification (which we already adhere to)

Here's that comment / ticket for posterity. Closing this PR https://gus.lightning.force.com/lightning/r/0D5EE00001zCiq60AC/view