docs(swatch): adding swatch documentation (#5673)

* docs(swatch): adding swatch documentation

* docs(swatch): adding suggested changes

---------

Co-authored-by: Rajdeep Chandra <[email protected]>

Author: aramos-adobe

packages/swatch/README.md

@@ -1,4 +1,4 @@
-## Description
+## Overview
 
 An `<sp-swatch>` shows a small sample of a fill — such as a color, gradient, texture, or material — that is intended to be applied to an object.
 
@@ -7,23 +7,25 @@ An `<sp-swatch>` shows a small sample of a fill — such as a color, gradient, t
 [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/swatch?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/swatch)
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/swatch?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/swatch)
 
-```
+```bash
 yarn add @spectrum-web-components/swatch
 ```
 
 Import the side effectful registration of `<sp-swatch>` via:
 
-```
+```js
 import '@spectrum-web-components/swatch/sp-swatch.js';
 ```
 
 When looking to leverage the `Swatch` base class as a type and/or for extension purposes, do so via:
 
-```
+```js
 import { Swatch } from '@spectrum-web-components/swatch';
 ```
 
-## Sizes
+### Options
+
+#### Sizes
 
 <sp-tabs selected="m" auto label="Size Attribute Options">
 <sp-tab value="xs">Extra Small</sp-tab>
@@ -156,11 +158,13 @@ import { Swatch } from '@spectrum-web-components/swatch';
 </sp-tab-panel>
 </sp-tabs>
 
-## Modifying attributes
+#### Variants
 
 An `<sp-swatch>` element can be modified by the following attributes/properties to customize its delivery as desired for your use case: `border`, `color`, `disabled`, `mixedValue` (accepted as the `mixed-value` attribute), `nothing`, `rounding`, and `shape`. Use these in concert with each other for a variety of final visual deliveries.
 
-### Border
+<sp-tabs selected="border" auto label="Variant Options">
+<sp-tab value="border">Border</sp-tab>
+<sp-tab-panel value="border">
 
 The `border` attribute/property is not required and when applied accepts the values of `none` or `light`.
 
@@ -172,7 +176,9 @@ The `border` attribute/property is not required and when applied accepts the val
 </sp-swatch-group>
 ```
 
-### Color
+</sp-tab-panel>
+<sp-tab value="color">Color</sp-tab>
+<sp-tab-panel value="color">
 
 The `color` attribute/property determines the color value that the `<sp-swatch>` element will deliver.
 
@@ -184,19 +190,9 @@ The `color` attribute/property determines the color value that the `<sp-swatch>`
 </sp-swatch-group>
 ```
 
-### Disabled
-
-The `disabled` attribute/property determines prevents interaction on the `<sp-swatch>` element.
-
-```html
-<sp-swatch-group>
-    <sp-swatch disabled color="rgb(255 0 0 / 0.7)"></sp-swatch>
-    <sp-swatch disabled color="orange"></sp-swatch>
-    <sp-swatch disabled color="var(--spectrum-magenta-500)"></sp-swatch>
-</sp-swatch-group>
-```
-
-### Mixed value
+</sp-tab-panel>
+<sp-tab value="mixed-value">Mixed Value</sp-tab>
+<sp-tab-panel value="mixed-value">
 
 The `mixed-value` attribute and `mixedValue` property outline when an `<sp-swatch>` element represents more than one color.
 
@@ -210,7 +206,9 @@ The `mixed-value` attribute and `mixedValue` property outline when an `<sp-swatc
 
 Please note that the `aria-checked="mixed"` value only applies when the swatch is in a group with `selects="multiple"`
 
-### Nothing
+</sp-tab-panel>
+<sp-tab value="nothing">Nothing</sp-tab>
+<sp-tab-panel value="nothing">
 
 The `nothing` attribute/property outlines that the `<sp-swatch>` represents no color or that it represents "transparent".
 
@@ -222,7 +220,9 @@ The `nothing` attribute/property outlines that the `<sp-swatch>` represents no c
 </sp-swatch-group>
 ```
 
-### Rounding
+</sp-tab-panel>
+<sp-tab value="rounding">Rounding</sp-tab>
+<sp-tab-panel value="rounding">
 
 The `rounding` attribute/property is not required and when applied accepts the values of `none` or `full`.
 
@@ -234,7 +234,9 @@ The `rounding` attribute/property is not required and when applied accepts the v
 </sp-swatch-group>
 ```
 
-### Shape
+</sp-tab-panel>
+<sp-tab value="shape">Shape</sp-tab>
+<sp-tab-panel value="shape">
 
 The `shape` attribute/property is not required and when applied accepts the values of `rectangle`.
 
@@ -244,3 +246,33 @@ The `shape` attribute/property is not required and when applied accepts the valu
     <sp-swatch color="rgb(255 0 0 / 0.7)" shape="rectangle"></sp-swatch>
 </sp-swatch-group>
 ```
+
+</sp-tab-panel>
+</sp-tabs>
+
+### States
+
+#### Disabled
+
+The `disabled` attribute/property determines prevents interaction on the `<sp-swatch>` element.
+
+```html
+<sp-swatch-group>
+    <sp-swatch disabled color="rgb(255 0 0 / 0.7)"></sp-swatch>
+    <sp-swatch disabled color="orange"></sp-swatch>
+    <sp-swatch disabled color="var(--spectrum-magenta-500)"></sp-swatch>
+</sp-swatch-group>
+```
+
+### Accessibility
+
+#### Best practices
+
+- Ensure swatches have sufficient color contrast for visibility.
+- Verify that swatches are appropriately labeled for screen readers.
+
+#### Keyboard navigation
+
+- `Tab`: Move focus to the next focusable element
+- `Arrow keys`: Navigate between swatches in the group and move the focus indicator
+- `Enter` or `Space`: Select the focused swatch