Clean up examples

cypress/integration/alertDialog.js

@@ -4,7 +4,7 @@ describe('Alert Dialog', () => {
   before(() => cy.visit('/tests/alert-dialog'))
 
   it('should prevent closing the dialog with ESC', () => {
-    cy.get('[data-a11y-dialog-show="my-accessible-dialog"]').click()
+    cy.get('[data-a11y-dialog-show="my-dialog"]').click()
     cy.get('.dialog').then(shouldBeVisible)
 
     cy.get('body').trigger('keydown', { keyCode: 27, which: 27 })

cypress/integration/dialogElement.js

@@ -28,7 +28,7 @@ describe('<dialog> element', () => {
       const dialog = win.document.querySelector('dialog')
       cy.spy(dialog, 'showModal').as('showModal')
     })
-    cy.get('[data-a11y-dialog-show="my-accessible-dialog"]').click()
+    cy.get('[data-a11y-dialog-show="my-dialog"]').click()
     cy.get('@showModal').should('be.calledOnce')
   })
 })

cypress/integration/focus.js

@@ -2,7 +2,7 @@ describe('Focus', () => {
   before(() => cy.visit('/tests/base'))
 
   it('should focus the first element in the dialog on open', () => {
-    cy.get('[data-a11y-dialog-show="my-accessible-dialog"]').click()
+    cy.get('[data-a11y-dialog-show="my-dialog"]').click()
     cy.get('.dialog-close').should('have.focus')
   })
 
@@ -17,14 +17,12 @@ describe('Focus', () => {
   })
 
   it('should maintain focus in the dialog', () => {
-    cy.get('[data-a11y-dialog-show="my-accessible-dialog"]').focus()
+    cy.get('[data-a11y-dialog-show="my-dialog"]').focus()
     cy.get('.dialog-close').should('have.focus')
   })
 
   it('should restore focus to the previously focused element', () => {
     cy.get('.dialog-close').click()
-    cy.get('[data-a11y-dialog-show="my-accessible-dialog"]').should(
-      'have.focus'
-    )
+    cy.get('[data-a11y-dialog-show="my-dialog"]').should('have.focus')
   })
 })

cypress/integration/instance.js

