From 3e0c67b93bce854f37860f5563a149f79e8e6764 Mon Sep 17 00:00:00 2001
From: Adam Kudrna <adam.kudrna@lmc.eu>
Date: Tue, 13 Feb 2024 13:02:53 +0100
Subject: [PATCH 1/2] Docs(web): Fix Sass implementation notes

---
 packages/web-react/src/components/Modal/README.md          | 3 +--
 packages/web-twig/src/Resources/components/Modal/README.md | 3 +--
 packages/web/src/scss/components/Modal/_Modal.scss         | 6 +++---
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/web-react/src/components/Modal/README.md b/packages/web-react/src/components/Modal/README.md
index 32cabc6f06..5ba6651b2d 100644
--- a/packages/web-react/src/components/Modal/README.md
+++ b/packages/web-react/src/components/Modal/README.md
@@ -318,8 +318,7 @@ content is longer than user's viewport.
 #### ⚠️ DEPRECATION NOTICE
 
 The `isScrollable` prop will be set to `false` by default in the next major release and the ModalDialog will be made
-non-scrollable by default. It will be possible to re-enable the inside scrolling by setting the
-`isScrollable` boolean prop.
+non-scrollable by default. It will be possible to re-enable the inside scrolling by adding the `isScrollable` prop.
 
 ## Stacking Modals
 
diff --git a/packages/web-twig/src/Resources/components/Modal/README.md b/packages/web-twig/src/Resources/components/Modal/README.md
index 5dd9d0c85f..1a274a1aed 100644
--- a/packages/web-twig/src/Resources/components/Modal/README.md
+++ b/packages/web-twig/src/Resources/components/Modal/README.md
@@ -323,8 +323,7 @@ content is longer than user's viewport.
 #### ⚠️ DEPRECATION NOTICE
 
 The `isScrollable` prop will be set to `false` by default in the next major release and the ModalDialog will be made
-non-scrollable by default. It will be possible to re-enable the inside scrolling by setting the
-`isScrollable` prop to `true` explicitly.
+non-scrollable by default. It will be possible to re-enable the inside scrolling by adding the `isScrollable` prop.
 
 ## Stacking Modals
 
diff --git a/packages/web/src/scss/components/Modal/_Modal.scss b/packages/web/src/scss/components/Modal/_Modal.scss
index a2af9d2200..9698309e37 100644
--- a/packages/web/src/scss/components/Modal/_Modal.scss
+++ b/packages/web/src/scss/components/Modal/_Modal.scss
@@ -1,8 +1,8 @@
 // 1. In order to be transitioned, the visibility of the dialog is controlled through `opacity` and `visibility`
 //    properties instead of the default `display`.
 // 2. Simply use Modal background color instead of `::backdrop` to make fading possible. (A pseudo-element cannot be
-//    used because it covers the scrollbar of the ModalDialog with the inside scrolling turned off.)
-// 3. Use background gradient to prevent background from flickering in Safari.
+//    used because it covers the scrollbar of the ModalDialog when the inside scrolling is turned off.)
+// 3. Use background gradient to prevent background from flickering during transition in Safari.
 // 4. Clip overflow during transition of the docked variant on mobile screens.
 // 5. Allow scrolling through the modal. Has no effect unless the modal is taller than the viewport.
 // 6. Restore text selection after `all: unset`.
@@ -21,7 +21,7 @@
     display: flex; // 1.
     padding-block: theme.$padding-y;
     overflow: hidden; // 4.
-    background: linear-gradient(#{theme.$backdrop-background-color}, #{theme.$backdrop-background-color}); // 8.
+    background: linear-gradient(#{theme.$backdrop-background-color}, #{theme.$backdrop-background-color}); // 2., 3.
     visibility: hidden; // 1.
     opacity: 0; // 1.
     pointer-events: none; // 1.

From b7c7126c3b3b25982cac102b1f56a83c41c9f28f 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 2/2] 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>