Skip to content

Commit

Permalink
Fix failing tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@WilcoFiers
WilcoFiers committed Jun 29, 2022
1 parent 819e0ff commit 2e1e962
Show file tree
Hide file tree
Showing 4 changed files with 99 additions and 79 deletions.
35 changes: 20 additions & 15 deletions lib/commons/dom/has-content-virtual.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,30 @@ import isVisualContent from './is-visual-content';
import labelVirtual from '../aria/label-virtual';

const hiddenTextElms = [
'HEAD',
'TITLE',
'TEMPLATE',
'SCRIPT',
'STYLE',
'IFRAME',
'OBJECT',
'VIDEO',
'AUDIO',
'NOSCRIPT'
'head',
'title',
'template',
'script',
'style',
'iframe',
'object',
'video',
'audio',
'noscript'
];

/**
* Test if the element has child nodes that are non-empty text nodes
* @param {VirtualNode} elm
* @returns boolean
*/
export function hasChildTextNodes(elm) {
if (!hiddenTextElms.includes(elm.actualNode.nodeName.toUpperCase())) {
return elm.children.some(
({ actualNode }) =>
actualNode.nodeType === 3 && actualNode.nodeValue.trim()
);
if (hiddenTextElms.includes(elm.props.nodeName)) {
return false
}
return elm.children.some(({ props }) => {
return props.nodeType === 3 && props.nodeValue.trim()
})
}

/**
Expand Down
4 changes: 2 additions & 2 deletions lib/commons/dom/has-lang-text.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ import isVisible from './is-visible';
* @return boolean
*/
export default function hasLangText(virtualNode) {
if (hasChildTextNodes(virtualNode)) {
if (typeof virtualNode.children === 'undefined' || hasChildTextNodes(virtualNode)) {
return true;
}
if (virtualNode.props.nodeType === 1 && isVisualContent(virtualNode.actualNode)) {
if (virtualNode.props.nodeType === 1 && isVisualContent(virtualNode)) {
// See: https://github.com/dequelabs/axe-core/issues/3281
return !!axe.commons.text.accessibleTextVirtual(virtualNode);
}
Expand Down
50 changes: 28 additions & 22 deletions lib/commons/dom/is-visual-content.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
import { getNodeFromTree } from '../../core/utils';
import AbstractVirtualNode from '../../core/base/virtual-node/abstract-virtual-node';

const visualRoles = [
'checkbox',
'img',
'meter',
'progressbar',
'scrollbar',
'radio',
'range',
'slider',
'spinbutton',
'textbox'
Expand All @@ -13,34 +18,35 @@ const visualRoles = [
* @method isVisualContent
* @memberof axe.commons.dom
* @instance
* @param {Element} element The element to check
* @param {Element|VirtualNode} element The element to check
* @return {Boolean}
*/
function isVisualContent(element) {
/*eslint indent: 0*/
const role = element.getAttribute('role');
function isVisualContent(el) {
const vNode = el instanceof AbstractVirtualNode ? el : getNodeFromTree(el);
const role = axe.commons.aria.getExplicitRole(vNode);
console.log({ role })
if (role) {
return visualRoles.indexOf(role) !== -1;
}

switch (element.nodeName.toUpperCase()) {
case 'IMG':
case 'IFRAME':
case 'OBJECT':
case 'VIDEO':
case 'AUDIO':
case 'CANVAS':
case 'SVG':
case 'MATH':
case 'BUTTON':
case 'SELECT':
case 'TEXTAREA':
case 'KEYGEN':
case 'PROGRESS':
case 'METER':
switch (vNode.props.nodeName) {
case 'img':
case 'iframe':
case 'object':
case 'video':
case 'audio':
case 'canvas':
case 'svg':
case 'math':
case 'button':
case 'select':
case 'textarea':
case 'keygen':
case 'progress':
case 'meter':
return true;
case 'INPUT':
return element.type !== 'hidden';
case 'input':
return vNode.props.type !== 'hidden';
default:
return false;
}
Expand Down
89 changes: 49 additions & 40 deletions test/commons/dom/is-visual-content.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,110 +2,119 @@ describe('dom.isVisualContent', function() {
'use strict';

var fixture = document.getElementById('fixture');
var queryFixture = axe.testUtils.queryFixture;
var isVisualContent = axe.commons.dom.isVisualContent

afterEach(function() {
document.getElementById('fixture').innerHTML = '';
});

describe('isVisualContent', function() {
it('should return true for img', function() {
fixture.innerHTML = '<img src="">';
assert.isTrue(axe.commons.dom.isVisualContent(fixture.children[0]));
var virtualNode = queryFixture('<img src="" id="target">');
assert.isTrue(isVisualContent(virtualNode));
});

it('should return true for iframe', function() {
fixture.innerHTML = '<iframe src=""></iframe>';
assert.isTrue(axe.commons.dom.isVisualContent(fixture.children[0]));
var virtualNode = queryFixture('<iframe src="" id="target"></iframe>');
assert.isTrue(isVisualContent(virtualNode));
});

it('should return true for object', function() {
fixture.innerHTML = '<object data=""></object>';
assert.isTrue(axe.commons.dom.isVisualContent(fixture.children[0]));
var virtualNode = queryFixture('<object data="" id="target"></object>');
assert.isTrue(isVisualContent(virtualNode));
});

it('should return true for video', function() {
fixture.innerHTML = '<video src=""></video>';
assert.isTrue(axe.commons.dom.isVisualContent(fixture.children[0]));
var virtualNode = queryFixture('<video src="" id="target"></video>');
assert.isTrue(isVisualContent(virtualNode));
});

it('should return true for audio', function() {
fixture.innerHTML = '<audio src=""></audio>';
assert.isTrue(axe.commons.dom.isVisualContent(fixture.children[0]));
var virtualNode = queryFixture('<audio src="" id="target"></audio>');
assert.isTrue(isVisualContent(virtualNode));
});

it('should return true for canvas', function() {
fixture.innerHTML = '<canvas></canvas>';
assert.isTrue(axe.commons.dom.isVisualContent(fixture.children[0]));
var virtualNode = queryFixture('<canvas id="target"></canvas>');
assert.isTrue(isVisualContent(virtualNode));
});

it('should return true for svg', function() {
fixture.innerHTML = '<svg></svg>';
assert.isTrue(axe.commons.dom.isVisualContent(fixture.children[0]));
var virtualNode = queryFixture('<svg id="target"></svg>');
assert.isTrue(isVisualContent(virtualNode));
});

it('should return true for math', function() {
fixture.innerHTML = '<math></math>';
assert.isTrue(axe.commons.dom.isVisualContent(fixture.children[0]));
var virtualNode = queryFixture('<math id="target"></math>');
assert.isTrue(isVisualContent(virtualNode));
});

it('should return true for button', function() {
fixture.innerHTML = '<button></button>';
assert.isTrue(axe.commons.dom.isVisualContent(fixture.children[0]));
var virtualNode = queryFixture('<button id="target"></button>');
assert.isTrue(isVisualContent(virtualNode));
});

it('should return true for select', function() {
fixture.innerHTML = '<select></select>';
assert.isTrue(axe.commons.dom.isVisualContent(fixture.children[0]));
var virtualNode = queryFixture('<select id="target"></select>');
assert.isTrue(isVisualContent(virtualNode));
});

it('should return true for textarea', function() {
fixture.innerHTML = '<textarea></textarea>';
assert.isTrue(axe.commons.dom.isVisualContent(fixture.children[0]));
var virtualNode = queryFixture('<textarea id="target"></textarea>');
assert.isTrue(isVisualContent(virtualNode));
});

it('should return true for keygen', function() {
fixture.innerHTML = '<keygen>';
assert.isTrue(axe.commons.dom.isVisualContent(fixture.children[0]));
var virtualNode = queryFixture('<keygen id="target"></keygen');
assert.isTrue(isVisualContent(virtualNode));
});

it('should return true for progress', function() {
fixture.innerHTML = '<progress></progress>';
assert.isTrue(axe.commons.dom.isVisualContent(fixture.children[0]));
var virtualNode = queryFixture('<progress id="target"></progress>');
assert.isTrue(isVisualContent(virtualNode));
});

it('should return true for meter', function() {
fixture.innerHTML = '<meter></meter>';
assert.isTrue(axe.commons.dom.isVisualContent(fixture.children[0]));
var virtualNode = queryFixture('<meter id="target"></meter>');
assert.isTrue(isVisualContent(virtualNode));
});

it('should return true for non-hidden input', function() {
fixture.innerHTML = '<input type="text">';
assert.isTrue(axe.commons.dom.isVisualContent(fixture.children[0]));
var virtualNode = queryFixture('<input type="text" id="target">');
assert.isTrue(isVisualContent(virtualNode));
});

it('should return true for elements with a visual aria role', function() {
fixture.innerHTML =
var virtualNode = queryFixture('<div id="target">' +
'<span role="img"></span>' +
'<span role="checkbox"></span>' +
'<span role="radio"></span>' +
'<span role="range"></span>' +
'<span role="meter"></span>' +
'<span role="progressbar"></span>' +
'<span role="scrollbar"></span>' +
'<span role="slider"></span>' +
'<span role="spinbutton"></span>' +
'<span role="textbox"></span>';

for (var i = 0; i < fixture.children.length; i++) {
assert.isTrue(axe.commons.dom.isVisualContent(fixture.children[i]));
'<span role="textbox"></span>' +
'</div>'
);

for (var i = 0; i < virtualNode.children.length; i++) {
assert.isTrue(
isVisualContent(virtualNode.children[i]),
'for role ' + virtualNode.children[i].attr('role')
);
}
});

it('should return false for hidden input', function() {
fixture.innerHTML = '<input type="hidden">';
assert.isFalse(axe.commons.dom.isVisualContent(fixture.children[0]));
var virtualNode = queryFixture('<input type="hidden" id="target">');
assert.isFalse(isVisualContent(virtualNode));
});

it('should return false for p', function() {
fixture.innerHTML = '<p>Paragraph!</p>';
assert.isFalse(axe.commons.dom.isVisualContent(fixture.children[0]));
var virtualNode = queryFixture('<p id="target">Paragraph!</p>');
assert.isFalse(isVisualContent(virtualNode));
});
});
});

0 comments on commit 2e1e962

Please sign in to comment.