fix(MessageBox): screen reader reads out whole content of MessageBox when opened (#1504)

Author: Lukas742

packages/main/src/components/ActionSheet/ActionSheet.stories.mdx

@@ -40,31 +40,6 @@ import { DocsCommonProps } from '@shared/stories/DocsCommonProps';
 
 <br />
 
-### Opening ActionSheets
-
-`ActionSheets` can only be opened by attaching a `ref` to the component and then call the corresponding **`open`** method. The method receives the target element - _on which the `ActionSheet` is to be opened_ - as parameter.
-
-```JSX
-const ActionSheetComponent = () => {
-  const actionSheetRef = useRef();
-  const onButtonClick = (e) => {
-    actionSheetRef.current.open(e.target);
-  };
-  return (
-    <>
-      <Button onClick={onButtonClick}>Open ActionSheet</Button>
-      <ActionSheet ref={actionSheetRef}>
-        <Button icon="add">Accept</Button>
-        <Button>Reject</Button>
-        <Button>This is my super long text!</Button>
-      </ActionSheet>
-    </>
-  );
-};
-```
-
-<br />
-
 ## Example
 
 <Canvas>
@@ -95,6 +70,40 @@ const ActionSheetComponent = () => {
 
 <ArgsTable story="." />
 
+## Methods
+
+This component exposes public methods. You can invoke them directly on the instance of the component, e.g. by using React Refs.
+
+| Name           | Parameters                                                                                                                                                    | Description                                                                                                      |
+| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
+| **close**      | &mdash;                                                                                                                                                       | Closes the popover/dialog.                                                                                       |
+| **open**       | <dl><dt className="methodText">**opener**</dt><dd className="methodText">the element that the popover is opened by</dd><dd><code>HTMLElement</code></dd></dl> | Opens popover on desktop and dialog on mobile.                                                                   |
+| **applyFocus** | &mdash;                                                                                                                                                       | Focuses the element denoted by <code>initialFocus</code>, if provided, or the first focusable element otherwise. |
+| **isOpen**     | &mdash;                                                                                                                                                       |
+
+## Opening ActionSheets
+
+`ActionSheets` can only be opened by attaching a `ref` to the component and then call the corresponding **`open`** method. The method receives the target element - _on which the `ActionSheet` is to be opened_ - as parameter.
+
+```JSX
+const ActionSheetComponent = () => {
+  const actionSheetRef = useRef();
+  const onButtonClick = (e) => {
+    actionSheetRef.current.open(e.target);
+  };
+  return (
+    <>
+      <Button onClick={onButtonClick}>Open ActionSheet</Button>
+      <ActionSheet ref={actionSheetRef}>
+        <Button icon="add">Accept</Button>
+        <Button>Reject</Button>
+        <Button>This is my super long text!</Button>
+      </ActionSheet>
+    </>
+  );
+};
+```
+
 ## Using ActionSheets inside other components
 
 `ActionSheets` are often used within other components, when opened this could sometimes have unwanted side effects.

packages/main/src/components/MessageBox/MessageBox.stories.mdx

@@ -52,6 +52,17 @@ import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
 
 <ArgsTable story="." />
 
+## Methods
+
+This component exposes public methods. You can invoke them directly on the instance of the component, e.g. by using React Refs.
+
+| Name           | Parameters                                                                                                                                                                | Description                                                                                                               |
+| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | --- |
+| **applyFocus** | &mdash;                                                                                                                                                                   | Focuses the element denoted by <code>initialFocus</code>, if provided, or the first focusable element otherwise.          |
+| **close**      | &mdash;                                                                                                                                                                   | Hides the block layer (for modal popups only)                                                                             |
+| **isOpen**     | &mdash;                                                                                                                                                                   | Override this method to provide custom logic for the popup's open/closed state. Maps to the "opened" property by default. |
+| **open**       | <dl><dt className="methodText">**preventInitialFocus**</dt><dd className="methodText">prevents applying the focus inside the popup</dd><dd><code>boolean</code></dd></dl> | Shows the block layer (for modal popups only) and sets the correct z-index for the purpose of popup stacking              |     |
+
 ## Opening and Closing MessageBoxes
 
 Unlike `Popovers` or `Dialogs`, `MessageBoxes` do not need to be provided with a `ref` to be opened or closed. Instead, the `open` prop can be used for this.