Fix Storybook Axe issues (#3555)

* Fix Storybook axe issues, docs typos

* test(vrt): update snapshots

---------

Co-authored-by: TylerJDev <TylerJDev@users.noreply.github.com>

docs/content/Octicon.mdx

@@ -10,9 +10,12 @@ import data from '../../src/Octicon/Octicon.docs.json'
 
 ## Example
 
-```jsx live
+```js
 import {CheckIcon, XIcon} from '@primer/octicons-react'
-;<>
+```
+
+```jsx live
+<>
   <Octicon icon={CheckIcon} size={32} color="success.fg" sx={{mr: 2}} />
   <Octicon icon={XIcon} size={32} color="danger.fg" />
 </>

src/Button/Button.dev.stories.tsx

@@ -41,10 +41,10 @@ export const TestSxProp = () => {
       <Button
         size="medium"
         sx={{
-          color: 'deeppink',
+          color: 'firebrick',
         }}
       >
-        Medium Pink
+        Medium Red
       </Button>
       <Button
         size="small"
@@ -61,14 +61,14 @@ export const TestSxProp = () => {
             },
           },
           '@media (min-width: 1440)': {
-            color: 'deeppink',
+            color: 'firebrick',
           },
         }}
       >
-        Pink
+        Red
       </Button>
-      <Button leadingIcon={SearchIcon} variant="invisible" sx={{color: 'deeppink'}}>
-        Pink
+      <Button leadingIcon={SearchIcon} variant="invisible" sx={{color: 'firebrick'}}>
+        Red
       </Button>
       <Button
         size="small"

src/CheckboxGroup/CheckboxGroup.docs.json

@@ -64,7 +64,7 @@
       ]
     },
     {
-      "name": "CheckboxGroup.Description",
+      "name": "CheckboxGroup.Caption",
       "props": [
         {
           "name": "children",

src/Token/Token.features.stories.tsx

@@ -152,7 +152,7 @@ export const IssueLabelTokenCustomColors = () => {
           text="Link"
           fillColor="#0366d6"
         />
-        <IssueLabelToken as="button" onClick={action('clicked')} text="Button" fillColor="deeppink" />
+        <IssueLabelToken as="button" onClick={action('clicked')} text="Button" fillColor="lightpink" />
         <IssueLabelToken as="span" tabIndex={0} onFocus={action('focused')} text="Focusable Span" fillColor="coral" />
       </Box>
       <h3>Color examples</h3>
@@ -276,7 +276,7 @@ export const IssueLabelTokenCustomColors = () => {
           as="a"
           href="/?path=/story/components-token-features--issue-label-token-custom-colors"
           text="💡 Light"
-          fillColor="#f2107d"
+          fillColor="#E40C74"
         />
       </Box>
     </Box>

src/stories/useFocusZone.stories.tsx

@@ -402,16 +402,23 @@ export const SpecialSituations = () => {
           borderStyle="solid"
           borderRadius={2}
         >
-          <strong>Bound keys: Up, Down, PageUp, PageDown, W, S, J, K, Home, End, Tab</strong>
+          <strong id="focus-label">Bound keys: Up, Down, PageUp, PageDown, W, S, J, K, Home, End, Tab</strong>
           <Box display="flex" flexDirection="column" alignItems="flex-start">
-            <input style={{width: '250px'}} type="text" defaultValue="Printable characters won't move focus" />
+            <input
+              style={{width: '250px'}}
+              type="text"
+              defaultValue="Printable characters won't move focus"
+              aria-labelledby="focus-label"
+            />
+
             <MarginButton>Regular button</MarginButton>
-            <select>
+            <select aria-labelledby="focus-label">
               <option>Down arrow invokes dropdown</option>
               <option>Unless Cmd (mac)/Ctrl (Windows)</option>
               <option>Is held</option>
             </select>
             <textarea
+              aria-labelledby="focus-label"
               style={{width: '250px', height: '95px'}}
               defaultValue="Up/Down only works when at beginning/end. PageUp and PageDown completely disabled. Printable characters will never move focus."
             ></textarea>
@@ -426,11 +433,14 @@ export const SpecialSituations = () => {
           borderStyle="solid"
           borderRadius={2}
         >
-          <strong>Use Left Arrow and Right Arrow to move focus within this box. Focus is circular.</strong>
+          <label htmlFor="focus-input">
+            <strong>Use Left Arrow and Right Arrow to move focus within this box. Focus is circular.</strong>
+          </label>
 
           <Box display="flex" flexDirection="row" alignItems="center">
             <MarginButton>Grapefruit</MarginButton>
             <input
+              id="focus-input"
               style={{width: '300px'}}
               type="text"
               defaultValue="Left/Right only work at beginning/end of input."
@@ -615,13 +625,16 @@ export const ActiveDescendant = () => {
         <MarginButton>Banana</MarginButton>
         <MarginButton>Cantaloupe</MarginButton>
         <Box borderColor="gray.5" m={4} p={4} borderWidth="1px" borderStyle="solid" borderRadius={2}>
-          <strong>Bound keys: Arrow Up and Arrow Down</strong>
+          <label htmlFor="focus-input">
+            <strong>Bound keys: Arrow Up and Arrow Down</strong>
+          </label>
           <Box display="flex" flexDirection="column" alignItems="flex-start">
             <input
               ref={controllingElementRef as React.RefObject<HTMLInputElement>}
               type="text"
               defaultValue="Focus remains here."
               aria-controls="list"
+              id="focus-input"
             />
             <Box
               display="flex"