From cc125381021183d7d09e5eb8ccddab8d6fabb7a8 Mon Sep 17 00:00:00 2001 From: Kitty Giraudel Date: Tue, 16 Feb 2021 21:43:25 +0100 Subject: [PATCH] Clean up examples --- cypress/integration/alertDialog.js | 2 +- cypress/integration/dialogElement.js | 2 +- cypress/integration/focus.js | 8 ++--- cypress/integration/instance.js | 12 +++---- cypress/integration/state.js | 6 ++-- example/index.html | 22 ++++++------ example/styles.css | 53 ++++++++++++---------------- example/tests/alert-dialog.html | 11 +++--- example/tests/base.html | 12 +++---- example/tests/dialog-element.html | 11 +++--- example/tests/instance.html | 11 +++--- 11 files changed, 70 insertions(+), 80 deletions(-) diff --git a/cypress/integration/alertDialog.js b/cypress/integration/alertDialog.js index 7978adce..24f93908 100644 --- a/cypress/integration/alertDialog.js +++ b/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 }) diff --git a/cypress/integration/dialogElement.js b/cypress/integration/dialogElement.js index d90a5b60..b68dc8d0 100644 --- a/cypress/integration/dialogElement.js +++ b/cypress/integration/dialogElement.js @@ -28,7 +28,7 @@ describe(' 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') }) }) diff --git a/cypress/integration/focus.js b/cypress/integration/focus.js index 72d3418f..91f67e7f 100644 --- a/cypress/integration/focus.js +++ b/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') }) }) diff --git a/cypress/integration/instance.js b/cypress/integration/instance.js index 4880eb61..ae2168dc 100644 --- a/cypress/integration/instance.js +++ b/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,12 +52,12 @@ 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') }) @@ -65,7 +65,7 @@ describe('Instance', () => { .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) }) }) diff --git a/cypress/integration/state.js b/cypress/integration/state.js index dfe908a5..b73c2f07 100644 --- a/cypress/integration/state.js +++ b/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) }) diff --git a/example/index.html b/example/index.html index c2c606e4..07830906 100644 --- a/example/index.html +++ b/example/index.html @@ -10,19 +10,19 @@ -
+

A11y Dialog

Get the code on GitHub —

+ data-a11y-dialog-show="my-dialog">Open the dialog window

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.

-

To see this in action, you just need to . Once it’s open, you should not be +

To see this in action, you just need to . Once it’s open, you should not be able to interact with other links on the main page like going to the main GitHub page. The focus is said to be “trapped” inside the dialog until the user explicitely decides to leave it.

@@ -39,17 +39,19 @@

A11y Dialog

-