src/components/dialog/dialog.js
function configureAria(element, options) {

      var role = (options.$type === 'alert') ? 'alertdialog' : 'dialog';
      var dialogContent = element.find('md-dialog-content');
      var existingDialogId = element.attr('id');
      var dialogContentId = 'dialogContent_' + (existingDialogId || $mdUtil.nextUid());

      element.attr({
        'role': role,
        'tabIndex': '-1'
      });

      if (dialogContent.length === 0) {
        dialogContent = element;
        // If the dialog element already had an ID, don't clobber it.
        if (existingDialogId) {
          dialogContentId = existingDialogId;
        }
      }

      dialogContent.attr('id', dialogContentId);
      element.attr('aria-describedby', dialogContentId);

      if (options.ariaLabel) {
        $mdAria.expect(element, 'aria-label', options.ariaLabel);
      }
      else {
        $mdAria.expectAsync(element, 'aria-label', function() {
          // If dialog title is specified, set aria-label with it
          // See https://github.com/angular/material/issues/10582
          if (options.title) {
            return options.title;
          } else {
            var words = dialogContent.text().split(/\s+/);
            if (words.length > 3) words = words.slice(0, 3).concat('...');
            return words.join(' ');
          }
        });
      }

      // Set up elements before and after the dialog content to capture focus and
      // redirect back into the dialog.
      topFocusTrap = document.createElement('div');
      topFocusTrap.classList.add('md-dialog-focus-trap');
      topFocusTrap.tabIndex = 0;

      bottomFocusTrap = topFocusTrap.cloneNode(false);

      // When focus is about to move out of the dialog, we want to intercept it and redirect it
      // back to the dialog element.
      var focusHandler = function() {
        element.focus();
      };
      topFocusTrap.addEventListener('focus', focusHandler);
      bottomFocusTrap.addEventListener('focus', focusHandler);

      // The top focus trap inserted immeidately before the md-dialog element (as a sibling).
      // The bottom focus trap is inserted at the very end of the md-dialog element (as a child).
      element[0].parentNode.insertBefore(topFocusTrap, element[0]);
      element.after(bottomFocusTrap);
    }
function configureAria(element, options) {

      var role = (options.$type === 'alert') ? 'alertdialog' : 'dialog';
      var dialogContent = element.find('md-dialog-content');
      var existingDialogId = element.attr('id');
      var dialogContentId = 'dialogContent_' + (existingDialogId || $mdUtil.nextUid());

      element.attr({
        'role': role,
        'tabIndex': '-1'
      });

      if (dialogContent.length === 0) {
        dialogContent = element;
        // If the dialog element already had an ID, don't clobber it.
        if (existingDialogId) {
          dialogContentId = existingDialogId;
        }
      }

      dialogContent.attr('id', dialogContentId);
      element.attr('aria-describedby', dialogContentId);

      if (options.ariaLabel) {
        $mdAria.expect(element, 'aria-label', options.ariaLabel);
      }
      else {
        $mdAria.expectAsync(element, 'aria-label', function() {
          // If dialog title is specified, set aria-label with it
          // See https://github.com/angular/material/issues/10582
          if (options.title) {
            return options.title;
          } else {
            var words = dialogContent.text().split(/\s+/);
            if (words.length > 3) words = words.slice(0, 3).concat('...');
            return words.join(' ');
          }
        });
      }

      // Set up elements before and after the dialog content to capture focus and
      // redirect back into the dialog.
      topFocusTrap = document.createElement('div');
      topFocusTrap.classList.add('md-dialog-focus-trap');
      topFocusTrap.tabIndex = 0;

      bottomFocusTrap = topFocusTrap.cloneNode(false);

      // When focus is about to move out of the dialog, we want to intercept it and redirect it
      // back to the dialog element.
      var focusHandler = function() {
        element.focus();
      };
      topFocusTrap.addEventListener('focus', focusHandler);
      bottomFocusTrap.addEventListener('focus', focusHandler);

      // The top focus trap inserted immeidately before the md-dialog element (as a sibling).
      // The bottom focus trap is inserted at the very end of the md-dialog element (as a child).
      element[0].parentNode.insertBefore(topFocusTrap, element[0]);
      element.after(bottomFocusTrap);
    }
function configureAria ( element , options ) { var role = ( options . $type === 'alert' ) ? 'alertdialog' : 'dialog' ; var dialogContent = element . find ( 'md-dialog-content' ) ; var existingDialogId = element . attr ( 'id' ) ; var dialogContentId = 'dialogContent_' + ( existingDialogId || $mdUtil . nextUid ( ) ) ; element . attr ( { 'role' : role , 'tabIndex' : '-1' } ) ; if ( dialogContent . length === 0 ) { dialogContent = element ; // If the dialog element already had an ID, don't clobber it. if ( existingDialogId ) { dialogContentId = existingDialogId ; } } dialogContent . attr ( 'id' , dialogContentId ) ; element . attr ( 'aria-describedby' , dialogContentId ) ; if ( options . ariaLabel ) { $mdAria . expect ( element , 'aria-label' , options . ariaLabel ) ; } else { $mdAria . expectAsync ( element , 'aria-label' , function ( ) { // If dialog title is specified, set aria-label with it // See https://github.com/angular/material/issues/10582 if ( options . title ) { return options . title ; } else { var words = dialogContent . text ( ) . split ( / \s+ / ) ; if ( words . length > 3 ) words = words . slice ( 0 , 3 ) . concat ( '...' ) ; return words . join ( ' ' ) ; } } ) ; } // Set up elements before and after the dialog content to capture focus and // redirect back into the dialog. topFocusTrap = document . createElement ( 'div' ) ; topFocusTrap . classList . add ( 'md-dialog-focus-trap' ) ; topFocusTrap . tabIndex = 0 ; bottomFocusTrap = topFocusTrap . cloneNode ( false ) ; // When focus is about to move out of the dialog, we want to intercept it and redirect it // back to the dialog element. var focusHandler = function ( ) { element . focus ( ) ; } ; topFocusTrap . addEventListener ( 'focus' , focusHandler ) ; bottomFocusTrap . addEventListener ( 'focus' , focusHandler ) ; // The top focus trap inserted immeidately before the md-dialog element (as a sibling). // The bottom focus trap is inserted at the very end of the md-dialog element (as a child). element [ 0 ] . parentNode . insertBefore ( topFocusTrap , element [ 0 ] ) ; element . after ( bottomFocusTrap ) ; }
Inject ARIA-specific attributes appropriate for Dialogs
Inject ARIA - specific attributes appropriate for Dialogs