@@ -6,7 +6,7 @@ describe('Instance', () => {
   it('should be possible to instantiate a dialog with JavaScript', () => {
     cy.window().then(win => {
       win.instance = new win.A11yDialog(
-        win.document.getElementById('my-accessible-dialog'),
+        win.document.getElementById('my-dialog'),
         'main'
       )
     })
@@ -31,7 +31,7 @@ describe('Instance', () => {
     cy.window()
       .its('instance')
       .its('container')
-      .should('have.attr', 'id', 'my-accessible-dialog')
+      .should('have.attr', 'id', 'my-dialog')
   })
 
   it('should expose the dialog element on the instance', () => {
@@ -52,20 +52,20 @@ describe('Instance', () => {
       .its('instance')
 
       .invoke('on', 'show', container => {
-        expect(container.id).to.eq('my-accessible-dialog')
+        expect(container.id).to.eq('my-dialog')
         logs.push('Shown')
       })
 
       .invoke('on', 'hide', container => {
-        expect(container.id).to.eq('my-accessible-dialog')
+        expect(container.id).to.eq('my-dialog')
         logs.push('Hidden')
       })
 
       .invoke('on', 'hide', event)
       .invoke('off', 'hide', event)
 
       .invoke('on', 'destroy', container => {
-        expect(container.id).to.eq('my-accessible-dialog')
+        expect(container.id).to.eq('my-dialog')
         logs.push('Destroyed')
       })
 
@@ -77,7 +77,7 @@ describe('Instance', () => {
   })
 
   it('should be possible to handle dialog destroy', () => {
-    cy.get('[data-a11y-dialog-show="my-accessible-dialog"]').click()
+    cy.get('[data-a11y-dialog-show="my-dialog"]').click()
     cy.get('.dialog').then(shouldBeHidden)
   })
 })

cypress/integration/state.js

@@ -11,7 +11,7 @@ describe('State', () => {
     cy.get('[data-a11y-dialog-show="something-else"]').click()
     cy.get('.dialog').then(shouldBeHidden)
 
-    cy.get('[data-a11y-dialog-show="my-accessible-dialog"]').click()
+    cy.get('[data-a11y-dialog-show="my-dialog"]').click()
     cy.get('.dialog').then(shouldBeVisible)
   })
 
@@ -34,13 +34,13 @@ describe('State', () => {
   })
 
   it('should close when pressing ESC', () => {
-    cy.get('[data-a11y-dialog-show="my-accessible-dialog"]').click()
+    cy.get('[data-a11y-dialog-show="my-dialog"]').click()
     cy.get('body').trigger('keydown', { keyCode: 27, which: 27 })
     cy.get('.dialog').then(shouldBeHidden)
   })
 
   it('should close when clicking the backdrop', () => {
-    cy.get('[data-a11y-dialog-show="my-accessible-dialog"]').click()
+    cy.get('[data-a11y-dialog-show="my-dialog"]').click()
     cy.get('.dialog-overlay').click({ force: true })
     cy.get('.dialog').then(shouldBeHidden)
   })

example/index.html

@@ -10,19 +10,19 @@
 </head>
 
 <body>
-  <main class="main" id="main" aria-label="Content">
+  <main>
     <h1>A11y Dialog</h1>
 
     <p><a href="https://github.com/HugoGiraudel/a11y-dialog">Get the code on GitHub</a> — <button class="link-like"
-        data-a11y-dialog-show="my-accessible-dialog">Open the dialog window</button></p>
+        data-a11y-dialog-show="my-dialog">Open the dialog window</button></p>
 
     <p>This page demonstrates how to make a dialog window as accessible as possible to assistive technology users.
       Dialog windows are especially problematic for screen reader users. Often times the user is able to “escape” the
       window and interact with other parts of the page when they should not be able to. This is partially due to the way
       screen reader software interacts with the browser.</p>
 
-    <p>To see this in action, you just need to <button class="link-like"
-        data-a11y-dialog-show="my-accessible-dialog">open the dialog window</button>. Once it’s open, you should not be
+    <p>To see this in action, you just need to <button class="link-like" data-a11y-dialog-show="my-dialog">open the
+        dialog window</button>. Once it’s open, you should not be
       able to interact with other links on the main page like <a
         href="https://github.com/HugoGiraudel/a11y-dialog">going to the main GitHub page</a>. The focus is said to be
       “trapped” inside the dialog until the user explicitely decides to leave it.</p>
@@ -39,17 +39,19 @@ <h1>A11y Dialog</h1>
     </footer>
   </main>
 
-  <div class="dialog" id="my-accessible-dialog" aria-hidden="true" data-a11y-dialog="main">
+  <div class="dialog" id="my-dialog" aria-hidden="true" data-a11y-dialog="#main">
     <div class="dialog-overlay" tabindex="-1" data-a11y-dialog-hide></div>
-    <div role="dialog" class="dialog-content" aria-labelledby="dialogTitle" aria-describedby="dialogDescription">
+    <div role="dialog" class="dialog-content" aria-labelledby="my-dialog-title"
+      aria-describedby="my-dialog-description">
       <button data-a11y-dialog-hide class="dialog-close" aria-label="Close this dialog window">&times;</button>
 
-      <h1 id="dialogTitle">Subscribe to our newsletter</h1>
+      <h1 id="my-dialog-title">Subscribe to our newsletter</h1>
 
-      <p id="dialogDescription">Fill in the ridiculously small form below to receive our ridiculously cool newsletter!
+      <p id="my-dialog-description">Fill in the ridiculously small form below to receive our ridiculously cool
+        newsletter!
       </p>
 
-      <form action="#" method="post" target="_blank">
+      <form>
         <label for="email">Email (required)</label>
         <input type="email" name="EMAIL" id="email" placeholder="john.doe@gmail.com" required>
         <button type="submit" name="button">Sign up</button>
@@ -66,7 +68,7 @@ <h1 id="dialogTitle">Subscribe to our newsletter</h1>
     /*
     (function () {
       document.addEventListener('DOMContentLoaded', function () {
-        var dialogEl = document.getElementById('my-accessible-dialog');
+        var dialogEl = document.getElementById('my-dialog');
         var mainEl = document.getElementById('main');
         var dialog = new window.A11yDialog(dialogEl, mainEl);
 

example/tests/alert-dialog.html

@@ -8,18 +8,17 @@
 </head>
 
 <body>
-  <main class="main" id="main" aria-label="Content">
+  <main>
     <h1>Tests — AlertDialog</h1>
-    <button class="link-like" data-a11y-dialog-show="my-accessible-dialog">Open the dialog window</button>
+    <button class="link-like" data-a11y-dialog-show="my-dialog">Open the dialog window</button>
   </main>
 
-  <div class="dialog" id="my-accessible-dialog" data-a11y-dialog="main">
+  <div class="dialog" id="my-dialog" data-a11y-dialog>
     <div class="dialog-overlay" tabindex="-1"></div>
-    <div role="alertdialog" class="dialog-content" aria-labelledby="dialogTitle" aria-describedby="dialogDescription">
+    <div role="alertdialog" class="dialog-content" aria-labelledby="my-dialog-title">
       <button data-a11y-dialog-hide class="dialog-close" aria-label="Close this dialog window">&times;</button>
 
-      <h1 id="dialogTitle">Dialog title</h1>
-      <p id="dialogDescription">Dialog description</p>
+      <h1 id="my-dialog-title">Dialog title</h1>
 
       <form>
         <label for="email">Email (required)</label>

example/tests/base.html

@@ -8,19 +8,18 @@
 </head>
 
 <body>
-  <main class="main" id="main" aria-label="Content">
+  <main>
     <h1>Tests — Base</h1>
-    <button class="link-like" data-a11y-dialog-show="my-accessible-dialog">Open the dialog window</button>
+    <button class="link-like" data-a11y-dialog-show="my-dialog">Open the dialog window</button>
     <button class="link-like" data-a11y-dialog-show="something-else">Open the dialog window</button>
   </main>
 
-  <div class="dialog" id="my-accessible-dialog" data-a11y-dialog>
+  <div class="dialog" id="my-dialog" aria-hidden="true" data-a11y-dialog>
     <div class="dialog-overlay" tabindex="-1" data-a11y-dialog-hide></div>
-    <div role="dialog" class="dialog-content" aria-labelledby="dialogTitle" aria-describedby="dialogDescription">
+    <div role="dialog" class="dialog-content" aria-labelledby="my-dialog-title">
       <button data-a11y-dialog-hide class="dialog-close" aria-label="Close this dialog window">&times;</button>
 
-      <h1 id="dialogTitle">Dialog title</h1>
-      <p id="dialogDescription">Dialog description</p>
+      <h1 id="my-dialog-title">Dialog title</h1>
 
       <form>
         <label for="email">Email (required)</label>
@@ -29,6 +28,7 @@ <h1 id="dialogTitle">Dialog title</h1>
       </form>
     </div>
   </div>
+
   <div aria-hidden="true" id="pre-hidden-sibling"></div>
 
   <script src="../a11y-dialog.js"></script>

example/tests/dialog-element.html

@@ -8,18 +8,17 @@
 </head>
 
 <body>
-  <main class="main" id="main" aria-label="Content">
+  <main>
     <h1>Tests — Dialog Element</h1>
-    <button class="link-like" data-a11y-dialog-show="my-accessible-dialog">Open the dialog window</button>
+    <button class="link-like" data-a11y-dialog-show="my-dialog">Open the dialog window</button>
   </main>
 
-  <div class="dialog" id="my-accessible-dialog" data-a11y-dialog="main">
+  <div class="dialog" id="my-dialog" aria-hidden="true" data-a11y-dialog>
     <div class="dialog-overlay" tabindex="-1" data-a11y-dialog-hide></div>
-    <dialog class="dialog-content" aria-labelledby="dialogTitle" aria-describedby="dialogDescription" open>
+    <dialog class="dialog-content" aria-labelledby="my-dialog-title" open>
       <button data-a11y-dialog-hide class="dialog-close" aria-label="Close this dialog window">&times;</button>
 
-      <h1 id="dialogTitle">Dialog title</h1>
-      <p id="dialogDescription">Dialog description</p>
+      <h1 id="my-dialog-title">Dialog title</h1>
 
       <form>
         <label for="email">Email (required)</label>

example/tests/instance.html

@@ -8,18 +8,17 @@
 </head>
 
 <body>
-  <main class="main" id="main" aria-label="Content">
+  <main>
     <h1>Tests — Instance</h1>
-    <button class="link-like" data-a11y-dialog-show="my-accessible-dialog">Open the dialog window</button>
+    <button class="link-like" data-a11y-dialog-show="my-dialog">Open the dialog window</button>
   </main>
 
-  <div class="dialog" id="my-accessible-dialog">
+  <div class="dialog" id="my-dialog" aria-hidden="true">
     <div class="dialog-overlay" tabindex="-1" data-a11y-dialog-hide></div>
-    <div role="dialog" class="dialog-content" aria-labelledby="dialogTitle" aria-describedby="dialogDescription">
+    <div role="dialog" class="dialog-content" aria-labelledby="my-dialog-title">
       <button data-a11y-dialog-hide class="dialog-close" aria-label="Close this dialog window">&times;</button>
 
-      <h1 id="dialogTitle">Dialog title</h1>
-      <p id="dialogDescription">Dialog description</p>
+      <h1 id="my-dialog-title">Dialog title</h1>
 
       <form>
         <label for="email">Email (required)</label>