diff --git a/examples/stories/src/stories/VariantButton/VariantButton.stories.tsx b/examples/stories/src/stories/VariantButton/VariantButton.stories.tsx
index 1f0c3f38f..9579f2dc4 100644
--- a/examples/stories/src/stories/VariantButton/VariantButton.stories.tsx
+++ b/examples/stories/src/stories/VariantButton/VariantButton.stories.tsx
@@ -13,7 +13,7 @@ export default {
     figma: [
       {
         url: 'https://www.figma.com/file/vgf0guEmC5IKtjHJKkRVSr',
-        'aria-label': 'figma design file',
+        title: 'figma design file',
       },
     ],
     notes: {
diff --git a/plugins/addon-images/src/ImagesBlock/__snapshots__/ImagesBlock.test.ts.snap b/plugins/addon-images/src/ImagesBlock/__snapshots__/ImagesBlock.test.ts.snap
index 1168121da..614ff70bd 100644
--- a/plugins/addon-images/src/ImagesBlock/__snapshots__/ImagesBlock.test.ts.snap
+++ b/plugins/addon-images/src/ImagesBlock/__snapshots__/ImagesBlock.test.ts.snap
@@ -13,7 +13,7 @@ exports[`ImagesBlock customConfigProps snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="Custom title here"
+          aria-label="navigate to Custom title here section"
           class="css-1ptrway-LinkHeading"
           data-id="custom-title-here"
           data-level="4"
diff --git a/plugins/addon-notes/src/NotesBlock/__snapshots__/NotesBlock.test.ts.snap b/plugins/addon-notes/src/NotesBlock/__snapshots__/NotesBlock.test.ts.snap
index 4526d91bf..261411ddf 100644
--- a/plugins/addon-notes/src/NotesBlock/__snapshots__/NotesBlock.test.ts.snap
+++ b/plugins/addon-notes/src/NotesBlock/__snapshots__/NotesBlock.test.ts.snap
@@ -13,7 +13,7 @@ exports[`NotesBlock customConfigProps snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="Custom title here"
+          aria-label="navigate to Custom title here section"
           class="css-1ptrway-LinkHeading"
           data-id="custom-title-here"
           data-level="4"
@@ -52,7 +52,7 @@ exports[`NotesBlock customConfigProps snapshot 1`] = `
           class="css-xhp9da"
         >
           <a
-            aria-label="Component  design notes"
+            aria-label="navigate to Component  design notes section"
             class="css-1aob0xw-LinkHeading"
             data-id="component-design-notes"
             data-level="2"
@@ -135,7 +135,7 @@ exports[`NotesBlock customItems snapshot 1`] = `
               class="css-xhp9da"
             >
               <a
-                aria-label="Introduction"
+                aria-label="navigate to Introduction section"
                 class="css-6ugsdx-LinkHeading"
                 data-id="introduction"
                 data-level="1"
@@ -238,7 +238,7 @@ exports[`NotesBlock overview snapshot 1`] = `
               class="css-xhp9da"
             >
               <a
-                aria-label="Component  design notes"
+                aria-label="navigate to Component  design notes section"
                 class="css-1aob0xw-LinkHeading"
                 data-id="component-design-notes"
                 data-level="2"
diff --git a/plugins/addon-stats/src/ui/AttributeUsage/__snapshots__/AttributeUsage.test.ts.snap b/plugins/addon-stats/src/ui/AttributeUsage/__snapshots__/AttributeUsage.test.ts.snap
index 049ebe354..5709ba1f7 100644
--- a/plugins/addon-stats/src/ui/AttributeUsage/__snapshots__/AttributeUsage.test.ts.snap
+++ b/plugins/addon-stats/src/ui/AttributeUsage/__snapshots__/AttributeUsage.test.ts.snap
@@ -13,7 +13,7 @@ exports[`AttributeUsage overview snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="Attributes usage"
+          aria-label="navigate to Attributes usage section"
           class="css-walqom-LinkHeading"
           data-id="attributes-usage"
           data-level="3"
@@ -44,7 +44,7 @@ exports[`AttributeUsage overview snapshot 1`] = `
           >
             Attributes usage
             <a
-              aria-label="Collapse this block"
+              aria-expanded="true"
               class="css-1t48u3b-BlockContainer"
             >
               <span
diff --git a/plugins/addon-stats/src/ui/AttributesUsageDetails/__snapshots__/AttributesUsageDetails.test.ts.snap b/plugins/addon-stats/src/ui/AttributesUsageDetails/__snapshots__/AttributesUsageDetails.test.ts.snap
index 42406e104..2d6e61363 100644
--- a/plugins/addon-stats/src/ui/AttributesUsageDetails/__snapshots__/AttributesUsageDetails.test.ts.snap
+++ b/plugins/addon-stats/src/ui/AttributesUsageDetails/__snapshots__/AttributesUsageDetails.test.ts.snap
@@ -13,7 +13,7 @@ exports[`AttributesUsageDetails overview snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="ref"
+          aria-label="navigate to ref section"
           class="css-walqom-LinkHeading"
           data-id="attribute-ref"
           data-level="3"
@@ -44,7 +44,7 @@ exports[`AttributesUsageDetails overview snapshot 1`] = `
           >
             ref
             <a
-              aria-label="Collapse this block"
+              aria-expanded="true"
               class="css-1t48u3b-BlockContainer"
             >
               <span
diff --git a/plugins/addon-stats/src/ui/AttributesUsageList/__snapshots__/AttributesUsageList.test.ts.snap b/plugins/addon-stats/src/ui/AttributesUsageList/__snapshots__/AttributesUsageList.test.ts.snap
index 343b1b41e..b5dbd8e97 100644
--- a/plugins/addon-stats/src/ui/AttributesUsageList/__snapshots__/AttributesUsageList.test.ts.snap
+++ b/plugins/addon-stats/src/ui/AttributesUsageList/__snapshots__/AttributesUsageList.test.ts.snap
@@ -13,7 +13,7 @@ exports[`AttributesUsageList overview snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="ref"
+          aria-label="navigate to ref section"
           class="css-walqom-LinkHeading"
           data-id="attribute-ref"
           data-level="3"
@@ -44,7 +44,7 @@ exports[`AttributesUsageList overview snapshot 1`] = `
           >
             ref
             <a
-              aria-label="Collapse this block"
+              aria-expanded="true"
               class="css-1t48u3b-BlockContainer"
             >
               <span
@@ -207,7 +207,7 @@ exports[`AttributesUsageList overview snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="id"
+          aria-label="navigate to id section"
           class="css-walqom-LinkHeading"
           data-id="attribute-id"
           data-level="3"
@@ -238,7 +238,7 @@ exports[`AttributesUsageList overview snapshot 1`] = `
           >
             id
             <a
-              aria-label="Collapse this block"
+              aria-expanded="true"
               class="css-1t48u3b-BlockContainer"
             >
               <span
diff --git a/plugins/addon-stats/src/ui/ComponentUsage/__snapshots__/ComponentUsage.test.ts.snap b/plugins/addon-stats/src/ui/ComponentUsage/__snapshots__/ComponentUsage.test.ts.snap
index 7d5e502d1..38b8717cf 100644
--- a/plugins/addon-stats/src/ui/ComponentUsage/__snapshots__/ComponentUsage.test.ts.snap
+++ b/plugins/addon-stats/src/ui/ComponentUsage/__snapshots__/ComponentUsage.test.ts.snap
@@ -13,7 +13,7 @@ exports[`ComponentUsage overview snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="Components usage"
+          aria-label="navigate to Components usage section"
           class="css-walqom-LinkHeading"
           data-id="components-usage"
           data-level="3"
@@ -44,7 +44,7 @@ exports[`ComponentUsage overview snapshot 1`] = `
           >
             Components usage
             <a
-              aria-label="Collapse this block"
+              aria-expanded="true"
               class="css-1t48u3b-BlockContainer"
             >
               <span
diff --git a/plugins/addon-stats/src/ui/ComponentUsageDetails/__snapshots__/ComponentUsageDetails.test.ts.snap b/plugins/addon-stats/src/ui/ComponentUsageDetails/__snapshots__/ComponentUsageDetails.test.ts.snap
index c82fce89f..e4317c604 100644
--- a/plugins/addon-stats/src/ui/ComponentUsageDetails/__snapshots__/ComponentUsageDetails.test.ts.snap
+++ b/plugins/addon-stats/src/ui/ComponentUsageDetails/__snapshots__/ComponentUsageDetails.test.ts.snap
@@ -13,7 +13,7 @@ exports[`ComponentUsageDetails overview snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="ArrowButton"
+          aria-label="navigate to ArrowButton section"
           class="css-walqom-LinkHeading"
           data-id="attribute-arrowbutton"
           data-level="3"
@@ -44,7 +44,7 @@ exports[`ComponentUsageDetails overview snapshot 1`] = `
           >
             ArrowButton
             <a
-              aria-label="Collapse this block"
+              aria-expanded="true"
               class="css-1t48u3b-BlockContainer"
             >
               <span
diff --git a/plugins/addon-stats/src/ui/ComponentUsageList/__snapshots__/ComponentUsageList.test.ts.snap b/plugins/addon-stats/src/ui/ComponentUsageList/__snapshots__/ComponentUsageList.test.ts.snap
index 3fc4addbd..073931ef3 100644
--- a/plugins/addon-stats/src/ui/ComponentUsageList/__snapshots__/ComponentUsageList.test.ts.snap
+++ b/plugins/addon-stats/src/ui/ComponentUsageList/__snapshots__/ComponentUsageList.test.ts.snap
@@ -13,7 +13,7 @@ exports[`ComponentUsageList overview snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="Button"
+          aria-label="navigate to Button section"
           class="css-walqom-LinkHeading"
           data-id="attribute-button"
           data-level="3"
@@ -44,7 +44,7 @@ exports[`ComponentUsageList overview snapshot 1`] = `
           >
             Button
             <a
-              aria-label="Collapse this block"
+              aria-expanded="true"
               class="css-1t48u3b-BlockContainer"
             >
               <span
diff --git a/plugins/figma-embed/src/FigmaEmbedBlock/FigmaEmbedBlock.stories.tsx b/plugins/figma-embed/src/FigmaEmbedBlock/FigmaEmbedBlock.stories.tsx
index 7b274dee4..9168b2d1f 100644
--- a/plugins/figma-embed/src/FigmaEmbedBlock/FigmaEmbedBlock.stories.tsx
+++ b/plugins/figma-embed/src/FigmaEmbedBlock/FigmaEmbedBlock.stories.tsx
@@ -32,12 +32,12 @@ export const customURLS: Example = () => {
           {
             url:
               'https://www.figma.com/file/hS1sLjYq49vjnKXhwGgHwg/Navigation-UI-design-components-Community?node-id=1%3A2309',
-            'aria-label': 'design document 1',
+            title: 'design document 1',
           },
           {
             url:
               'https://www.figma.com/file/LtgbR2mbVPbQTNDfDQxbKL/Atanas-Stoyanov-s-Team-Colors?node-id=0%3A1',
-            'aria-label': 'design document 2',
+            title: 'design document 2',
           },
         ]}
       />
@@ -67,7 +67,7 @@ export const customIFrameProps: Example = () => {
           {
             url:
               'https://www.figma.com/file/vgf0guEmC5IKtjHJKkRVSr/Button?node-id=0%3A1',
-            'aria-label': 'figma design file',
+            title: 'figma design file',
             height: '300',
           },
         ]}
diff --git a/plugins/figma-embed/src/FigmaEmbedBlock/__snapshots__/FigmaEmbedBlock.test.ts.snap b/plugins/figma-embed/src/FigmaEmbedBlock/__snapshots__/FigmaEmbedBlock.test.ts.snap
index c4e65b2d1..a257df67f 100644
--- a/plugins/figma-embed/src/FigmaEmbedBlock/__snapshots__/FigmaEmbedBlock.test.ts.snap
+++ b/plugins/figma-embed/src/FigmaEmbedBlock/__snapshots__/FigmaEmbedBlock.test.ts.snap
@@ -21,10 +21,10 @@ exports[`FigmaEmbedBlock customConfigProps snapshot 1`] = `
       <div>
         <iframe
           allowfullscreen=""
-          aria-label="figma design file"
           class="css-6u5w61"
           height="450"
           src="https://www.figma.com/embed?embed_host=component-controls&url=https://www.figma.com/file/vgf0guEmC5IKtjHJKkRVSr/Button?node-id=0%3A1"
+          title="figma design file"
           width="100%"
         />
       </div>
@@ -54,10 +54,10 @@ exports[`FigmaEmbedBlock customIFrameProps snapshot 1`] = `
       <div>
         <iframe
           allowfullscreen=""
-          aria-label="figma design file"
           class="css-6u5w61"
           height="300"
           src="https://www.figma.com/embed?embed_host=component-controls&url=https://www.figma.com/file/vgf0guEmC5IKtjHJKkRVSr/Button?node-id=0%3A1"
+          title="figma design file"
           width="100%"
         />
       </div>
@@ -87,18 +87,18 @@ exports[`FigmaEmbedBlock customURLS snapshot 1`] = `
       <div>
         <iframe
           allowfullscreen=""
-          aria-label="design document 1"
           class="css-6u5w61"
           height="450"
           src="https://www.figma.com/embed?embed_host=component-controls&url=https://www.figma.com/file/hS1sLjYq49vjnKXhwGgHwg/Navigation-UI-design-components-Community?node-id=1%3A2309"
+          title="design document 1"
           width="100%"
         />
         <iframe
           allowfullscreen=""
-          aria-label="design document 2"
           class="css-6u5w61"
           height="450"
           src="https://www.figma.com/embed?embed_host=component-controls&url=https://www.figma.com/file/LtgbR2mbVPbQTNDfDQxbKL/Atanas-Stoyanov-s-Team-Colors?node-id=0%3A1"
+          title="design document 2"
           width="100%"
         />
       </div>
@@ -127,10 +127,10 @@ exports[`FigmaEmbedBlock noFullScreen snapshot 1`] = `
     >
       <div>
         <iframe
-          aria-label="figma design file"
           class="css-6u5w61"
           height="450"
           src="https://www.figma.com/embed?embed_host=component-controls&url=https://www.figma.com/file/vgf0guEmC5IKtjHJKkRVSr/Button?node-id=0%3A1"
+          title="figma design file"
           width="100%"
         />
       </div>
@@ -160,10 +160,10 @@ exports[`FigmaEmbedBlock overview snapshot 1`] = `
       <div>
         <iframe
           allowfullscreen=""
-          aria-label="figma design file"
           class="css-6u5w61"
           height="450"
           src="https://www.figma.com/embed?embed_host=component-controls&url=https://www.figma.com/file/vgf0guEmC5IKtjHJKkRVSr/Button?node-id=0%3A1"
+          title="figma design file"
           width="100%"
         />
       </div>
diff --git a/ui/app/src/Sidebar/__snapshots__/Sidebar.test.ts.snap b/ui/app/src/Sidebar/__snapshots__/Sidebar.test.ts.snap
index c146f2f99..14156f695 100644
--- a/ui/app/src/Sidebar/__snapshots__/Sidebar.test.ts.snap
+++ b/ui/app/src/Sidebar/__snapshots__/Sidebar.test.ts.snap
@@ -48,6 +48,7 @@ exports[`Sidebar overview snapshot 1`] = `
                   class="css-162ewbd"
                 >
                   <button
+                    aria-expanded="true"
                     class="css-t9fq0h"
                   >
                     <div
@@ -68,7 +69,6 @@ exports[`Sidebar overview snapshot 1`] = `
                         class="css-vthntz"
                       >
                         <div
-                          aria-label="collapse items"
                           class="css-aqscwe"
                         >
                           <svg
diff --git a/ui/app/src/SidebarsPage/__snapshots__/SidebarsPage.test.ts.snap b/ui/app/src/SidebarsPage/__snapshots__/SidebarsPage.test.ts.snap
index f045df2bb..5fd53c2bc 100644
--- a/ui/app/src/SidebarsPage/__snapshots__/SidebarsPage.test.ts.snap
+++ b/ui/app/src/SidebarsPage/__snapshots__/SidebarsPage.test.ts.snap
@@ -224,7 +224,7 @@ exports[`SidebarsPage overview snapshot 1`] = `
                       class="css-xhp9da"
                     >
                       <a
-                        aria-label="Component"
+                        aria-label="navigate to Component section"
                         class="css-walqom-LinkHeading"
                         data-id="component"
                         data-level="3"
@@ -255,7 +255,7 @@ exports[`SidebarsPage overview snapshot 1`] = `
                         >
                           Component
                           <a
-                            aria-label="Collapse this block"
+                            aria-expanded="true"
                             class="css-1t48u3b-BlockContainer"
                           >
                             <span
@@ -462,7 +462,7 @@ exports[`SidebarsPage overview snapshot 1`] = `
                       class="css-xhp9da"
                     >
                       <a
-                        aria-label="story"
+                        aria-label="navigate to story section"
                         class="css-walqom-LinkHeading"
                         data-id="playground-id-of-story"
                         data-level="3"
@@ -493,7 +493,7 @@ exports[`SidebarsPage overview snapshot 1`] = `
                         >
                           story
                           <a
-                            aria-label="Collapse this block"
+                            aria-expanded="true"
                             class="css-1t48u3b-BlockContainer"
                           >
                             <span
@@ -731,7 +731,7 @@ exports[`SidebarsPage overview snapshot 1`] = `
                       class="css-xhp9da"
                     >
                       <a
-                        aria-label="External dependencies"
+                        aria-label="navigate to External dependencies section"
                         class="css-walqom-LinkHeading"
                         data-id="external-dependencies"
                         data-level="3"
@@ -762,7 +762,7 @@ exports[`SidebarsPage overview snapshot 1`] = `
                         >
                           External dependencies
                           <a
-                            aria-label="Collapse this block"
+                            aria-expanded="true"
                             class="css-1t48u3b-BlockContainer"
                           >
                             <span
@@ -1059,7 +1059,7 @@ exports[`SidebarsPage overview snapshot 1`] = `
                       class="css-xhp9da"
                     >
                       <a
-                        aria-label="Internal dependencies"
+                        aria-label="navigate to Internal dependencies section"
                         class="css-walqom-LinkHeading"
                         data-id="internal-dependencies"
                         data-level="3"
@@ -1090,7 +1090,7 @@ exports[`SidebarsPage overview snapshot 1`] = `
                         >
                           Internal dependencies
                           <a
-                            aria-label="Collapse this block"
+                            aria-expanded="true"
                             class="css-1t48u3b-BlockContainer"
                           >
                             <span
@@ -1325,7 +1325,7 @@ exports[`SidebarsPage overview snapshot 1`] = `
                       class="css-xhp9da"
                     >
                       <a
-                        aria-label="Component JSX"
+                        aria-label="navigate to Component JSX section"
                         class="css-walqom-LinkHeading"
                         data-id="component-jsx"
                         data-level="3"
@@ -1356,7 +1356,7 @@ exports[`SidebarsPage overview snapshot 1`] = `
                         >
                           Component JSX
                           <a
-                            aria-label="Collapse this block"
+                            aria-expanded="true"
                             class="css-1t48u3b-BlockContainer"
                           >
                             <span
@@ -1588,7 +1588,7 @@ exports[`SidebarsPage overview snapshot 1`] = `
                       class="css-xhp9da"
                     >
                       <a
-                        aria-label="Stories"
+                        aria-label="navigate to Stories section"
                         class="css-walqom-LinkHeading"
                         data-id="stories"
                         data-level="3"
@@ -1619,7 +1619,7 @@ exports[`SidebarsPage overview snapshot 1`] = `
                         >
                           Stories
                           <a
-                            aria-label="Collapse this block"
+                            aria-expanded="true"
                             class="css-1t48u3b-BlockContainer"
                           >
                             <span
@@ -1664,7 +1664,7 @@ exports[`SidebarsPage overview snapshot 1`] = `
                             class="css-xhp9da"
                           >
                             <a
-                              aria-label="button"
+                              aria-label="navigate to button section"
                               class="css-1ptrway-LinkHeading"
                               data-id="button"
                               data-level="4"
@@ -1893,7 +1893,7 @@ exports[`SidebarsPage overview snapshot 1`] = `
                             class="css-xhp9da"
                           >
                             <a
-                              aria-label="controls"
+                              aria-label="navigate to controls section"
                               class="css-1ptrway-LinkHeading"
                               data-id="controls"
                               data-level="4"
@@ -2143,7 +2143,7 @@ exports[`SidebarsPage overview snapshot 1`] = `
                             class="css-xhp9da"
                           >
                             <a
-                              aria-label="story"
+                              aria-label="navigate to story section"
                               class="css-1ptrway-LinkHeading"
                               data-id="story"
                               data-level="4"
diff --git a/ui/blocks/src/ComponentSource/__snapshots__/ComponentSource.test.ts.snap b/ui/blocks/src/ComponentSource/__snapshots__/ComponentSource.test.ts.snap
index f629fb521..e4e6cba51 100644
--- a/ui/blocks/src/ComponentSource/__snapshots__/ComponentSource.test.ts.snap
+++ b/ui/blocks/src/ComponentSource/__snapshots__/ComponentSource.test.ts.snap
@@ -13,7 +13,7 @@ exports[`ComponentSource customTitle snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="My Story Title"
+          aria-label="navigate to My Story Title section"
           class="css-walqom-LinkHeading"
           data-id="my-story-title"
           data-level="3"
@@ -44,7 +44,7 @@ exports[`ComponentSource customTitle snapshot 1`] = `
           >
             My Story Title
             <a
-              aria-label="Collapse this block"
+              aria-expanded="true"
               class="css-1t48u3b-BlockContainer"
             >
               <span
@@ -255,7 +255,7 @@ exports[`ComponentSource noComponent snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="Component"
+          aria-label="navigate to Component section"
           class="css-walqom-LinkHeading"
           data-id="component"
           data-level="3"
@@ -286,7 +286,7 @@ exports[`ComponentSource noComponent snapshot 1`] = `
           >
             Component
             <a
-              aria-label="Collapse this block"
+              aria-expanded="true"
               class="css-1t48u3b-BlockContainer"
             >
               <span
@@ -497,7 +497,7 @@ exports[`ComponentSource notCollapsible snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="ArrowButton"
+          aria-label="navigate to ArrowButton section"
           class="css-1ptrway-LinkHeading"
           data-id="arrowbutton"
           data-level="4"
@@ -1006,7 +1006,7 @@ exports[`ComponentSource title snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="ArrowButton"
+          aria-label="navigate to ArrowButton section"
           class="css-walqom-LinkHeading"
           data-id="arrowbutton"
           data-level="3"
@@ -1037,7 +1037,7 @@ exports[`ComponentSource title snapshot 1`] = `
           >
             ArrowButton
             <a
-              aria-label="Collapse this block"
+              aria-expanded="true"
               class="css-1t48u3b-BlockContainer"
             >
               <span
diff --git a/ui/blocks/src/Playground/__snapshots__/Playground.test.ts.snap b/ui/blocks/src/Playground/__snapshots__/Playground.test.ts.snap
index f0faa46f8..5bb552c0c 100644
--- a/ui/blocks/src/Playground/__snapshots__/Playground.test.ts.snap
+++ b/ui/blocks/src/Playground/__snapshots__/Playground.test.ts.snap
@@ -14,7 +14,7 @@ exports[`Playground child snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="My donut example "
+          aria-label="navigate to My donut example  section"
           class="css-walqom-LinkHeading"
           data-id="my-donut-example-"
           data-level="3"
@@ -45,7 +45,7 @@ exports[`Playground child snapshot 1`] = `
           >
             My donut example 
             <a
-              aria-label="Collapse this block"
+              aria-expanded="true"
               class="css-1t48u3b-BlockContainer"
             >
               <span
@@ -258,7 +258,7 @@ exports[`Playground customTitle snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="Custom playground title"
+          aria-label="navigate to Custom playground title section"
           class="css-walqom-LinkHeading"
           data-id="custom-playground-title"
           data-level="3"
@@ -289,7 +289,7 @@ exports[`Playground customTitle snapshot 1`] = `
           >
             Custom playground title
             <a
-              aria-label="Collapse this block"
+              aria-expanded="true"
               class="css-1t48u3b-BlockContainer"
             >
               <span
@@ -1891,7 +1891,7 @@ exports[`Playground multiChild snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="Multiple donuts"
+          aria-label="navigate to Multiple donuts section"
           class="css-walqom-LinkHeading"
           data-id="multiple-donuts"
           data-level="3"
@@ -1922,7 +1922,7 @@ exports[`Playground multiChild snapshot 1`] = `
           >
             Multiple donuts
             <a
-              aria-label="Collapse this block"
+              aria-expanded="true"
               class="css-1t48u3b-BlockContainer"
             >
               <span
@@ -3123,7 +3123,7 @@ exports[`Playground title snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="story"
+          aria-label="navigate to story section"
           class="css-walqom-LinkHeading"
           data-id="playground-id-of-story"
           data-level="3"
@@ -3154,7 +3154,7 @@ exports[`Playground title snapshot 1`] = `
           >
             story
             <a
-              aria-label="Collapse this block"
+              aria-expanded="true"
               class="css-1t48u3b-BlockContainer"
             >
               <span
diff --git a/ui/blocks/src/PropsTable/__snapshots__/PropsTable.test.ts.snap b/ui/blocks/src/PropsTable/__snapshots__/PropsTable.test.ts.snap
index 027e92290..40298e39e 100644
--- a/ui/blocks/src/PropsTable/__snapshots__/PropsTable.test.ts.snap
+++ b/ui/blocks/src/PropsTable/__snapshots__/PropsTable.test.ts.snap
@@ -334,7 +334,7 @@ exports[`PropsTable customTitle snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="Custom Props Table Title"
+          aria-label="navigate to Custom Props Table Title section"
           class="css-walqom-LinkHeading"
           data-id="custom-props-table-title"
           data-level="3"
@@ -365,7 +365,7 @@ exports[`PropsTable customTitle snapshot 1`] = `
           >
             Custom Props Table Title
             <a
-              aria-label="Collapse this block"
+              aria-expanded="true"
               class="css-1t48u3b-BlockContainer"
             >
               <span
@@ -1839,7 +1839,7 @@ exports[`PropsTable notCollapsible snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="ArrowButton"
+          aria-label="navigate to ArrowButton section"
           class="css-1ptrway-LinkHeading"
           data-id="arrowbutton"
           data-level="4"
@@ -3327,7 +3327,7 @@ exports[`PropsTable title snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="ArrowButton"
+          aria-label="navigate to ArrowButton section"
           class="css-walqom-LinkHeading"
           data-id="arrowbutton"
           data-level="3"
@@ -3358,7 +3358,7 @@ exports[`PropsTable title snapshot 1`] = `
           >
             ArrowButton
             <a
-              aria-label="Collapse this block"
+              aria-expanded="true"
               class="css-1t48u3b-BlockContainer"
             >
               <span
diff --git a/ui/blocks/src/Stories/__snapshots__/Stories.test.ts.snap b/ui/blocks/src/Stories/__snapshots__/Stories.test.ts.snap
index f96672f26..1f5d48708 100644
--- a/ui/blocks/src/Stories/__snapshots__/Stories.test.ts.snap
+++ b/ui/blocks/src/Stories/__snapshots__/Stories.test.ts.snap
@@ -14,7 +14,7 @@ exports[`Stories customTitle snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="My Story Title"
+          aria-label="navigate to My Story Title section"
           class="css-walqom-LinkHeading"
           data-id="my-story-title"
           data-level="3"
@@ -45,7 +45,7 @@ exports[`Stories customTitle snapshot 1`] = `
           >
             My Story Title
             <a
-              aria-label="Collapse this block"
+              aria-expanded="true"
               class="css-1t48u3b-BlockContainer"
             >
               <span
@@ -90,7 +90,7 @@ exports[`Stories customTitle snapshot 1`] = `
               class="css-xhp9da"
             >
               <a
-                aria-label="button"
+                aria-label="navigate to button section"
                 class="css-1ptrway-LinkHeading"
                 data-id="button"
                 data-level="4"
@@ -319,7 +319,7 @@ exports[`Stories customTitle snapshot 1`] = `
               class="css-xhp9da"
             >
               <a
-                aria-label="controls"
+                aria-label="navigate to controls section"
                 class="css-1ptrway-LinkHeading"
                 data-id="controls"
                 data-level="4"
@@ -569,7 +569,7 @@ exports[`Stories customTitle snapshot 1`] = `
               class="css-xhp9da"
             >
               <a
-                aria-label="story"
+                aria-label="navigate to story section"
                 class="css-1ptrway-LinkHeading"
                 data-id="story"
                 data-level="4"
@@ -806,7 +806,7 @@ exports[`Stories darkTheme snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="Stories"
+          aria-label="navigate to Stories section"
           class="css-walqom-LinkHeading"
           data-id="stories"
           data-level="3"
@@ -837,7 +837,7 @@ exports[`Stories darkTheme snapshot 1`] = `
           >
             Stories
             <a
-              aria-label="Collapse this block"
+              aria-expanded="true"
               class="css-1t48u3b-BlockContainer"
             >
               <span
@@ -882,7 +882,7 @@ exports[`Stories darkTheme snapshot 1`] = `
               class="css-xhp9da"
             >
               <a
-                aria-label="button"
+                aria-label="navigate to button section"
                 class="css-1ptrway-LinkHeading"
                 data-id="button"
                 data-level="4"
@@ -1111,7 +1111,7 @@ exports[`Stories darkTheme snapshot 1`] = `
               class="css-xhp9da"
             >
               <a
-                aria-label="controls"
+                aria-label="navigate to controls section"
                 class="css-1ptrway-LinkHeading"
                 data-id="controls"
                 data-level="4"
@@ -1361,7 +1361,7 @@ exports[`Stories darkTheme snapshot 1`] = `
               class="css-xhp9da"
             >
               <a
-                aria-label="story"
+                aria-label="navigate to story section"
                 class="css-1ptrway-LinkHeading"
                 data-id="story"
                 data-level="4"
@@ -1598,7 +1598,7 @@ exports[`Stories notCollapsible snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="Stories"
+          aria-label="navigate to Stories section"
           class="css-1ptrway-LinkHeading"
           data-id="stories"
           data-level="4"
@@ -1640,7 +1640,7 @@ exports[`Stories notCollapsible snapshot 1`] = `
           class="css-xhp9da"
         >
           <a
-            aria-label="button"
+            aria-label="navigate to button section"
             class="css-1ptrway-LinkHeading"
             data-id="button"
             data-level="4"
@@ -1869,7 +1869,7 @@ exports[`Stories notCollapsible snapshot 1`] = `
           class="css-xhp9da"
         >
           <a
-            aria-label="controls"
+            aria-label="navigate to controls section"
             class="css-1ptrway-LinkHeading"
             data-id="controls"
             data-level="4"
@@ -2119,7 +2119,7 @@ exports[`Stories notCollapsible snapshot 1`] = `
           class="css-xhp9da"
         >
           <a
-            aria-label="story"
+            aria-label="navigate to story section"
             class="css-1ptrway-LinkHeading"
             data-id="story"
             data-level="4"
@@ -2354,7 +2354,7 @@ exports[`Stories overview snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="Stories"
+          aria-label="navigate to Stories section"
           class="css-walqom-LinkHeading"
           data-id="stories"
           data-level="3"
@@ -2385,7 +2385,7 @@ exports[`Stories overview snapshot 1`] = `
           >
             Stories
             <a
-              aria-label="Collapse this block"
+              aria-expanded="true"
               class="css-1t48u3b-BlockContainer"
             >
               <span
@@ -2430,7 +2430,7 @@ exports[`Stories overview snapshot 1`] = `
               class="css-xhp9da"
             >
               <a
-                aria-label="button"
+                aria-label="navigate to button section"
                 class="css-1ptrway-LinkHeading"
                 data-id="button"
                 data-level="4"
@@ -2659,7 +2659,7 @@ exports[`Stories overview snapshot 1`] = `
               class="css-xhp9da"
             >
               <a
-                aria-label="controls"
+                aria-label="navigate to controls section"
                 class="css-1ptrway-LinkHeading"
                 data-id="controls"
                 data-level="4"
@@ -2909,7 +2909,7 @@ exports[`Stories overview snapshot 1`] = `
               class="css-xhp9da"
             >
               <a
-                aria-label="story"
+                aria-label="navigate to story section"
                 class="css-1ptrway-LinkHeading"
                 data-id="story"
                 data-level="4"
diff --git a/ui/blocks/src/Story/__snapshots__/Story.test.ts.snap b/ui/blocks/src/Story/__snapshots__/Story.test.ts.snap
index efae85276..4504c1c77 100644
--- a/ui/blocks/src/Story/__snapshots__/Story.test.ts.snap
+++ b/ui/blocks/src/Story/__snapshots__/Story.test.ts.snap
@@ -14,7 +14,7 @@ exports[`Story customTitle snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="My Story Title"
+          aria-label="navigate to My Story Title section"
           class="css-walqom-LinkHeading"
           data-id="my-story-title"
           data-level="3"
@@ -45,7 +45,7 @@ exports[`Story customTitle snapshot 1`] = `
           >
             My Story Title
             <a
-              aria-label="Collapse this block"
+              aria-expanded="true"
               class="css-1t48u3b-BlockContainer"
             >
               <span
@@ -211,7 +211,7 @@ exports[`Story notCollapsible snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="controls"
+          aria-label="navigate to controls section"
           class="css-1ptrway-LinkHeading"
           data-id="story-blocks-core-story-plain--controls"
           data-level="4"
@@ -357,7 +357,7 @@ exports[`Story title snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="controls"
+          aria-label="navigate to controls section"
           class="css-walqom-LinkHeading"
           data-id="story-blocks-core-story-plain--controls"
           data-level="3"
@@ -388,7 +388,7 @@ exports[`Story title snapshot 1`] = `
           >
             controls
             <a
-              aria-label="Collapse this block"
+              aria-expanded="true"
               class="css-1t48u3b-BlockContainer"
             >
               <span
diff --git a/ui/blocks/src/StoryConfig/__snapshots__/StoryConfig.test.ts.snap b/ui/blocks/src/StoryConfig/__snapshots__/StoryConfig.test.ts.snap
index 280329262..c43ef48b7 100644
--- a/ui/blocks/src/StoryConfig/__snapshots__/StoryConfig.test.ts.snap
+++ b/ui/blocks/src/StoryConfig/__snapshots__/StoryConfig.test.ts.snap
@@ -14,7 +14,7 @@ exports[`StoryConfig customTitle snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="Story configuration"
+          aria-label="navigate to Story configuration section"
           class="css-walqom-LinkHeading"
           data-id="story-configuration"
           data-level="3"
@@ -45,7 +45,7 @@ exports[`StoryConfig customTitle snapshot 1`] = `
           >
             Story configuration
             <a
-              aria-label="Collapse this block"
+              aria-expanded="true"
               class="css-1t48u3b-BlockContainer"
             >
               <span
@@ -1002,7 +1002,7 @@ exports[`StoryConfig notCollapsible snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="story"
+          aria-label="navigate to story section"
           class="css-1ptrway-LinkHeading"
           data-id="story-config-id-of-story"
           data-level="4"
@@ -2770,7 +2770,7 @@ exports[`StoryConfig theme snapshot 1`] = `
                   class="token property css-13aqjzy"
                   style="color: rgb(255, 157, 0);"
                 >
-                  "aria-label"
+                  "title"
                 </span>
                 <span
                   class="token operator css-13aqjzy"
@@ -4002,7 +4002,7 @@ exports[`StoryConfig themeSelector snapshot 1`] = `
                     <span
                       class="token property css-13aqjzy"
                     >
-                      "aria-label"
+                      "title"
                     </span>
                     <span
                       class="token operator css-13aqjzy"
diff --git a/ui/blocks/src/StorySource/__snapshots__/StorySource.test.ts.snap b/ui/blocks/src/StorySource/__snapshots__/StorySource.test.ts.snap
index dafefd452..22b096ca1 100644
--- a/ui/blocks/src/StorySource/__snapshots__/StorySource.test.ts.snap
+++ b/ui/blocks/src/StorySource/__snapshots__/StorySource.test.ts.snap
@@ -14,7 +14,7 @@ exports[`StorySource customTitle snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="Story source"
+          aria-label="navigate to Story source section"
           class="css-walqom-LinkHeading"
           data-id="story-source"
           data-level="3"
@@ -45,7 +45,7 @@ exports[`StorySource customTitle snapshot 1`] = `
           >
             Story source
             <a
-              aria-label="Collapse this block"
+              aria-expanded="true"
               class="css-1t48u3b-BlockContainer"
             >
               <span
@@ -338,7 +338,7 @@ exports[`StorySource notCollapsible snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="story"
+          aria-label="navigate to story section"
           class="css-1ptrway-LinkHeading"
           data-id="story-source-id-of-story"
           data-level="4"
diff --git a/ui/blocks/src/test/storyStore.tsx b/ui/blocks/src/test/storyStore.tsx
index d9a2addf9..a361655e1 100644
--- a/ui/blocks/src/test/storyStore.tsx
+++ b/ui/blocks/src/test/storyStore.tsx
@@ -833,7 +833,7 @@ Markdown **descripton** for *component*.
           {
             url:
               'https://www.figma.com/file/vgf0guEmC5IKtjHJKkRVSr/Button?node-id=0%3A1',
-            'aria-label': 'figma design file',
+            title: 'figma design file',
           },
         ],
         notes: [
diff --git a/ui/components/src/BlockContainer/BlockContainer.tsx b/ui/components/src/BlockContainer/BlockContainer.tsx
index 4904ca4a5..a9c394e52 100644
--- a/ui/components/src/BlockContainer/BlockContainer.tsx
+++ b/ui/components/src/BlockContainer/BlockContainer.tsx
@@ -75,9 +75,7 @@ export const BlockContainer: FC<BlockContainerProps> = ({
               <Flex variant="blockcontainer.titleblock">
                 {title}
                 <Link
-                  aria-label={
-                    isOpen ? 'Collapse this block' : 'Expand this block'
-                  }
+                  aria-expanded={isOpen}
                   sx={{
                     cursor: 'pointer',
                   }}
diff --git a/ui/components/src/BlockContainer/__snapshots__/BlockContainer.test.ts.snap b/ui/components/src/BlockContainer/__snapshots__/BlockContainer.test.ts.snap
index da2319529..35b8e5c34 100644
--- a/ui/components/src/BlockContainer/__snapshots__/BlockContainer.test.ts.snap
+++ b/ui/components/src/BlockContainer/__snapshots__/BlockContainer.test.ts.snap
@@ -13,7 +13,7 @@ exports[`BlockContainer customId snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="BlockContainer"
+          aria-label="navigate to BlockContainer section"
           class="css-walqom-LinkHeading"
           data-id="custom-id"
           data-level="3"
@@ -44,7 +44,7 @@ exports[`BlockContainer customId snapshot 1`] = `
           >
             BlockContainer
             <a
-              aria-label="Collapse this block"
+              aria-expanded="true"
               class="css-1t48u3b-BlockContainer"
             >
               <span
@@ -135,7 +135,7 @@ exports[`BlockContainer description snapshot 1`] = `
           class="css-xhp9da"
         >
           <a
-            aria-label="H3 title"
+            aria-label="navigate to H3 title section"
             class="css-walqom-LinkHeading"
             data-id="h3-title"
             data-level="3"
@@ -237,7 +237,7 @@ exports[`BlockContainer notCollapsible snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="BlockContainer"
+          aria-label="navigate to BlockContainer section"
           class="css-1ptrway-LinkHeading"
           data-id="blockcontainer"
           data-level="4"
@@ -314,7 +314,7 @@ exports[`BlockContainer overview snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="Block title"
+          aria-label="navigate to Block title section"
           class="css-walqom-LinkHeading"
           data-id="block-title"
           data-level="3"
@@ -345,7 +345,7 @@ exports[`BlockContainer overview snapshot 1`] = `
           >
             Block title
             <a
-              aria-label="Collapse this block"
+              aria-expanded="true"
               class="css-1t48u3b-BlockContainer"
             >
               <span
diff --git a/ui/components/src/LinkHeading/LinkHeading.tsx b/ui/components/src/LinkHeading/LinkHeading.tsx
index d3a1d6def..c8c57ab89 100644
--- a/ui/components/src/LinkHeading/LinkHeading.tsx
+++ b/ui/components/src/LinkHeading/LinkHeading.tsx
@@ -54,7 +54,7 @@ export const LinkHeading: FC<LinkHeadingProps> = ({
             sx={{ paddingRight: `${padding}px`, left: -(size + padding) }}
             variant="linkheading.link"
             href={pageLink(linkId)}
-            aria-label={label}
+            aria-label={`navigate to ${label} section`}
             data-title={label}
             data-id={linkId}
             data-level={level}
diff --git a/ui/components/src/LinkHeading/__snapshots__/LinkHeading.test.ts.snap b/ui/components/src/LinkHeading/__snapshots__/LinkHeading.test.ts.snap
index 7b4064534..2c9be4f88 100644
--- a/ui/components/src/LinkHeading/__snapshots__/LinkHeading.test.ts.snap
+++ b/ui/components/src/LinkHeading/__snapshots__/LinkHeading.test.ts.snap
@@ -13,7 +13,7 @@ exports[`LinkHeading overview snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="navigate to linkheading-text"
+          aria-label="navigate to navigate to linkheading-text section"
           class="css-6ugsdx-LinkHeading"
           data-id="linkheading-text"
           data-level="1"
diff --git a/ui/components/src/Markdown/__snapshots__/Markdown.test.ts.snap b/ui/components/src/Markdown/__snapshots__/Markdown.test.ts.snap
index f14f96719..36c2323e2 100644
--- a/ui/components/src/Markdown/__snapshots__/Markdown.test.ts.snap
+++ b/ui/components/src/Markdown/__snapshots__/Markdown.test.ts.snap
@@ -25,7 +25,7 @@ exports[`Markdown overview snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="Header H1"
+          aria-label="navigate to Header H1 section"
           class="css-6ugsdx-LinkHeading"
           data-id="header-h1"
           data-level="1"
@@ -65,7 +65,7 @@ exports[`Markdown overview snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="Header H2"
+          aria-label="navigate to Header H2 section"
           class="css-1aob0xw-LinkHeading"
           data-id="header-h2"
           data-level="2"
@@ -105,7 +105,7 @@ exports[`Markdown overview snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="Header H3"
+          aria-label="navigate to Header H3 section"
           class="css-walqom-LinkHeading"
           data-id="header-h3"
           data-level="3"
@@ -143,7 +143,7 @@ exports[`Markdown overview snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="Header H4"
+          aria-label="navigate to Header H4 section"
           class="css-1ptrway-LinkHeading"
           data-id="header-h4"
           data-level="4"
@@ -181,7 +181,7 @@ exports[`Markdown overview snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="Header H5"
+          aria-label="navigate to Header H5 section"
           class="css-18myu3p-LinkHeading"
           data-id="header-h5"
           data-level="5"
diff --git a/ui/components/src/Tree/Tree.tsx b/ui/components/src/Tree/Tree.tsx
index 64fb81609..6b869a477 100644
--- a/ui/components/src/Tree/Tree.tsx
+++ b/ui/components/src/Tree/Tree.tsx
@@ -123,12 +123,8 @@ export const Tree: FC<TreeProps> = ({
             className={isActiveItem && !itemItems ? 'selected' : undefined}
           >
             <LinkClass
-              aria-label={
-                itemItems?.length
-                  ? isExpanded
-                    ? 'collapse items'
-                    : 'expand items'
-                  : undefined
+              aria-expanded={
+                itemItems?.length ? (isExpanded ? true : false) : undefined
               }
               variant="tree.link"
               {...rest}
diff --git a/ui/components/src/Tree/__snapshots__/Tree.test.ts.snap b/ui/components/src/Tree/__snapshots__/Tree.test.ts.snap
index eaecf9e5d..f7ef24a46 100644
--- a/ui/components/src/Tree/__snapshots__/Tree.test.ts.snap
+++ b/ui/components/src/Tree/__snapshots__/Tree.test.ts.snap
@@ -21,7 +21,7 @@ exports[`Tree arrowsStart snapshot 1`] = `
               class="css-162ewbd"
             >
               <button
-                aria-label="collapse items"
+                aria-expanded="true"
                 class="css-t9fq0h"
               >
                 <div
@@ -645,7 +645,7 @@ exports[`Tree customExpandIcons snapshot 1`] = `
               class="css-162ewbd"
             >
               <button
-                aria-label="collapse items"
+                aria-expanded="true"
                 class="css-t9fq0h"
               >
                 <div
@@ -1269,7 +1269,7 @@ exports[`Tree items snapshot 1`] = `
               class="css-162ewbd"
             >
               <button
-                aria-label="collapse items"
+                aria-expanded="true"
                 class="css-t9fq0h"
               >
                 <div
@@ -1894,7 +1894,7 @@ exports[`Tree largeIndentation snapshot 1`] = `
               class="css-162ewbd"
             >
               <button
-                aria-label="collapse items"
+                aria-expanded="true"
                 class="css-t9fq0h"
               >
                 <div
@@ -2519,7 +2519,7 @@ exports[`Tree overview snapshot 1`] = `
               class="css-162ewbd"
             >
               <button
-                aria-label="collapse items"
+                aria-expanded="true"
                 class="css-t9fq0h"
               >
                 <div
@@ -2653,7 +2653,7 @@ exports[`Tree overview snapshot 1`] = `
               class="css-162ewbd"
             >
               <button
-                aria-label="expand items"
+                aria-expanded="false"
                 class="css-t9fq0h"
               >
                 <div
@@ -2731,7 +2731,7 @@ exports[`Tree search snapshot 1`] = `
               class="css-162ewbd"
             >
               <button
-                aria-label="collapse items"
+                aria-expanded="true"
                 class="css-t9fq0h"
               >
                 <div
diff --git a/ui/editors/src/DateEditor/DateEditor.tsx b/ui/editors/src/DateEditor/DateEditor.tsx
index f7ca204c4..6faba8142 100644
--- a/ui/editors/src/DateEditor/DateEditor.tsx
+++ b/ui/editors/src/DateEditor/DateEditor.tsx
@@ -1,11 +1,6 @@
-import React, {
-  ChangeEvent,
-  RefObject,
-  useState,
-  useRef,
-  useEffect,
-} from 'react';
-import { Input, Box } from 'theme-ui';
+/** @jsx jsx */
+import { ChangeEvent, RefObject, useState, useRef, useEffect } from 'react';
+import { jsx, Input } from 'theme-ui';
 import { ComponentControlDate, ControlTypes } from '@component-controls/core';
 import { useControl } from '@component-controls/store';
 import { PropertyEditor } from '../types';
@@ -94,25 +89,26 @@ export const DateEditor: PropertyEditor = ({ name, ...rest }) => {
   };
   const { datePicker = true, timePicker = true } = control;
   return name ? (
-    <Box css={{ display: 'flex', flexDirection: 'column' }}>
+    <div sx={{ display: 'flex', flexDirection: 'column' }}>
       {datePicker && (
         <Input
-          css={{
+          sx={{
             flex: 1,
           }}
           type="date"
-          max="9999-12-31" // I do this because of a rendering bug in chrome
+          max="9999-12-31"
           ref={dateInputRef as RefObject<HTMLInputElement>}
           id={`${name}date`}
           name={`${name}date`}
           onChange={onDateChange}
-          aria-label="enter a date"
+          placeholder={`enter a date for ${name}`}
+          aria-autocomplete="none"
           {...rest}
         />
       )}
       {timePicker && (
         <Input
-          css={{
+          sx={{
             flex: 1,
           }}
           type="time"
@@ -120,11 +116,12 @@ export const DateEditor: PropertyEditor = ({ name, ...rest }) => {
           name={`${name}time`}
           ref={timeInputRef as RefObject<HTMLInputElement>}
           onChange={onTimeChange}
-          aria-label="enter a time"
+          placeholder={`enter a time for ${name}`}
+          aria-autocomplete="none"
           {...rest}
         />
       )}
-    </Box>
+    </div>
   ) : null;
 };
 
diff --git a/ui/editors/src/DateEditor/__snapshots__/DateEditor.test.ts.snap b/ui/editors/src/DateEditor/__snapshots__/DateEditor.test.ts.snap
index 95aa51a7c..7a9595993 100644
--- a/ui/editors/src/DateEditor/__snapshots__/DateEditor.test.ts.snap
+++ b/ui/editors/src/DateEditor/__snapshots__/DateEditor.test.ts.snap
@@ -3,14 +3,15 @@
 exports[`DateEditor onlyDatePicker snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="css-uliqdc"
+    class="css-1amv3lq-DateEditor"
   >
     <input
-      aria-label="enter a date"
-      class="css-1qqniy8"
+      aria-autocomplete="none"
+      class="css-izz69a-DateEditor"
       id="propdate"
       max="9999-12-31"
       name="propdate"
+      placeholder="enter a date for prop"
       type="date"
     />
   </div>
@@ -20,13 +21,14 @@ exports[`DateEditor onlyDatePicker snapshot 1`] = `
 exports[`DateEditor onlyTimePicker snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="css-uliqdc"
+    class="css-1amv3lq-DateEditor"
   >
     <input
-      aria-label="enter a time"
-      class="css-1qqniy8"
+      aria-autocomplete="none"
+      class="css-izz69a-DateEditor"
       id="proptime"
       name="proptime"
+      placeholder="enter a time for prop"
       type="time"
     />
   </div>
@@ -36,21 +38,23 @@ exports[`DateEditor onlyTimePicker snapshot 1`] = `
 exports[`DateEditor overview snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="css-uliqdc"
+    class="css-1amv3lq-DateEditor"
   >
     <input
-      aria-label="enter a date"
-      class="css-1qqniy8"
+      aria-autocomplete="none"
+      class="css-izz69a-DateEditor"
       id="propdate"
       max="9999-12-31"
       name="propdate"
+      placeholder="enter a date for prop"
       type="date"
     />
     <input
-      aria-label="enter a time"
-      class="css-1qqniy8"
+      aria-autocomplete="none"
+      class="css-izz69a-DateEditor"
       id="proptime"
       name="proptime"
+      placeholder="enter a time for prop"
       type="time"
     />
   </div>
diff --git a/ui/editors/src/FilesEditor/FilesEditor.tsx b/ui/editors/src/FilesEditor/FilesEditor.tsx
index 2390073e5..5e4fbeba9 100644
--- a/ui/editors/src/FilesEditor/FilesEditor.tsx
+++ b/ui/editors/src/FilesEditor/FilesEditor.tsx
@@ -34,7 +34,7 @@ export const FilesEditor: PropertyEditor = ({ name, ...rest }) => {
         }
       }}
       accept={control.accept}
-      aria-label="select files"
+      placeholder="select files"
       {...rest}
     />
   );
diff --git a/ui/editors/src/FilesEditor/__snapshots__/FilesEditor.test.ts.snap b/ui/editors/src/FilesEditor/__snapshots__/FilesEditor.test.ts.snap
index 93b1f0126..733afc2c5 100644
--- a/ui/editors/src/FilesEditor/__snapshots__/FilesEditor.test.ts.snap
+++ b/ui/editors/src/FilesEditor/__snapshots__/FilesEditor.test.ts.snap
@@ -4,10 +4,10 @@ exports[`FilesEditor overview snapshot 1`] = `
 <DocumentFragment>
   <input
     accept="image/*"
-    aria-label="select files"
     class="css-iyqgnx"
     multiple=""
     name="prop"
+    placeholder="select files"
     type="file"
   />
   <img