Skip to content

Commit

Permalink
fix(material/dialog): dialog name not read on macOS chrome & firefox
Browse files Browse the repository at this point in the history
Fixes Angular Components Dialog component where the dialog name is
not read by VoiceOver/screenreader on macOS chrome & firefox
browsers. Attempts to retrieve any id associated with aria-labelledby
or aria-describedby and taking the innerHTML or the aria-label of that
element and applying that value to the dialog's aria-label.

Fixes b/274674581
  • Loading branch information
essjay05 committed Jun 22, 2024
1 parent 0227ed7 commit 4d12a2a
Showing 1 changed file with 7 additions and 8 deletions.
15 changes: 7 additions & 8 deletions src/material/dialog/dialog-container.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,7 @@ import {
import {MatDialogConfig} from './dialog-config';
import {CdkDialogContainer} from '@angular/cdk/dialog';
import {coerceNumberProperty} from '@angular/cdk/coercion';
import {PlatformModule} from '@angular/cdk/platform';
import {CdkPortalOutlet, ComponentPortal} from '@angular/cdk/portal';
import {Observable, Subject, Subscription, defer, fromEvent, merge, of as observableOf} from 'rxjs';

/** Event that captures the state of dialog container animations. */
interface LegacyDialogAnimationEvent {
Expand Down Expand Up @@ -129,26 +127,27 @@ export class MatDialogContainer
}

/** Get Dialog name from aria attributes */
private _getDialogName = async (): Promise<void> => {
private _getDialogName = async (): Promise<string> => {
const configData = this._config;
/**_ariaLabelledByQueue and _ariaDescribedByQueue are created if ariaLabelledBy
or ariaDescribedBy values are applied to the dialog config
*/
or ariaDescribedBy values are applied to the dialog config */
const ariaLabelledByRefId = await this._ariaLabelledByQueue[0];
const ariaDescribedByRefId = await this._ariaDescribedByQueue[0];
/** Get Element to get name/title from if ariaLabelledBy or ariaDescribedBy */
const dialogNameElement =
document.getElementById(ariaLabelledByRefId) || document.getElementById(ariaDescribedByRefId);
const dialogNameInnerText =
/** If no ariaLabelledBy, ariaDescribedBy, or ariaLabel, create default aria label */
!dialogNameElement || !this._config.ariaLabel
!dialogNameElement && !this._config.ariaLabel
? 'Dialog Modal'
: /** Otherwise prioritize use of ariaLabel */
this._config.ariaLabel || dialogNameElement?.innerText || dialogNameElement?.ariaLabel;
return;
this._config.ariaLabel = dialogNameInnerText || 'Dialog Modal';
console.log(`getDialogName this.config.ariaLabel: `);
console.log(this._config.ariaLabel);
return this._config.ariaLabel;
};
ngAfterViewInit() {
const window = this._getWindow();
this._getDialogName();
}

Expand Down

0 comments on commit 4d12a2a

Please sign in to comment.