dialog element

Pass Criteria

Reference

Test dialog-001: dialog element with aria-haspopup="dialog" on button

Dialog content goes here.

Code

<div id="div-01">
    <button id="openDialogButton1" aria-haspopup="dialog">Open Dialog 1</button>
    <dialog id="testDialog1">
      <form method="dialog">
        <p>Dialog content goes here.</p>
        <p>
          <button value="cancel">Cancel</button>
          <button id="confirmButton1" value="confirm">Confirm</button>
        </p>
      </form>
    </dialog>
  </div>

Test dialog-002: dialog element with aria-label="Test Dialog 2"

Dialog content goes here.

Code

<button id="openDialogButton2">Open Dialog 2</button>
    <dialog id="testDialog2" aria-label="Test Dialog 2">
      <form method="dialog">
        <p>Dialog content goes here.</p>
        <p>
          <button value="cancel">Cancel</button>
          <button id="confirmButton2" value="confirm">Confirm</button>
        </p>
      </form>
    </dialog>

Test dialog-003: dialog element with aria-label="Test Dialog 3" and tabindex="-1"

Dialog content goes here.

Code

<button id="openDialogButton3">Open Dialog 3</button>
    <dialog id="testDialog3" aria-label="Test Dialog 3" tabindex="-1">
      <form method="dialog">
        <p>Dialog content goes here.</p>
        <p>
          <button value="cancel">Cancel</button>
          <button id="confirmButton3" value="confirm">Confirm</button>
        </p>
      </form>
    </dialog>

Test dialog-004: dialog element with aria-label="Test Dialog 4" and structured text content.

Dialog Heading

Some introductory text.

  • Item 1
  • Item 2
  • Item 3

Code

<button id="openDialogButton4">Open Dialog 4</button>
    <dialog id="testDialog4" aria-label="Test Dialog 4">
      <form method="dialog">
        <h3>Dialog Heading</h3>
        <p>Some introductory text.</p>
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
        </ul>
        <p>
          <button value="cancel">Cancel</button>
          <button id="confirmButton4" value="confirm">Confirm</button>
        </p>
      </form>
    </dialog>

Test dialog-005: dialog element with aria-labelledby and aria-describedby

Dialog Title

This dialog has both aria-labelledby and aria-describedby attributes.

Code

<button id="openDialogButton5">Open Dialog 5</button>
    <dialog id="testDialog5" aria-labelledby="dialogTitle" aria-describedby="dialogDesc">
      <form method="dialog">
        <h3 id="dialogTitle">Dialog Title</h3>
        <p id="dialogDesc">This dialog has both aria-labelledby and aria-describedby attributes.</p>
        <p>
          <button value="cancel">Cancel</button>
          <button id="confirmButton5" value="confirm">Confirm</button>
        </p>
      </form>
    </dialog>