feat(field-label): add field label pattern

[Westbrook]

Description

• add field label pattern
• update docs site to use this pattern rather than custom code
• correct an issue in stealing focus after an overlay is closed

Preview available at: https://5fc853af5b61815cd54df3fd--spectrum-web-components.netlify.app

Related Issue

fixed #475

Motivation and Context

Labels are an important accessibility and usability tool.

How Has This Been Tested?

• unit tests
• visual regression tests
• manual integration tests

Screenshots (if appropriate):

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)

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.

[jnurthen]

Clicking the label should move focus to the associated form element. This works fine for the sp-textfield but doesn't seem to work for the sp-dropdown

[Westbrook]

@jnurthen thanks for checking in. Can you confirm a couple of things for me?

• browser/os/version
• if you "click the label" and then "press spacebar" does it act as expected with the sp-dropdown?

If yes to the spacebar, then this has to do with "click" not triggering the heuristic for :focus-visible. Should we be attempting to hack that in this case? If so, I can share this information with the Spectrum team so that this design/functionality can be perpetuated across other surfaces.

[jnurthen]

This occurred on both Safari & Chrome (Current production versions) on MacOS 10.15.7
You are correct that focus does indeed appear to be there - but the ring is not being drawn.

react-spectrum ( https://react-spectrum.adobe.com/react-spectrum/Picker.html ) does draw the focus ring in this case and I suggest that SWC should do the same.

[Westbrook]

Haha. Gotta love the way the web has to motivate entire swaths of designers, devs and product owners to get an accessible feature into the platform only to work around its presence later.

Thanks for the clarification. I'll get that worked out and added to the PR.

I'll still bring this up with Spectrum design/CSS as the quite picker does this by default and there should really be a less bumpy design API here. Always a little something more!

[adixon-adobe]

I don't have time to git this a really deep review, but this looks good overall.

I've got one comment that could be improved now (or later). I don't think you need to block this on it though.

[adixon-adobe]

this is the sort of code that will cause subtle conflicts if multiple sp-field-label classes can be instantiated, or if this is subclassed. Can you use the tag name directly here? That'd at least give some safety here.

[Westbrook]

Great idea. Updated!

[Westbrook]

Expanded on the tests here, and really hope we can get this reviewed/merged soon!

[najikahalsema]

Looks good to me!