From 2a7c1aa5d6b3ed43f16c13995dc034145efa9c31 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

---
 .../web-react/docs/stories/examples/ModalStacked.stories.tsx  | 2 +-
 .../docs/stories/examples/ModalWithAccordion.stories.tsx      | 2 +-
 .../docs/stories/examples/ModalWithCollapse.stories.tsx       | 2 +-
 .../docs/stories/examples/ModalWithDropdown.stories.tsx       | 2 +-
 .../web-react/docs/stories/examples/ModalWithForm.stories.tsx | 2 +-
 .../docs/stories/examples/ModalWithScrollView.stories.tsx     | 2 +-
 packages/web-react/src/components/Modal/README.md             | 4 ++--
 packages/web-react/src/components/Modal/demo/ModalStacked.tsx | 2 +-
 packages/web/src/scss/components/Item/README.md               | 2 +-
 9 files changed, 10 insertions(+), 10 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/Item/README.md b/packages/web/src/scss/components/Item/README.md
index e963e01c1a..3b5942b46e 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>