From 8a3e6729b3569f0bfe9185388837a84bd3019f69 Mon Sep 17 00:00:00 2001
From: Adam Kudrna <adam.kudrna@lmc.eu>
Date: Thu, 15 Feb 2024 17:00:59 +0100
Subject: [PATCH] Docs(web, web-react, web-twig): Fix the `aria-controls` ID
 references in examples

---
 .../docs/stories/examples/ModalStacked.stories.tsx |  2 +-
 .../examples/ModalWithAccordion.stories.tsx        |  2 +-
 .../stories/examples/ModalWithCollapse.stories.tsx |  2 +-
 .../stories/examples/ModalWithDropdown.stories.tsx |  2 +-
 .../stories/examples/ModalWithForm.stories.tsx     |  2 +-
 .../examples/ModalWithScrollView.stories.tsx       |  2 +-
 packages/web-react/src/components/Modal/README.md  |  4 ++--
 .../src/components/Modal/demo/ModalStacked.tsx     |  2 +-
 .../web/src/scss/components/Dropdown/README.md     | 12 ++++++------
 .../web/src/scss/components/Dropdown/index.html    | 14 +++++++-------
 packages/web/src/scss/components/Item/README.md    |  2 +-
 11 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/packages/web-react/docs/stories/examples/ModalStacked.stories.tsx b/packages/web-react/docs/stories/examples/ModalStacked.stories.tsx
