Skip to content

Commit

Permalink
test: accessibleText with shadow DOM
Browse files Browse the repository at this point in the history
  • Loading branch information
@WilcoFiers
WilcoFiers committed Jul 12, 2017
1 parent 4887927 commit c37d993
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 24 deletions.
42 changes: 22 additions & 20 deletions lib/commons/text/accessible-text.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,10 @@ var phrasingElements = ['A', 'EM', 'STRONG', 'SMALL', 'MARK', 'ABBR', 'DFN', 'I'
*/
function findLabel({ actualNode }) {
let label;
const id = axe.utils.escapeSelector(actualNode.id);
if (id) {
label = document.querySelector('label[for="' + id + '"]');
if (actualNode.id) {
label = dom.findElmsInContext({
elm: 'label', attr: 'for', value: actualNode.id, context: actualNode
})[0];
} else {
label = dom.findUp(actualNode, 'label');
}
Expand Down Expand Up @@ -214,24 +215,29 @@ text.accessibleText = function(element, inLabelledByContext) {
}

function checkARIA (element, inLabelledByContext, inControlContext) {
let returnText = '';
const { actualNode } = element;
if (!inLabelledByContext && actualNode.hasAttribute('aria-labelledby')) {
return text.sanitize(dom.idrefs(actualNode, 'aria-labelledby').map(label => {
if (actualNode === label) {
encounteredNodes.pop();
} //let element be encountered twice

const vLabel = axe.utils.getNodeFromTree(axe._tree[0], label);
return accessibleNameComputation(vLabel, true, actualNode !== label);
// Store the return text, if it's empty, fall back to aria-label
returnText = text.sanitize(dom.idrefs(actualNode, 'aria-labelledby').map(label => {
if (label !== null) {// handle unfound elements by dom.idref
if (actualNode === label) {
encounteredNodes.pop();
} //let element be encountered twice
const vLabel = axe.utils.getNodeFromTree(axe._tree[0], label);
return accessibleNameComputation(vLabel, true, actualNode !== label);
} else {
return '';
}
}).join(' '));
}

if (!(inControlContext && isEmbeddedControl(element)) &&
if (!returnText && !(inControlContext && isEmbeddedControl(element)) &&
actualNode.hasAttribute('aria-label')) {
return text.sanitize(actualNode.getAttribute('aria-label'));
}

return '';
return returnText;
}

/**
Expand All @@ -244,19 +250,15 @@ text.accessibleText = function(element, inLabelledByContext) {
* @return {string}
*/
accessibleNameComputation = function (element, inLabelledByContext, inControlContext) {
// TODO: Make sure I don't have to do this
let returnText;
if (element.actualNode instanceof Node !== true) {
/* global console */
var e = new Error('Invalid argument. Virtual Node must be provided');
console.error(e);
throw e;
}

// If the node was already checked or is null, skip
if (!element || encounteredNodes.includes(element)) {
return '';

// if the node is invalid, throw
} else if (element !== null && element.actualNode instanceof Node !== true) {
throw new Error('Invalid argument. Virtual Node must be provided');

//Step 2a: Skip if the element is hidden, unless part of labelledby
} else if(!inLabelledByContext && !dom.isVisible(element.actualNode, true)) {
return '';
Expand Down
36 changes: 32 additions & 4 deletions test/commons/text/accessible-text.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ describe('text.accessibleText', function() {
'use strict';

var fixture = document.getElementById('fixture');
var shadowSupport = axe.testUtils.shadowSupport;

afterEach(function() {
fixture.innerHTML = '';
Expand Down Expand Up @@ -397,9 +398,24 @@ describe('text.accessibleText', function() {
assert.equal(axe.commons.text.accessibleText(target), '');
});

(shadowSupport.v1 ? it : xit)('should only find aria-labelledby element in the same context ', function() {
fixture.innerHTML = '<div id="t2label">This is <input type="text" value="the value" ' +
'aria-labelledby="t1label" aria-label="ARIA Label" id="t1"> of <i>everything</i></div>' +
'<div id="shadow"></div>';

var shadow = document.getElementById('shadow').attachShadow({ mode: 'open' });
shadow.innerHTML = '<div id="t1label">This is a <b>label</b></div>' +
'<label for="t1">HTML Label</label>' +
'<input type="text" id="t2" aria-labelledby="t2label">';

axe._tree = axe.utils.getFlattenedTree(fixture);
var target = axe.utils.querySelectorAll(axe._tree, '#t1')[0];
assert.equal(axe.commons.text.accessibleText(target), 'ARIA Label');
});

describe('figure', function() {

it('shoud check aria-labelledby', function() {
it('should check aria-labelledby', function() {
fixture.innerHTML = '<div id="t1">Hello</div>' +
'<figure aria-labelledby="t1">Not part of a11yName <figcaption>Fail</figcaption></figure>';
axe._tree = axe.utils.getFlattenedTree(fixture);
Expand All @@ -408,23 +424,23 @@ describe('text.accessibleText', function() {
assert.equal(axe.commons.text.accessibleText(target), 'Hello');
});

it('shoud check aria-label', function() {
it('should check aria-label', function() {
fixture.innerHTML = '<figure aria-label="Hello">Not part of a11yName <figcaption>Fail</figcaption></figure>';
axe._tree = axe.utils.getFlattenedTree(fixture);

var target = axe.utils.querySelectorAll(axe._tree, 'figure')[0];
assert.equal(axe.commons.text.accessibleText(target), 'Hello');
});

it('shoud check the figures figcaption', function() {
it('should check the figures figcaption', function() {
fixture.innerHTML = '<figure>Not part of a11yName <figcaption>Hello</figcaption></figure>';
axe._tree = axe.utils.getFlattenedTree(fixture);

var target = axe.utils.querySelectorAll(axe._tree, 'figure')[0];
assert.equal(axe.commons.text.accessibleText(target), 'Hello');
});

it('shoud check title on figure', function() {
it('should check title on figure', function() {
fixture.innerHTML = '<figure title="Hello">Not part of a11yName <figcaption></figcaption></figure>';
axe._tree = axe.utils.getFlattenedTree(fixture);

Expand All @@ -439,6 +455,18 @@ describe('text.accessibleText', function() {
var target = axe.utils.querySelectorAll(axe._tree, 'figure')[0];
assert.equal(axe.commons.text.accessibleText(target), '');
});

(shadowSupport.v1 ? it : xit)('should check within the composed (shadow) tree', function () {
var node = document.createElement('div');
node.innerHTML = 'Hello';
var shadowRoot = node.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = '<figure>Not part of a11yName <figcaption><slot></slot></figcaption></figure>';
fixture.appendChild(node);
axe._tree = axe.utils.getFlattenedTree(fixture);

var target = axe.utils.querySelectorAll(axe._tree, 'figure')[0];
assert.equal(axe.commons.text.accessibleText(target), 'Hello');
});
});

describe('img', function() {
Expand Down

0 comments on commit c37d993

Please sign in to comment.