feat(Modal): remove autoFocus prop

BREAKING CHANGE: The modal now focuses the first focusable element by default.
Therefore, the autoFocus prop is no longer needed

Author: DSil

packages/orbit-components/src/Modal/Modal.stories.tsx

@@ -274,7 +274,6 @@ export const RemovableSections: Story = {
         "size",
         "title",
         "mobileHeader",
-        "autoFocus",
         "isMobileFullPage",
         "preventOverlayClose",
         "hasCloseButton",
@@ -323,7 +322,6 @@ export const WithFixedFooter: Story = {
         "size",
         "title",
         "mobileHeader",
-        "autoFocus",
         "isMobileFullPage",
         "preventOverlayClose",
         "hasCloseButton",
@@ -403,7 +401,6 @@ export const WithForm: Story = {
         "size",
         "title",
         "mobileHeader",
-        "autoFocus",
         "isMobileFullPage",
         "preventOverlayClose",
         "hasCloseButton",
@@ -494,7 +491,6 @@ export const WithModalHeaderOnly: Story = {
         "size",
         "fixedFooter",
         "title",
-        "autoFocus",
         "isMobileFullPage",
         "preventOverlayClose",
         "hasCloseButton",
@@ -577,7 +573,6 @@ export const Playground: StoryObj<PlaygroundStoryProps> = {
     hasCloseButton: true,
     disableAnimation: false,
     labelClose: "Close",
-    autoFocus: true,
     header: true,
     footer: true,
     id: "modal-id",

packages/orbit-components/src/Modal/README.md

@@ -36,7 +36,6 @@ Table below contains all types of the props available in the Modal component.
 | onClose             | `event => void \| Promise` |            | Function for handling onClose event. If you don't pass any function the Close button will not be displayed and it will not be possible to close the Modal. [See Functional specs](#functional-specs). |
 | preventOverlayClose | `boolean`                  |            | Property for preventing closing of modal when there is a action on overlay. BEWARE: This should be used only in very specials edge-cases! It breaks user experience.                                  |
 | hasCloseButton      | `boolean`                  | `true`     | Defines whether the Modal displays a close button. If you disable this, we recommend adding some kind of an alternative.                                                                              |
-| autoFocus           | `boolean`                  | `true`     | The autofocus attribute of the Modal, see [this docs](https://www.w3schools.com/tags/att_autofocus.asp).                                                                                              |
 | disableAnimation    | `boolean`                  | `false`    | Defines whether the Modal performs the slide in animation on mobile. If you want to improve your [CLS](https://web.dev/cls/) score, you might want to set this to `true`.                             |
 | mobileHeader        | `boolean`                  | `true`     | If `false` the ModalHeader will not have MobileHeader and CloseContainer.                                                                                                                             |
 | labelClose          | `string`                   | `Close`    | The label for the close button.                                                                                                                                                                       |

packages/orbit-components/src/Modal/types.d.ts

@@ -13,7 +13,6 @@ export interface Props extends Common.Globals {
   readonly triggerRef?: React.RefObject<HTMLElement>;
   readonly lockScrolling?: boolean;
   readonly scrollingElementRef?: React.Ref<HTMLElement>;
-  readonly autoFocus?: boolean;
   readonly onClose?: Common.Event<
     | React.KeyboardEvent<HTMLDivElement>
     | React.SyntheticEvent<HTMLButtonElement | HTMLDivElement | HTMLAnchorElement>