[P3][Sourcing][Accessibility][fd Dialog]: Dialog title is being read twice

[I543348]

Is this a bug, enhancement, or feature request?

bug

Describe your proposal.

Dialog title is being read twice, it should read only once.

Can you handle that on the application side

No

Which versions of Angular and Fundamental Library for Angular are affected? Please, specify the exact version. (If this is a feature request, use current version.)

Angular: 15
core/ platform: 0.43.33

If this is a bug, please provide steps for reproducing it; the exact components you are using;

Replicable on https://deploy-preview-11651--fundamental-ngx.netlify.app/#/core/dialog

Please provide relevant source code (if applicable).

https://deploy-preview-11651--fundamental-ngx.netlify.app/#/core/dialog

Please provide stackblitz example(s).

https://deploy-preview-11651--fundamental-ngx.netlify.app/#/core/dialog

In case this is Accessibility related topic, did you consult with an accessibility expert? If not, please do so and share their recommendations.

Did you check the documentation and the API?

Did you search for similar issues?

Is there anything else we should know?

IMPORTANT: Please refrain from providing links or screenshots of SAP's internal information, as this project is open-source, and its contents are accessible to anyone.

[mikerodonnell89]

Can't recreate on mac screenreader, possibly unique to jaws

[droshev]

Can't recreate on mac screenreader, possibly unique to jaws

We need to fix it for JAWS

[mikerodonnell89]

This is also only happening for the dialog in @I543348 's screenshot above, other dialogs appear fine

[mikerodonnell89]

This should be handled application side. Closing

[mikerodonnell89]

This is a jaws specific side effect of using aria-labelledby on an element that jaws was already going to read anyways. In this specific example, I do think we want to keep the aria-labelledby so jaws reads "Fresh Market Dialog". There's a few ways to get around this bit being read twice, but I'm updating the example to add a hidden element, which I'll reference with ariaDescribedBy when opening the dialog. Looks like this:

this.dialogRef = this._dialogService.open(template, {
    ariaLabelledBy: 'fd-dialog-header-3',
    ariaDescribedBy: 'fd-dialog-description-3'
});

<fd-bar-element>
    <h1 id="fd-dialog-header-3" fd-title>Fresh Market</h1>
    <span style="display: none;" aria-hidden="true" id="fd-dialog-description-3">Search for fresh produce items</span>
</fd-bar-element>