Description

• Set outline: auto; in the Tabs and SideNav components' CSS to show focus outline

Related Issue

• Closes items in tabs and sidenav components not outlined when focused #184

Motivation and Context

The "Header" and "SideNav" components render links with their CSS outline property set to none when the element is in a focused state (which is the default in @spectrum/css AFAICT based on what's here and here). In practice this makes it so that when a user is using keyboard navigation, the UI doesn't reflect when the element is focused. This change makes the focus state of elements in the Header and SideNav visible by default.

How Has This Been Tested?

Since these are style changes, I used storybook for testing to verify there's an outline when the elements are "focused".

SideNav:

Header - title:

Header - siteTitle:

Header - Tabs item:

Screenshots:

Before

After

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• I have signed the Adobe Open Source CLA.
• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.
• All new and existing tests passed.