[docs][material-ui][Dialog] Improve screen reader announcement of Customized Dialog

[ZeeshanTamboli]

• I have followed (at least) the PR section of the contributing guide.

Closes #37670.

When the <button> is placed outside the dialog title (h2), it announces correctly. While it's not flawless, it avoids saying "Modal title close dialog" and "close button heading level 2" Instead, it now says "Modal title Dialog," and when tabbed to the close button, it announces "Close button" (Confirmed on NVDA version 2023.1).

I also removed an unnecessary conditional operator regarding the onClose handler to show the close icon button.

Before: https://mui.com/material-ui/react-dialog/#customization
After: https://deploy-preview-38592--material-ui.netlify.app/material-ui/react-dialog/#customization

[mui-bot]

Netlify deploy preview

https://deploy-preview-38592--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 4097d99

[DiegoAndai]

I agree with this change. I'm curious if DialogTitle is confusing for users. DialogTitle may be understood as this whole section:

In which case users may think it's expected for the close button to go inside it, leading to errors like the one this PR fixes. Maybe we could add documentation addressing this?

[ZeeshanTamboli]

users may think it's expected for the close button to go inside it, leading to errors like the one this PR fixes. Maybe we could add documentation addressing this?

Perhaps this demo fix is enough for the documentation, showing the button now being placed outside the heading?

[Nomulacharitha]

Hello @ZeeshanTamboli,
After the fix it is reading as:
Modal title close button
Modal title button close
Can't we make it read only 1 time?