Focus on wrong button in modal

The cancel button is focused in modal instead of primary button

What package(s) are you using?

• carbon-components
• [X ] carbon-components-react

Detailed description

When a modal component is opened the close button (X) is focused instead of the primary button.

Is this issue related to a specific component?

This is related to the Modal component

What did you expect to happen? What happened instead? What would you like to see changed?

Focus should be on the primary button.

What browser are you working in?

Chrome

What version of the Carbon Design System are you using?

Carbon X

Steps to reproduce the issue

This can also be seen in the story book: https://react.carbondesignsystem.com/?path=/story/modal--default

Additional information

There are two references to this.button in the code (Module.js). That seems to cause the error. One is https://github.com/carbon-design-system/carbon/blob/v10.10.0/packages/react/src/components/Modal/Modal.js#L346, another is https://github.com/carbon-design-system/carbon/blob/v10.10.0/packages/react/src/components/Modal/Modal.js#L411. The code seems to have been originated from carbon-design-system/carbon-components-react#980.

[renmaddox]

While I would prefer better support for this in Modal, you should be able to set the selectorPrimaryFocus to ['.bx-btn-primary','.bx-btn-danger'].

[emyarod]

@miriam-g as @renmaddox mentions you can set selectorPrimaryFocus to the CSS selector of the element you want to focus