Skip to content

Commit

Permalink
fix: do not hide aria-live elements, fixes #10
Browse files Browse the repository at this point in the history
  • Loading branch information
@theKashey
theKashey committed Aug 21, 2022
1 parent 951297c commit 9317455
Show file tree
Hide file tree
Showing 3 changed files with 177 additions and 130 deletions.
2 changes: 2 additions & 0 deletions __tests__/__snapshots__/index.tsx.snap
View file
@@ -1,5 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Specs handles aria-live 1`] = `"<div><div><div><div>kept</div><div>hidden</div><div aria-live=\\"polite\\">not-hidden life</div><div aria-live=\\"off\\">hidden life</div></div><div>not-hidden</div></div></div>"`;
exports[`Specs hides cross 1`] = `"<div><div><div data-aria-hidden=\\"true\\" aria-hidden=\\"true\\">hide me 1</div><div>not me 2</div><div data-aria-hidden=\\"true\\" aria-hidden=\\"true\\"><div>not me 3</div></div><div data-aria-hidden=\\"true\\" aria-hidden=\\"true\\">hide me 4</div><svg data-aria-hidden=\\"true\\" aria-hidden=\\"true\\"><text>svg</text></svg><div aria-hidden=\\"true\\" data-aria-hidden=\\"true\\">I am already hidden! 5</div></div><div>dont touch me 6</div></div>"`;
exports[`Specs hides cross 2`] = `"<div><div><div data-aria-hidden=\\"true\\" aria-hidden=\\"true\\">hide me 1</div><div data-aria-hidden=\\"true\\" aria-hidden=\\"true\\">not me 2</div><div data-aria-hidden=\\"true\\" aria-hidden=\\"true\\"><div>not me 3</div></div><div data-aria-hidden=\\"true\\" aria-hidden=\\"true\\">hide me 4</div><svg data-aria-hidden=\\"true\\" aria-hidden=\\"true\\"><text>svg</text></svg><div aria-hidden=\\"true\\" data-aria-hidden=\\"true\\">I am already hidden! 5</div></div><div>dont touch me 6</div></div>"`;
Expand Down
127 changes: 79 additions & 48 deletions __tests__/index.tsx
View file
@@ -1,14 +1,17 @@
import { render } from '@testing-library/react';
import * as React from 'react';
import {mount} from 'enzyme';
import {hideOthers} from "../src";

import { RefObject } from 'react';

import { hideOthers } from '../src';

describe('Specs', () => {
const factory = () => {
const parent = React.createRef<any>();
const target1 = React.createRef<any>();
const target2 = React.createRef<any>();
const targetOutside1 = React.createRef<any>();
const wrapper = mount(
const wrapper = render(
<div>
<div ref={parent}>
<div>hide me 1</div>
Expand All @@ -25,103 +28,105 @@ describe('Specs', () => {
<div>dont touch me 6</div>
</div>
);
const base = wrapper.html();

const html = () => wrapper.baseElement.firstElementChild!.innerHTML;

return {
base, wrapper,
parent, target1, target2, targetOutside1,
}
base: html(),
wrapper: {
html,
},
parent,
target1,
target2,
targetOutside1,
};
};

const getNearestAttribute = (node, name, parent) => {
const getNearestAttribute = (node: Element, name: string, parent: RefObject<Element>): any => {
const attr = node.getAttribute(name);

if (attr) {
return attr;
}
if (node === parent || !node.parentNode) {

if (node === parent.current || !node.parentNode) {
return null;
}
return getNearestAttribute(node.parentNode, name, parent)
}

return getNearestAttribute(node.parentNode as any, name, parent);
};

it('hides single', () => {
const {
base, parent, target1, target2, targetOutside1, wrapper
} = factory();
const { base, parent, target1, target2, targetOutside1, wrapper } = factory();

const unhide = hideOthers(target1.current, parent.current);
expect(wrapper.update().html()).toMatchSnapshot();
expect(wrapper.html()).toMatchSnapshot();

expect(getNearestAttribute(target1.current, 'aria-hidden', parent)).toBe(null);
expect(getNearestAttribute(target2.current, 'aria-hidden', parent)).toBe("true");
expect(getNearestAttribute(targetOutside1.current, 'aria-hidden', parent)).toBe("true");
expect(getNearestAttribute(target2.current, 'aria-hidden', parent)).toBe('true');
expect(getNearestAttribute(targetOutside1.current, 'aria-hidden', parent)).toBe('true');

unhide();
expect(wrapper.html()).toEqual(base);
});

it('hides multiple', () => {
const {
base, parent, target1, target2, targetOutside1, wrapper
} = factory();
const { base, parent, target1, target2, targetOutside1, wrapper } = factory();

const unhide = hideOthers([target1.current, target2.current], parent.current);
expect(wrapper.html()).toMatchSnapshot();

expect(getNearestAttribute(target1.current, 'aria-hidden', parent)).toBe(null);
expect(getNearestAttribute(target2.current, 'aria-hidden', parent)).toBe(null);
expect(getNearestAttribute(targetOutside1.current, 'aria-hidden', parent)).toBe("true");
expect(getNearestAttribute(targetOutside1.current, 'aria-hidden', parent)).toBe('true');

unhide();
expect(wrapper.html()).toEqual(base);
});

it('hides cross', () => {
const {
base, parent, target1, target2, targetOutside1, wrapper
} = factory();
const { base, parent, target1, target2, targetOutside1, wrapper } = factory();

const unhide1 = hideOthers(target1.current, parent.current);
expect(wrapper.html()).toMatchSnapshot();

expect(getNearestAttribute(target1.current, 'aria-hidden', parent)).toBe(null);
expect(getNearestAttribute(target2.current, 'aria-hidden', parent)).toBe("true");
expect(getNearestAttribute(targetOutside1.current, 'aria-hidden', parent)).toBe("true");
expect(getNearestAttribute(targetOutside1.current, 'data-aria-hidden', parent)).toBe("true");
expect(getNearestAttribute(target2.current, 'aria-hidden', parent)).toBe('true');
expect(getNearestAttribute(targetOutside1.current, 'aria-hidden', parent)).toBe('true');
expect(getNearestAttribute(targetOutside1.current, 'data-aria-hidden', parent)).toBe('true');

const unhide2 = hideOthers(target2.current, parent.current);

expect(getNearestAttribute(target1.current, 'aria-hidden', parent)).toBe("true");
expect(getNearestAttribute(target2.current, 'aria-hidden', parent)).toBe("true");
expect(getNearestAttribute(targetOutside1.current, 'aria-hidden', parent)).toBe("true");
expect(getNearestAttribute(targetOutside1.current, 'data-aria-hidden', parent)).toBe("true");
expect(getNearestAttribute(target1.current, 'aria-hidden', parent)).toBe('true');
expect(getNearestAttribute(target2.current, 'aria-hidden', parent)).toBe('true');
expect(getNearestAttribute(targetOutside1.current, 'aria-hidden', parent)).toBe('true');
expect(getNearestAttribute(targetOutside1.current, 'data-aria-hidden', parent)).toBe('true');

expect(wrapper.html()).toMatchSnapshot();
unhide1();

expect(getNearestAttribute(target1.current, 'aria-hidden', parent)).toBe("true");
expect(getNearestAttribute(target1.current, 'aria-hidden', parent)).toBe('true');
expect(getNearestAttribute(target2.current, 'aria-hidden', parent)).toBe(null);
expect(getNearestAttribute(targetOutside1.current, 'aria-hidden', parent)).toBe("true");
expect(getNearestAttribute(targetOutside1.current, 'data-aria-hidden', parent)).toBe("true");
expect(getNearestAttribute(targetOutside1.current, 'aria-hidden', parent)).toBe('true');
expect(getNearestAttribute(targetOutside1.current, 'data-aria-hidden', parent)).toBe('true');

expect(wrapper.html()).toMatchSnapshot();
unhide2();

expect(wrapper.html()).toEqual(base)
expect(wrapper.html()).toEqual(base);
});

it('hides cross markers', () => {
const {
base, parent, target1, target2, targetOutside1, wrapper
} = factory();
const { base, parent, target1, target2, targetOutside1, wrapper } = factory();

const unhide1 = hideOthers(target1.current, parent.current, 'marker1');
expect(getNearestAttribute(targetOutside1.current, 'marker1', parent)).toBe("true");
expect(getNearestAttribute(targetOutside1.current, 'marker1', parent)).toBe('true');

const unhide2 = hideOthers(target2.current, parent.current, 'marker2');

expect(getNearestAttribute(targetOutside1.current, 'marker1', parent)).toBe("true");
expect(getNearestAttribute(targetOutside1.current, 'marker2', parent)).toBe("true");
expect(getNearestAttribute(targetOutside1.current, 'marker1', parent)).toBe('true');
expect(getNearestAttribute(targetOutside1.current, 'marker2', parent)).toBe('true');

unhide1();

Expand All @@ -130,22 +135,48 @@ describe('Specs', () => {
expect(wrapper.html()).toMatchSnapshot();
unhide2();

expect(wrapper.html()).toEqual(base)
expect(wrapper.html()).toEqual(base);
});

it('handles aria-live', () => {
const wrapper = render(
<div>
<div>
<div id="to-be-hidden">hidden</div>
<div aria-live="polite">not-hidden life</div>
<div aria-live="off">hidden life</div>
</div>
<div>not-hidden</div>
</div>
);
const root = wrapper.baseElement.firstElementChild!;

const unhide = hideOthers(root.firstElementChild!.lastElementChild!, root as any);

expect(getNearestAttribute(root.querySelector('[aria-live]')!, 'aria-hidden', { current: root })).toBe(null);
expect(getNearestAttribute(root.querySelector('#to-be-hidden')!, 'aria-hidden', { current: root })).toBe('true');

expect(wrapper.baseElement.innerHTML).toMatchInlineSnapshot(
`"<div><div><div><div id=\\"to-be-hidden\\" data-aria-hidden=\\"true\\" aria-hidden=\\"true\\">hidden</div><div aria-live=\\"polite\\">not-hidden life</div><div aria-live=\\"off\\">hidden life</div></div><div>not-hidden</div></div></div>"`
);

unhide();
});

it('works on IE11', () => {
// Simulate IE11 DOM Node implementation.
HTMLElement.prototype.contains = Node.prototype.contains;
// @ts-ignore
delete Node.prototype.contains;
const {
base, parent, target1, target2, targetOutside1, wrapper
} = factory();

const { base, parent, target1, target2, targetOutside1, wrapper } = factory();

const unhide = hideOthers(target1.current, parent.current);
expect(wrapper.update().html()).toMatchSnapshot();
expect(wrapper.html()).toMatchSnapshot();

expect(getNearestAttribute(target1.current, 'aria-hidden', parent)).toBe(null);
expect(getNearestAttribute(target2.current, 'aria-hidden', parent)).toBe("true");
expect(getNearestAttribute(targetOutside1.current, 'aria-hidden', parent)).toBe("true");
expect(getNearestAttribute(target2.current, 'aria-hidden', parent)).toBe('true');
expect(getNearestAttribute(targetOutside1.current, 'aria-hidden', parent)).toBe('true');

unhide();
expect(wrapper.html()).toEqual(base);
Expand Down

0 comments on commit 9317455

Please sign in to comment.