Skip to content

Commit

Permalink
update accessibility label on cart toggle
Browse files Browse the repository at this point in the history
  • Loading branch information
Spencer Canner committed Sep 18, 2020
1 parent 33d6aff commit c1ef115
Show file tree
Hide file tree
Showing 5 changed files with 109 additions and 11 deletions.
1 change: 1 addition & 0 deletions src/defaults/components.js
Original file line number Diff line number Diff line change
Expand Up @@ -310,6 +310,7 @@ const defaults = {
},
text: {
title: 'cart',
countAccessibilityLabel: 'Number of items in your cart:',
},
},
window: {
Expand Down
2 changes: 1 addition & 1 deletion src/styles/host/host.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 10 additions & 0 deletions src/styles/host/sass/host.css
Original file line number Diff line number Diff line change
Expand Up @@ -133,3 +133,13 @@
display: block;
}
}

.shopify-buy--visually-hidden {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
padding:0 !important;
border:0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}
18 changes: 17 additions & 1 deletion src/views/toggle.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,21 @@ export default class ToggleView extends View {
return `<p class="shopify-buy--visually-hidden">${this.component.options.text.title}</p>`;
}

get accessibilityLabel() {
return `<span>${this.component.options.text.title}</span>`;
}

get countAccessibilityLabel() {
if (!this.component.options.contents.count) {
return '';
}
return `<span>${this.component.options.text.countAccessibilityLabel} ${this.component.count}</span>`;
}

get summaryHtml() {
return `<span class="shopify-buy--visually-hidden">${this.accessibilityLabel}${this.countAccessibilityLabel}</span>`;
}

render() {
super.render();
if (this.component.options.sticky) {
Expand All @@ -44,8 +59,9 @@ export default class ToggleView extends View {
if (this.iframe) {
this.iframe.parent.setAttribute('tabindex', 0);
this.iframe.parent.setAttribute('role', 'button');
this.iframe.parent.setAttribute('aria-label', this.component.options.text.title);
this.iframe.el.setAttribute('aria-hidden', true);
this.resize();
this.node.insertAdjacentHTML('afterbegin', this.summaryHtml);
}
}

Expand Down
89 changes: 80 additions & 9 deletions test/unit/toggle/toggle-view.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import Toggle from '../../../src/components/toggle';
import View from '../../../src/view';
import { assert } from 'chai';
import iframe from '../../../src/iframe';

describe('Toggle View class', () => {
let toggle;
Expand All @@ -25,6 +27,8 @@ describe('Toggle View class', () => {
let addClassStub;
let removeClassStub;
let resizeStub;
let insertAdjacentHtmlStub;
const summaryHtml = '<span>summary</span>';

beforeEach(() => {
superRenderStub = sinon.stub(View.prototype, 'render');
Expand All @@ -34,13 +38,19 @@ describe('Toggle View class', () => {
toggle.view = Object.defineProperty(toggle.view, 'isVisible', {
writable: true,
});
toggle.view = Object.defineProperty(toggle.view, 'summaryHtml', {
writable: true,
value: summaryHtml,
});
insertAdjacentHtmlStub = sinon.stub(toggle.view.node, 'insertAdjacentHTML');
});

afterEach(() => {
superRenderStub.restore();
addClassStub.restore();
removeClassStub.restore();
resizeStub.restore();
insertAdjacentHtmlStub.restore();
});

it('calls super\'s render()', () => {
Expand Down Expand Up @@ -75,36 +85,47 @@ describe('Toggle View class', () => {
});

describe('when iframe exists', () => {
let setAttributeSpy;
let parentSetAttributeSpy;
let elSetAttributeSpy;
beforeEach(() => {
setAttributeSpy = sinon.spy();
parentSetAttributeSpy = sinon.spy();
elSetAttributeSpy = sinon.spy();
toggle.view.iframe = {
parent: {
setAttribute: setAttributeSpy,
setAttribute: parentSetAttributeSpy,
},
el: {
setAttribute: elSetAttributeSpy,
}
};
toggle.view.render();
});

it('updates three attributes', () => {
assert.calledThrice(setAttributeSpy);
it('updates two attributes on the iframe\'s parent and one attribute on the iframe\'s el', () => {
assert.calledTwice(parentSetAttributeSpy);
assert.calledOnce(elSetAttributeSpy);
});

it('sets tabindex of iframe\'s parent to zero', () => {
assert.calledWith(setAttributeSpy.getCall(0), 'tabindex', 0);
assert.calledWith(parentSetAttributeSpy.getCall(0), 'tabindex', 0);
});

it('sets role of iframe\'s parent to button', () => {
assert.calledWith(setAttributeSpy.getCall(1), 'role', 'button');
assert.calledWith(parentSetAttributeSpy.getCall(1), 'role', 'button');
});

it('sets aria-label of iframe\'s parent to text title', () => {
assert.calledWith(setAttributeSpy.getCall(2), 'aria-label', toggle.options.text.title);
it('sets aria-hidden to true on the iframe\'s el', () => {
assert.calledWith(elSetAttributeSpy.getCall(0), 'aria-hidden', true);
});

it('resizes view', () => {
assert.calledOnce(resizeStub);
});

it('inserts the summaryHtml at the beginning of the node', () => {
assert.calledOnce(insertAdjacentHtmlStub);
assert.calledWith(insertAdjacentHtmlStub, 'afterbegin', summaryHtml);
});
});
});

Expand Down Expand Up @@ -284,5 +305,55 @@ describe('Toggle View class', () => {
assert.equal(toggle.view.readableLabel, `<p class="shopify-buy--visually-hidden">${toggle.options.text.title}</p>`);
});
});

describe('accessibilityLabel', () => {
it('returns the title wrapped in a span', () => {
assert.equal(toggle.view.accessibilityLabel, `<span>${toggle.options.text.title}</span>`)
});
});

describe('countAccessibilityLabel', () => {
it('returns an empty string if count is false in the options contents', () => {
toggle.config.toggle = {
contents: {count: false},
text: {countAccessibilityLabel: 'count label'},
};

assert.equal(toggle.view.countAccessibilityLabel, '');
});

it('returns the accessibililty label with the count wrapped in a span if count is true in the options contents', () => {
const count = 2;
toggle = Object.defineProperty(toggle, 'count', {
writable: true,
});
toggle.count = count;
toggle.config.toggle = {
contents: {count: true},
text: {countAccessibilityLabel: 'count label'},
};

assert.equal(toggle.view.countAccessibilityLabel, `<span>${toggle.options.text.countAccessibilityLabel} ${count}</span>`);
});
});

describe('summaryHtml', () => {
it('returns the accessibilityLabel and countAccessibilityLabel wrapped in a visually hidden span', () => {
const accessibilityLabel = 'accessibility label';
const countAccessibilityLabel = 'count accessibility label';

toggle.view = Object.defineProperty(toggle.view, 'accessibilityLabel', {
writable: true,
value: accessibilityLabel,
});
toggle.view = Object.defineProperty(toggle.view, 'countAccessibilityLabel', {
writable: true,
value: countAccessibilityLabel,
});

assert.equal(toggle.view.summaryHtml, `<span class="shopify-buy--visually-hidden">${accessibilityLabel}${countAccessibilityLabel}</span>`)
});
});

});
});

0 comments on commit c1ef115

Please sign in to comment.