Docs(web, web-twig, web-react): Document ModalHeader and ModalFooter …

…usage recommendations #DS-1033

packages/web-react/src/components/Modal/README.md

@@ -131,6 +131,9 @@ Also, all properties of the [`<article>` element][mdn-article] and [`<form>` ele
 
 ModalHeader contains the title of the dialog and the close button.
 
+ℹ️ We strongly recommend providing the ModalHeader in every use case to ensure the dialog is accessible
+and allows users to easily close it.
+
 ```jsx
 <ModalHeader>Modal Title</ModalHeader>
 ```
@@ -189,6 +192,10 @@ secondary actions are optional.
 👉 Please note the actions are _visually_ ordered from right to left from the tablet breakpoint up. However, the
 _actual_ order in code is followed when users tab over the interface.
 
+ℹ️ We strongly recommend including the ModalFooter with at least one primary action in every use case to facilitate
+user interaction and ensure consistent spacing within the dialog. Should the ModalFooter be omitted, please ensure
+to compensate for the lost spacing by applying utility spacing classes to the ModalBody.
+
 ```jsx
 <ModalFooter>
   <Button color="primary">Primary action</Button>

packages/web-twig/src/Resources/components/Modal/README.md

@@ -135,6 +135,9 @@ are allowed when the `elementType` is set to `form`.
 
 ModalHeader contains the title of the dialog and the close button.
 
+ℹ️ We strongly recommend providing the ModalHeader in every use case to ensure the dialog is accessible
+and allows users to easily close it.
+
 ```twig
 <ModalHeader modalId="modal-example" titleId="modal-example-title">
   Title of the Modal
@@ -202,6 +205,10 @@ secondary actions are optional.
 👉 Please note the actions are _visually_ ordered from right to left from the tablet breakpoint up. However, the
 _actual_ order in code is followed when users tab over the interface.
 
+ℹ️ We strongly recommend including the ModalFooter with at least one primary action in every use case to facilitate
+user interaction and ensure consistent spacing within the dialog. Should the ModalFooter be omitted, please ensure
+to compensate for the lost spacing by applying utility spacing classes to the ModalBody.
+
 ```twig
 <ModalFooter>
   <Button color="primary">Primary action</Button>

packages/web/src/scss/components/Modal/README.md

@@ -102,6 +102,9 @@ the class, the dialog shrinks to fit the height of its content (if smaller than
 
 ModalHeader contains the title of the dialog and the close button.
 
+ℹ️ We strongly recommend providing the ModalHeader in every use case to ensure the dialog is accessible
+and allows users to easily close it.
+
 ```html
 <div class="ModalHeader">
   <h2 id="example_1_title" class="ModalHeader__title">Modal Title</h2>
@@ -154,6 +157,10 @@ secondary actions are optional.
 👉 Please note the actions are _visually_ ordered from right to left from the tablet breakpoint up. However, the
 _actual_ order in code is followed when users tab over the interface.
 
+ℹ️ We strongly recommend including the ModalFooter with at least one primary action in every use case to facilitate
+user interaction and ensure consistent spacing within the dialog. Should the ModalFooter be omitted, please ensure
+to compensate for the lost spacing by applying utility spacing classes to the ModalBody.
+
 ```html
 <div class="ModalFooter ModalFooter--right">
   <div class="ModalFooter__actions">