-
-
-
-
+
diff --git a/test/acceptance/ab-testing.spec.js b/test/acceptance/ab-testing.spec.js
index d49e7d1..9d87408 100644
--- a/test/acceptance/ab-testing.spec.js
+++ b/test/acceptance/ab-testing.spec.js
@@ -28,7 +28,7 @@ describe('a/b testing', function () {
pathfora.initializeABTesting([ab]);
pathfora.initializeWidgets([widgetA, widgetB]);
- var w = $('[id*="ab-widget1"]');
+ var w = $('.pf-widget[id*="ab-widget1"]');
expect(w.length).toBe(1);
});
@@ -69,7 +69,7 @@ describe('a/b testing', function () {
pathfora.initializeABTesting([ab]);
pathfora.initializeWidgets([widget1A, widget2A, widget1B, widget2B]);
- var w = $('[id*="ab-widget2"]');
+ var w = $('.pf-widget[id*="ab-widget2"]');
expect(w.length).toBe(2);
var first = w.first();
@@ -182,9 +182,9 @@ describe('a/b testing', function () {
pathfora.initializeABTesting([ab, ab2]);
pathfora.initializeWidgets([widgetA, widgetB, widgetC, widgetD]);
- var w = $('[id*="ab-widget"]'),
- w5 = $('[id*="ab-widget5"]'),
- w6 = $('[id*="ab-widget6"]');
+ var w = $('.pf-widget[id*="ab-widget"]'),
+ w5 = $('.pf-widget[id*="ab-widget5"]'),
+ w6 = $('.pf-widget[id*="ab-widget6"]');
expect(w.length).toBe(2);
expect(w5.length).toBe(1);
@@ -233,7 +233,7 @@ describe('a/b testing', function () {
pathfora.initializeABTesting([ab]);
pathfora.initializeWidgets(widgets);
- var w = $('[id*="ab-widget10"]');
+ var w = $('.pf-widget[id*="ab-widget10"]');
expect(w.length).toBe(1);
});
diff --git a/test/acceptance/accessibility.spec.js b/test/acceptance/accessibility.spec.js
new file mode 100644
index 0000000..3d4687e
--- /dev/null
+++ b/test/acceptance/accessibility.spec.js
@@ -0,0 +1,586 @@
+import globalReset from '../utils/global-reset';
+import createAndDispatchKeydown from '../utils/create-and-dispatch-keydown';
+import {
+ createMessageWidget,
+ createFormWidget,
+ createSubscriptionWidget,
+ createSiteGateWidget,
+} from '../utils/test-helpers';
+
+var HEADLINE = 'Accessible Headline',
+ MESSAGE = 'Accessible message';
+
+// every type/layout combination whose container carries a role and needs a
+// name. bar layouts have no headline element, so the message is what names
+// them, and they are named regions rather than dialogs - a persistent promo
+// bar is not something a user opens, acts on and dismisses
+var CONTAINERS = [
+ { type: 'message', layout: 'modal', create: createMessageWidget },
+ { type: 'message', layout: 'slideout', create: createMessageWidget },
+ { type: 'message', layout: 'bar', create: createMessageWidget },
+ { type: 'message', layout: 'gate', create: createMessageWidget },
+ { type: 'form', layout: 'modal', create: createFormWidget },
+ { type: 'form', layout: 'slideout', create: createFormWidget },
+ { type: 'form', layout: 'gate', create: createFormWidget },
+ { type: 'subscription', layout: 'modal', create: createSubscriptionWidget },
+ {
+ type: 'subscription',
+ layout: 'slideout',
+ create: createSubscriptionWidget,
+ },
+ { type: 'subscription', layout: 'bar', create: createSubscriptionWidget },
+ { type: 'subscription', layout: 'gate', create: createSubscriptionWidget },
+ { type: 'sitegate', layout: 'gate', create: createSiteGateWidget },
+];
+
+// resolve an aria reference the way assistive technology does: look the id up
+// in the document, not within the widget, so a dangling or duplicated
+// reference cannot pass
+function resolveAriaRef(container, attr) {
+ var id = container.attr(attr);
+
+ if (!id) {
+ return null;
+ }
+
+ var matches = $('[id="' + id + '"]');
+ expect(matches.length).toBe(1);
+
+ return matches;
+}
+
+describe('widget accessibility', function () {
+ beforeEach(function () {
+ globalReset();
+ });
+
+ CONTAINERS.forEach(function (spec) {
+ var label = spec.type + ' ' + spec.layout;
+ var isBar = spec.layout === 'bar';
+ var hasHeadline = !isBar;
+ var role = isBar ? 'region' : 'dialog';
+
+ it('should expose the ' + label + ' as a named ' + role, function () {
+ var widget = spec.create({
+ id: 'a11y-' + spec.type + '-' + spec.layout,
+ layout: spec.layout,
+ headline: HEADLINE,
+ msg: MESSAGE,
+ });
+
+ pathfora.initializeWidgets([widget]);
+
+ var container = $('#' + widget.id + ' .pf-widget-container');
+ expect(container.length).toBe(1);
+ expect(container.attr('role')).toBe(role);
+
+ var name = resolveAriaRef(container, 'aria-labelledby');
+ expect(name).not.toBeNull();
+ expect(name.text()).toBe(hasHeadline ? HEADLINE : MESSAGE);
+
+ var description = resolveAriaRef(container, 'aria-describedby');
+
+ if (hasHeadline) {
+ expect(description).not.toBeNull();
+ expect(description.text()).toBe(MESSAGE);
+ } else {
+ expect(description).toBeNull();
+ }
+ });
+ });
+
+ it('should not reference a headline the widget does not have', function () {
+ var widget = createMessageWidget({
+ id: 'a11y-no-headline',
+ layout: 'slideout',
+ headline: '',
+ msg: MESSAGE,
+ });
+
+ pathfora.initializeWidgets([widget]);
+
+ var container = $('#' + widget.id + ' .pf-widget-container');
+ var name = resolveAriaRef(container, 'aria-labelledby');
+
+ expect(name).not.toBeNull();
+ expect(name.text()).toBe(MESSAGE);
+ expect(container.attr('aria-describedby')).toBeUndefined();
+ });
+
+ it('should not reference a message the widget does not have', function () {
+ var widget = createMessageWidget({
+ id: 'a11y-no-message',
+ layout: 'slideout',
+ headline: HEADLINE,
+ msg: '',
+ });
+
+ pathfora.initializeWidgets([widget]);
+
+ var container = $('#' + widget.id + ' .pf-widget-container');
+ var name = resolveAriaRef(container, 'aria-labelledby');
+
+ expect(name).not.toBeNull();
+ expect(name.text()).toBe(HEADLINE);
+ expect(container.attr('aria-describedby')).toBeUndefined();
+ });
+
+ it('should give each open widget its own aria reference ids', function () {
+ var first = createMessageWidget({
+ id: 'a11y-unique-1',
+ layout: 'slideout',
+ headline: 'First headline',
+ msg: 'First message',
+ });
+
+ var second = createMessageWidget({
+ id: 'a11y-unique-2',
+ layout: 'slideout',
+ headline: 'Second headline',
+ msg: 'Second message',
+ });
+
+ pathfora.initializeWidgets([first, second]);
+
+ var firstContainer = $('#' + first.id + ' .pf-widget-container'),
+ secondContainer = $('#' + second.id + ' .pf-widget-container');
+
+ // resolveAriaRef asserts that each id matches exactly one element
+ expect(resolveAriaRef(firstContainer, 'aria-labelledby').text()).toBe(
+ 'First headline',
+ );
+ expect(resolveAriaRef(firstContainer, 'aria-describedby').text()).toBe(
+ 'First message',
+ );
+ expect(resolveAriaRef(secondContainer, 'aria-labelledby').text()).toBe(
+ 'Second headline',
+ );
+ expect(resolveAriaRef(secondContainer, 'aria-describedby').text()).toBe(
+ 'Second message',
+ );
+ });
+
+ it('should namespace aria reference ids under the widget id', function () {
+ var widget = createMessageWidget({
+ id: 'a11y-id-scope',
+ layout: 'slideout',
+ headline: HEADLINE,
+ msg: MESSAGE,
+ });
+
+ pathfora.initializeWidgets([widget]);
+
+ var container = $('#' + widget.id + ' .pf-widget-container');
+
+ expect(container.attr('aria-labelledby')).toBe(
+ 'a11y-id-scope-pf-widget-headline',
+ );
+ expect(container.attr('aria-describedby')).toBe(
+ 'a11y-id-scope-pf-widget-message',
+ );
+ });
+});
+
+// a widget is visibility: hidden until the `opened` class lands ~50ms after it
+// is appended, and nothing inside a hidden subtree can take focus - so these
+// specs submit only once the widget is really on screen, the way a user would
+function whenOpened(widget, fn) {
+ setTimeout(function () {
+ expect($('#' + widget.id).hasClass('opened')).toBe(true);
+ fn($('#' + widget.id));
+ }, 100);
+}
+
+function submit(widget) {
+ var form = widget.find('form');
+
+ form.find('input[name="username"]').val('test');
+ form.find('input[name="email"]').val('test@example.com');
+ form.find('.pf-widget-ok').click();
+}
+
+describe('form state accessibility', function () {
+ beforeEach(function () {
+ globalReset();
+ });
+
+ it('should describe the dialog by its form, not its success state, before submit', function (done) {
+ var form = createFormWidget({
+ id: 'a11y-state-before-submit',
+ layout: 'slideout',
+ headline: HEADLINE,
+ msg: MESSAGE,
+ formStates: {
+ success: { headline: 'Thanks!', msg: 'We got it.', delay: 0 },
+ },
+ });
+
+ pathfora.initializeWidgets([form]);
+
+ whenOpened(form, function (widget) {
+ var container = widget.find('.pf-widget-container');
+
+ expect(resolveAriaRef(container, 'aria-labelledby').text()).toBe(
+ HEADLINE,
+ );
+ expect(resolveAriaRef(container, 'aria-describedby').text()).toBe(
+ MESSAGE,
+ );
+ done();
+ });
+ });
+
+ it('should rename the dialog after the success state it reveals', function (done) {
+ var form = createFormWidget({
+ id: 'a11y-success-state',
+ layout: 'slideout',
+ headline: HEADLINE,
+ msg: MESSAGE,
+ formStates: {
+ success: { headline: 'Thanks!', msg: 'We got it.', delay: 0 },
+ },
+ });
+
+ pathfora.initializeWidgets([form]);
+
+ whenOpened(form, function (widget) {
+ submit(widget);
+
+ expect(widget.hasClass('success')).toBe(true);
+
+ var container = widget.find('.pf-widget-container');
+
+ expect(resolveAriaRef(container, 'aria-labelledby').text()).toBe(
+ 'Thanks!',
+ );
+ expect(resolveAriaRef(container, 'aria-describedby').text()).toBe(
+ 'We got it.',
+ );
+ done();
+ });
+ });
+
+ it('should rename the dialog after the error state it reveals', function (done) {
+ var form = createFormWidget({
+ id: 'a11y-error-state',
+ layout: 'modal',
+ headline: HEADLINE,
+ msg: MESSAGE,
+ confirmAction: {
+ waitForAsyncResponse: true,
+ callback: function (name, payload, cb) {
+ cb(false);
+ },
+ },
+ formStates: {
+ error: { headline: 'Oops', msg: 'That did not work.', delay: 0 },
+ },
+ });
+
+ pathfora.initializeWidgets([form]);
+
+ whenOpened(form, function (widget) {
+ submit(widget);
+
+ expect(widget.hasClass('error')).toBe(true);
+
+ var container = widget.find('.pf-widget-container');
+
+ expect(resolveAriaRef(container, 'aria-labelledby').text()).toBe('Oops');
+ expect(resolveAriaRef(container, 'aria-describedby').text()).toBe(
+ 'That did not work.',
+ );
+ done();
+ });
+ });
+
+ it('should move focus to the dialog when a state is revealed', function (done) {
+ var form = createFormWidget({
+ id: 'a11y-state-focus',
+ layout: 'slideout',
+ headline: HEADLINE,
+ msg: MESSAGE,
+ formStates: {
+ success: { headline: 'Thanks!', msg: 'We got it.', delay: 0 },
+ },
+ });
+
+ pathfora.initializeWidgets([form]);
+
+ whenOpened(form, function (widget) {
+ submit(widget);
+
+ var container = widget.find('.pf-widget-container');
+
+ expect(document.activeElement).toBe(container[0]);
+ done();
+ });
+ });
+
+ it('should announce an inline state through a live region that was already rendered and empty', function (done) {
+ var host = document.createElement('div');
+ host.id = 'a11y-inline-host';
+ document.body.appendChild(host);
+
+ var form = createFormWidget({
+ id: 'a11y-inline-state',
+ layout: 'inline',
+ positionSelector: '#a11y-inline-host',
+ headline: HEADLINE,
+ msg: MESSAGE,
+ formStates: {
+ success: {
+ headline: 'Thanks!',
+ msg: 'We got it.',
+ delay: 0,
+ okShow: true,
+ okMessage: 'Done',
+ },
+ },
+ });
+
+ pathfora.initializeWidgets([form]);
+
+ whenOpened(form, function (widget) {
+ var region = widget.find('.pf-widget-announcement');
+
+ // the region has to be in the accessibility tree, and empty, before the
+ // state is revealed - a region that appears already holding its text is
+ // the case screen readers skip
+ expect(region.length).toBe(1);
+ expect(region.attr('role')).toBe('status');
+ expect(region.css('display')).not.toBe('none');
+ expect(region.text()).toBe('');
+
+ submit(widget);
+
+ expect(widget.find('.pf-widget-container').attr('role')).toBeUndefined();
+ expect(widget[0].contains(document.activeElement)).toBe(false);
+
+ setTimeout(function () {
+ // headline and message only: role=status is atomic, so the state's own
+ // Done button must not be read out with them
+ expect(region.text()).toBe('Thanks!. We got it.');
+
+ host.parentNode.removeChild(host);
+ done();
+ }, 10);
+ });
+ });
+
+ it('should not move focus out of an inline widget when a state is revealed', function (done) {
+ var host = document.createElement('div');
+ host.id = 'a11y-inline-focus-host';
+ document.body.appendChild(host);
+
+ var form = createFormWidget({
+ id: 'a11y-inline-focus',
+ layout: 'inline',
+ positionSelector: '#a11y-inline-focus-host',
+ headline: HEADLINE,
+ msg: MESSAGE,
+ formStates: {
+ success: { headline: 'Thanks!', msg: 'We got it.', delay: 0 },
+ },
+ });
+
+ pathfora.initializeWidgets([form]);
+
+ whenOpened(form, function (widget) {
+ submit(widget);
+
+ expect(
+ widget.find('.pf-widget-container').attr('tabindex'),
+ ).toBeUndefined();
+
+ host.parentNode.removeChild(host);
+ done();
+ });
+ });
+
+ it('should not tab into elements a revealed state has hidden', function (done) {
+ // a gate has no close button, so the first focusable element in the widget
+ // is a form field - which the success state hides
+ var gate = createFormWidget({
+ id: 'a11y-state-tab',
+ layout: 'gate',
+ headline: HEADLINE,
+ msg: MESSAGE,
+ formStates: {
+ success: {
+ headline: 'Thanks!',
+ msg: 'We got it.',
+ delay: 0,
+ okShow: true,
+ okMessage: 'Done',
+ },
+ },
+ });
+
+ pathfora.initializeWidgets([gate]);
+
+ whenOpened(gate, function (widget) {
+ submit(widget);
+
+ createAndDispatchKeydown(9, document);
+
+ var focused = document.activeElement;
+
+ expect(widget[0].contains(focused)).toBe(true);
+ expect(focused.getClientRects().length).toBeGreaterThan(0);
+ expect(focused).toBe(widget.find('.success-state .pf-widget-ok')[0]);
+ done();
+ });
+ });
+});
+
+describe('dialog focus trap', function () {
+ beforeEach(function () {
+ globalReset();
+ });
+
+ // the same set the trap itself computes: everything focusable that a
+ // revealed state has not hidden
+ function focusableIn(widget) {
+ return widget
+ .find(
+ 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+ )
+ .filter(function () {
+ return this.getClientRects().length > 0;
+ });
+ }
+
+ it('should wrap Shift+Tab from the first focusable element to the last', function (done) {
+ var gate = createFormWidget({
+ id: 'a11y-shift-tab-wrap',
+ layout: 'gate',
+ headline: HEADLINE,
+ msg: MESSAGE,
+ });
+
+ pathfora.initializeWidgets([gate]);
+
+ whenOpened(gate, function (widget) {
+ var focusable = focusableIn(widget);
+
+ expect(focusable.length).toBeGreaterThan(1);
+
+ focusable[0].focus();
+ createAndDispatchKeydown(9, document, true);
+
+ expect(document.activeElement).toBe(focusable[focusable.length - 1]);
+ done();
+ });
+ });
+
+ it('should pull Shift+Tab from outside the dialog back into it', function (done) {
+ var outside = document.createElement('button');
+ outside.id = 'a11y-shift-tab-outside';
+ document.body.appendChild(outside);
+
+ var gate = createFormWidget({
+ id: 'a11y-shift-tab-outside-widget',
+ layout: 'gate',
+ headline: HEADLINE,
+ msg: MESSAGE,
+ });
+
+ pathfora.initializeWidgets([gate]);
+
+ whenOpened(gate, function (widget) {
+ var focusable = focusableIn(widget);
+
+ outside.focus();
+ createAndDispatchKeydown(9, document, true);
+
+ expect(document.activeElement).toBe(focusable[focusable.length - 1]);
+
+ outside.parentNode.removeChild(outside);
+ done();
+ });
+ });
+
+ it('should still wrap Tab forwards from the last focusable element to the first', function (done) {
+ var gate = createFormWidget({
+ id: 'a11y-tab-wrap',
+ layout: 'gate',
+ headline: HEADLINE,
+ msg: MESSAGE,
+ });
+
+ pathfora.initializeWidgets([gate]);
+
+ whenOpened(gate, function (widget) {
+ var focusable = focusableIn(widget);
+
+ focusable[focusable.length - 1].focus();
+ createAndDispatchKeydown(9, document);
+
+ expect(document.activeElement).toBe(focusable[0]);
+ done();
+ });
+ });
+});
+
+describe('delayed widget focus', function () {
+ beforeEach(function () {
+ globalReset();
+ });
+
+ // regression: this used to be an unscoped document.querySelector for
+ // .pf-widget-ok, which threw on null for a widget that has no confirm button
+ it('should open a delayed widget that has no confirm button', function (done) {
+ var widget = createMessageWidget({
+ id: 'a11y-delayed-no-ok',
+ layout: 'modal',
+ headline: HEADLINE,
+ msg: MESSAGE,
+ okShow: false,
+ displayConditions: {
+ showDelay: 0.1,
+ },
+ });
+
+ pathfora.initializeWidgets([widget]);
+
+ setTimeout(function () {
+ var node = $('#' + widget.id);
+
+ expect(node.length).toBe(1);
+ expect(node.find('.pf-widget-ok').length).toBe(0);
+ expect(node[0].contains(document.activeElement)).toBe(false);
+ done();
+ }, 250);
+ });
+
+ // regression: the unscoped lookup focused whichever widget came first in the
+ // document, not the one the delay belonged to
+ it('should focus the confirm button of the delayed widget itself', function (done) {
+ var first = createMessageWidget({
+ id: 'a11y-delayed-first',
+ layout: 'modal',
+ headline: HEADLINE,
+ msg: MESSAGE,
+ });
+
+ var delayed = createMessageWidget({
+ id: 'a11y-delayed-second',
+ layout: 'modal',
+ headline: HEADLINE,
+ msg: MESSAGE,
+ displayConditions: {
+ showDelay: 0.1,
+ },
+ });
+
+ pathfora.initializeWidgets([first, delayed]);
+
+ setTimeout(function () {
+ expect(document.activeElement).toBe(
+ $('#' + delayed.id + ' .pf-widget-ok')[0],
+ );
+ done();
+ }, 250);
+ });
+});
diff --git a/test/utils/create-and-dispatch-keydown.js b/test/utils/create-and-dispatch-keydown.js
index 7b18d17..5f71b67 100644
--- a/test/utils/create-and-dispatch-keydown.js
+++ b/test/utils/create-and-dispatch-keydown.js
@@ -1,7 +1,8 @@
-export default function createAndDispatchKeydown (key, target) {
+export default function createAndDispatchKeydown (key, target, shiftKey) {
var eventObj = document.createEvent('Event');
eventObj.initEvent('keydown', false, false);
eventObj.which = key;
eventObj.keyCode = key;
+ eventObj.shiftKey = shiftKey === true;
target.dispatchEvent(eventObj);
}