Carbon: Focus on wrong button in modal

[miriam-g]

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]

Note that when the primary button is actually a danger button, I'd expect the secondary button to be the default focus.

[emyarod]

the behavior was changed to focus on the close/cancel button in https://github.com/carbon-design-system/carbon-components-react/pull/2096

you can change the primary focus target with the selectorPrimaryFocus prop

[miriam-g]

@emyarod How can I use the selectorPrimaryFocus on the primaryButton, when I use standard component _Module_ and the class of this button can be either .bx—btn—primary or .bx—btn—danger?

[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