Screen reader doesn't announce Dialog description but it announces Modal description

[EmreErdogan]

Steps to reproduce

Link to live example:

• Modal example at StackBlitz
• Dialog example at StackBlitz

Steps:

1. Create a button and a Dialog / Modal
2. Add aria-labelledby and aria-describedby props
3. Open VoiceOver (another screen reader might work as well)
4. Click the button

Current behavior

Screen reader announces both title and description of Modal.
Screen reader announces only title of Dialog.

Expected behavior

Screen reader should announce both title and description of Dialog.

Context

I am trying to make VoiceOver announce both the title referenced by aria-labelledby and the description referenced by aria-describedby. Because dialogs are good for alerting results, changes, or alerts. I am expecting a screen reader to announce dialog content.

Your environment

npx @mui/envinfo

 System:
    OS: macOS 14.4.1
  Binaries:
    Node: 18.16.1 - ~/.nvm/versions/node/v18.16.1/bin/node
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.1/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 124.0.6367.156
    Edge: 124.0.2478.80
    Safari: 17.4.1
  npmPackages:
    @emotion/react: 11.11.4 => 11.11.4
    @emotion/styled: 11.11.5 => 11.11.5
    @mui/base:  5.0.0-beta.40
    @mui/core-downloads-tracker:  5.15.17
    @mui/material: 5.15.17 => 5.15.17
    @mui/private-theming:  5.15.14
    @mui/styled-engine:  5.15.14
    @mui/system:  5.15.15
    @mui/types:  7.2.14
    @mui/utils:  5.15.14
    @types/react: 18.3.1 => 18.3.1
    react: 18.3.1 => 18.3.1
    react-dom: 18.3.1 => 18.3.1
    typescript: 5.4.5 => 5.4.5

Search keywords: VoiceOver, Screen Reader, aria-describedby, Dialog, Modal