<div id="my-accessible-dialog" aria-hidden="xtrue" class="dialog">

    <div tabindex="-1" class="dialog-overlay" data-a11y-dialog-hide></div>

    <div role="dialog" aria-labelledby="dialog-title" class="dialog-content role-confirm">
        <div role="document" class="dialog-body">

            <h1 id="dialog-title" tabindex="0">Are you sure?</h1>

            <p>This is not a drill. I repeat, this is not a drill.</p>

            <div class="confirm-dialog-buttons">
                <a class="button button-simple action-alert" href="/foo">Submit</a> or
                <a href="#" data-a11y-dialog-hide>Cancel</a>
            </div>

        </div>
        <button type="button" data-a11y-dialog-hide aria-label="Close this dialog window" class="dialog-close">
        <svg width="24" height="24" class="icon icon-cancel"><use xlink:href="/assets/svg/core.svg#cancel" /></svg>
      </button>
    </div>
</div>
<div id="my-accessible-dialog" aria-hidden="xtrue" class="dialog">

  <div tabindex="-1" class="dialog-overlay" data-a11y-dialog-hide></div>

  <div role="dialog" aria-labelledby="dialog-title" class="dialog-content role-confirm">
    <div role="document" class="dialog-body">
    	
        <h1 id="dialog-title" tabindex="0">Are you sure?</h1>
        
        <p>This is not a drill. I repeat, this is not a drill.</p>

        <div class="confirm-dialog-buttons">
        	{{ render "@button-action--a-alert" }} 
        	or 
        	<a href="#" data-a11y-dialog-hide>Cancel</a>
        </div>
      
      </div>
      <button type="button" data-a11y-dialog-hide aria-label="Close this dialog window" class="dialog-close">
        {{ icon 'core/cancel' 24 }}
      </button>
  </div>
</div>
/* No context defined for this component. */

There are no notes for this item.