index 3662a9113a..7a1d4a6038 100644
--- a/packages/web-react/docs/stories/examples/ModalStacked.stories.tsx
+++ b/packages/web-react/docs/stories/examples/ModalStacked.stories.tsx
@@ -21,7 +21,7 @@ export const ModalStacked = () => {
 
   return (
     <>
-      <Button onClick={toggleStackedModal} aria-expanded={isStackedOpen} aria-controls="#ModalStacked">
+      <Button onClick={toggleStackedModal} aria-expanded={isStackedOpen} aria-controls="ModalStacked">
         {isStackedOpen ? 'Close' : 'Open'} Modal
       </Button>
       <Modal id="ModalChild" isOpen={isChildOpen} onClose={handleChildClose}>
diff --git a/packages/web-react/docs/stories/examples/ModalWithAccordion.stories.tsx b/packages/web-react/docs/stories/examples/ModalWithAccordion.stories.tsx
index ef175116af..93c173ffca 100644
--- a/packages/web-react/docs/stories/examples/ModalWithAccordion.stories.tsx
+++ b/packages/web-react/docs/stories/examples/ModalWithAccordion.stories.tsx
@@ -28,7 +28,7 @@ export const ModalWithAccordion = () => {
 
   return (
     <>
-      <Button onClick={toggleModal} aria-expanded={isOpen} aria-controls="#ModalExample">
+      <Button onClick={toggleModal} aria-expanded={isOpen} aria-controls="ModalExample">
         {isOpen ? 'Close' : 'Open'} Modal
       </Button>
       <Modal id="ModalExample" isOpen={isOpen} onClose={handleClose}>
diff --git a/packages/web-react/docs/stories/examples/ModalWithCollapse.stories.tsx b/packages/web-react/docs/stories/examples/ModalWithCollapse.stories.tsx
index c0ae84ecdf..e7d77a5ef5 100644
--- a/packages/web-react/docs/stories/examples/ModalWithCollapse.stories.tsx
+++ b/packages/web-react/docs/stories/examples/ModalWithCollapse.stories.tsx
@@ -18,7 +18,7 @@ export const ModalWithCollapse = () => {
 
   return (
     <>
-      <Button onClick={toggleModal} aria-expanded={isOpen} aria-controls="#ModalExample">
+      <Button onClick={toggleModal} aria-expanded={isOpen} aria-controls="ModalExample">
         {isOpen ? 'Close' : 'Open'} Modal
       </Button>
       <Modal id="ModalExample" isOpen={isOpen} onClose={handleClose}>
diff --git a/packages/web-react/docs/stories/examples/ModalWithDropdown.stories.tsx b/packages/web-react/docs/stories/examples/ModalWithDropdown.stories.tsx
index 9655025f75..ce599c21de 100644
--- a/packages/web-react/docs/stories/examples/ModalWithDropdown.stories.tsx
+++ b/packages/web-react/docs/stories/examples/ModalWithDropdown.stories.tsx
@@ -23,7 +23,7 @@ export const ModalWithDropdown = () => {
 
   return (
     <>
-      <Button onClick={toggleModal} aria-expanded={isOpen} aria-controls="#ModalExample">
+      <Button onClick={toggleModal} aria-expanded={isOpen} aria-controls="ModalExample">
         {isOpen ? 'Close' : 'Open'} Modal
       </Button>
       <Modal id="ModalExample" isOpen={isOpen} onClose={handleClose}>
diff --git a/packages/web-react/docs/stories/examples/ModalWithForm.stories.tsx b/packages/web-react/docs/stories/examples/ModalWithForm.stories.tsx
index cc76aa4d62..fcd40752fd 100644
--- a/packages/web-react/docs/stories/examples/ModalWithForm.stories.tsx
+++ b/packages/web-react/docs/stories/examples/ModalWithForm.stories.tsx
@@ -30,7 +30,7 @@ export const ModalWithForm = () => {
 
   return (
     <>
-      <Button onClick={toggleModal} aria-expanded={isOpen} aria-controls="#ModalExample">
+      <Button onClick={toggleModal} aria-expanded={isOpen} aria-controls="ModalExample">
         {isOpen ? 'Close' : 'Open'} Modal
       </Button>
       <Modal id="ModalExample" isOpen={isOpen} onClose={handleClose}>
diff --git a/packages/web-react/docs/stories/examples/ModalWithScrollView.stories.tsx b/packages/web-react/docs/stories/examples/ModalWithScrollView.stories.tsx
index efd2b02a51..8923916642 100644
--- a/packages/web-react/docs/stories/examples/ModalWithScrollView.stories.tsx
+++ b/packages/web-react/docs/stories/examples/ModalWithScrollView.stories.tsx
@@ -16,7 +16,7 @@ export const ModalWithScrollView = () => {
 
   return (
     <>
-      <Button onClick={toggleModal} aria-expanded={isOpen} aria-controls="#ModalExample">
+      <Button onClick={toggleModal} aria-expanded={isOpen} aria-controls="ModalExample">
         {isOpen ? 'Close' : 'Open'} Modal
       </Button>
       <Modal id="ModalExample" isOpen={isOpen} onClose={handleClose}>
diff --git a/packages/web-react/src/components/Modal/README.md b/packages/web-react/src/components/Modal/README.md
index 5ba6651b2d..d698bacf02 100644
--- a/packages/web-react/src/components/Modal/README.md
+++ b/packages/web-react/src/components/Modal/README.md
@@ -280,7 +280,7 @@ const [isOpen, setOpen] = useState(false);
 const toggleModal = () => setOpen(!isOpen);
 const handleClose = () => setOpen(false);
 
-<Button onClick={toggleModal} aria-controls="#modal-example" aria-expanded={isOpen}>
+<Button onClick={toggleModal} aria-controls="modal-example" aria-expanded={isOpen}>
   Open Modal
 </Button>;
 ```
@@ -355,7 +355,7 @@ const handleClose = () => setOpen(false);
 
 <Button
   onClick={toggleModal}
-  aria-controls="#modal-example"
+  aria-controls="modal-example"
   aria-expanded={isOpen}
 >
   Open Modal
diff --git a/packages/web-react/src/components/Modal/demo/ModalStacked.tsx b/packages/web-react/src/components/Modal/demo/ModalStacked.tsx
index 004b410a60..991577578c 100644
--- a/packages/web-react/src/components/Modal/demo/ModalStacked.tsx
+++ b/packages/web-react/src/components/Modal/demo/ModalStacked.tsx
@@ -26,7 +26,7 @@ const Story = (props: unknown) => {
 
   return (
     <IconsProvider value={icons}>
-      <Button onClick={toggleFirstModal} aria-expanded={isFirstOpen} aria-controls="#NestedModal">
+      <Button onClick={toggleFirstModal} aria-expanded={isFirstOpen} aria-controls="NestedModal">
         {isFirstOpen ? 'Close' : 'Open'} Modal
       </Button>
       <Modal id="ChildModal" isOpen={isSecondOpen} onClose={handleSecondClose}>
diff --git a/packages/web/src/scss/components/Dropdown/README.md b/packages/web/src/scss/components/Dropdown/README.md
index 52dc2f1240..b07ec5e142 100644
--- a/packages/web/src/scss/components/Dropdown/README.md
+++ b/packages/web/src/scss/components/Dropdown/README.md
@@ -9,7 +9,7 @@
     data-spirit-target="#dropdownDefault"
     class="Button Button--primary Button--medium"
     aria-expanded="false"
-    aria-controls="#dropdownDefault"
+    aria-controls="dropdownDefault"
   >
     Button as anchor
   </button>
@@ -51,7 +51,7 @@
     data-spirit-target="#dropdownTopRight"
     class="Button Button--primary Button--medium"
     aria-expanded="false"
-    aria-controls="#dropdownTopRight"
+    aria-controls="dropdownTopRight"
   >
     Button as anchor
   </button>
@@ -93,7 +93,7 @@
     data-spirit-target="#dropdownDisabledAutoClose"
     class="Button Button--primary Button--medium"
     aria-expanded="false"
-    aria-controls="#dropdownDisabledAutoClose"
+    aria-controls="dropdownDisabledAutoClose"
     data-spirit-autoclose="true"
   >
     Button as anchor
@@ -136,7 +136,7 @@
     data-spirit-target="#dropdownFullWidthModeAll"
     class="Button Button--primary Button--medium"
     aria-expanded="false"
-    aria-controls="#dropdownFullWidthModeAll"
+    aria-controls="dropdownFullWidthModeAll"
   >
     Finibus quis imperdiet, semper imperdiet aliquam
   </button>
@@ -178,7 +178,7 @@
     data-spirit-target="#dropdownFullWidthModeMobile"
     class="Button Button--primary Button--medium"
     aria-expanded="false"
-    aria-controls="#dropdownFullWidthModeMobile"
+    aria-controls="dropdownFullWidthModeMobile"
   >
     Finibus quis imperdiet, semper imperdiet aliquam
   </button>
@@ -220,7 +220,7 @@
     data-spirit-target="#dropdownDefault"
     class="Button Button--primary Button--medium"
     aria-expanded="false"
-    aria-controls="#dropdownDefault"
+    aria-controls="dropdownDefault"
   >
     Button as anchor
   </button>
diff --git a/packages/web/src/scss/components/Dropdown/index.html b/packages/web/src/scss/components/Dropdown/index.html
index f57c51ba01..73730d3481 100644
--- a/packages/web/src/scss/components/Dropdown/index.html
+++ b/packages/web/src/scss/components/Dropdown/index.html
@@ -123,7 +123,7 @@ <h2 class="docs-Heading">Placements</h2>
                 data-spirit-autoclose="false"
                 class="Button Button--primary Button--medium"
                 aria-expanded="false"
-                aria-controls="#dropdown_placements_example"
+                aria-controls="dropdown_placements_example"
               >
                 <span id="dropdown_placements_example_text" style="white-space: nowrap">bottom-left</span>
               </button>
@@ -174,8 +174,8 @@ <h2 class="docs-Heading">Various items</h2>
           data-spirit-target="#dropdownVariousItems"
           class="Button Button--primary Button--medium"
           aria-expanded="false"
-          aria-controls="#dropdownVariousItems"
           data-spirit-autoclose="true"
+          aria-controls="dropdownVariousItems"
         >
           Button as anchor
         </button>
@@ -219,7 +219,7 @@ <h2 class="docs-Heading">Usage with disabled auto close</h2>
           data-spirit-target="#dropdownDisabledAutoClose"
           class="Button Button--primary Button--medium"
           aria-expanded="false"
-          aria-controls="#dropdownDisabledAutoClose"
+          aria-controls="dropdownDisabledAutoClose"
           data-spirit-autoclose="true"
         >
           Button as anchor
@@ -275,7 +275,7 @@ <h2 class="docs-Heading">Longer content</h2>
           data-spirit-target="#dropdownLonger"
           class="Button Button--primary Button--medium"
           aria-expanded="false"
-          aria-controls="#dropdownLonger"
+          aria-controls="dropdownLonger"
         >
           Button as anchor
         </button>
@@ -330,7 +330,7 @@ <h2 class="docs-Heading">Full-width mode 'all'</h2>
           data-spirit-target="#dropdownFullWidthModeAll"
           class="Button Button--primary Button--medium"
           aria-expanded="false"
-          aria-controls="#dropdownFullWidthModeAll"
+          aria-controls="dropdownFullWidthModeAll"
         >
           Finibus quis imperdiet, semper imperdiet aliquam
         </button>
@@ -385,7 +385,7 @@ <h2 class="docs-Heading">Full-width mode 'mobile-only'</h2>
           data-spirit-target="#dropdownFullWidthModeMobile"
           class="Button Button--primary Button--medium"
           aria-expanded="false"
-          aria-controls="#dropdownFullWidthModeMobile"
+          aria-controls="dropdownFullWidthModeMobile"
         >
           Finibus quis imperdiet, semper imperdiet aliquam
         </button>
@@ -445,7 +445,7 @@ <h2 class="docs-Heading">Feature Flag: Enhanced Shadow</h2>
             data-spirit-target="#dropdownEnhancedShadow"
             class="Button Button--primary Button--medium"
             aria-expanded="false"
-            aria-controls="#dropdownEnhancedShadow"
+            aria-controls="dropdownEnhancedShadow"
           >
             Finibus quis imperdiet, semper imperdiet aliquam
           </button>
diff --git a/packages/web/src/scss/components/Item/README.md b/packages/web/src/scss/components/Item/README.md
index ac7e1e7976..ecd95582af 100644
--- a/packages/web/src/scss/components/Item/README.md
+++ b/packages/web/src/scss/components/Item/README.md
@@ -113,7 +113,7 @@ Usage in [Dropdown] component:
     data-spirit-target="#dropdownDefault"
     class="Button Button--primary Button--medium"
     aria-expanded="false"
-    aria-controls="#dropdownDefault"
+    aria-controls="dropdownDefault"
   >
     Button as anchor
   </button>