From 17fe4bd1385d359cb4122543eae3661755b76b26 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Wed, 27 Nov 2019 13:55:43 +0100 Subject: [PATCH 1/4] test: Use aria-query 4.0 --- package.json | 3 +++ 1 file changed, 3 insertions(+) diff --git a/package.json b/package.json index 87f2a314..97a530c4 100644 --- a/package.json +++ b/package.json @@ -55,6 +55,9 @@ "jsdom": "^15.1.1", "kcd-scripts": "^1.7.0" }, + "resolutions": { + "**/aria-query": "https://pkg.csb.dev/eps1lon/aria-query/commit/7dc0809b/aria-query" + }, "eslintConfig": { "extends": "./node_modules/kcd-scripts/eslint.js", "rules": { From 4eeada721f2244ea3cc2e61dd67767d5ba981a75 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Wed, 27 Nov 2019 14:00:07 +0100 Subject: [PATCH 2/4] test: use aria-query canary --- package.json | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/package.json b/package.json index 97a530c4..11d17a49 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,7 @@ "@babel/runtime": "^7.6.2", "@sheerun/mutationobserver-shim": "^0.3.2", "@types/testing-library__dom": "^6.0.0", - "aria-query": "3.0.0", + "aria-query": "https://pkg.csb.dev/eps1lon/aria-query/commit/7dc0809b/aria-query", "pretty-format": "^24.9.0", "wait-for-expect": "^3.0.0" }, @@ -55,9 +55,6 @@ "jsdom": "^15.1.1", "kcd-scripts": "^1.7.0" }, - "resolutions": { - "**/aria-query": "https://pkg.csb.dev/eps1lon/aria-query/commit/7dc0809b/aria-query" - }, "eslintConfig": { "extends": "./node_modules/kcd-scripts/eslint.js", "rules": { From 7140dbad8ae07db3325571baddf88ff6cec1ee0a Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Wed, 27 Nov 2019 14:50:30 +0100 Subject: [PATCH 3/4] test: Adjust for breaking changes --- src/__tests__/element-queries.js | 4 +-- src/role-helpers.js | 48 ++++++++++++++++++++++++++++---- 2 files changed, 45 insertions(+), 7 deletions(-) diff --git a/src/__tests__/element-queries.js b/src/__tests__/element-queries.js index 8a8bc35f..c568e75a 100644 --- a/src/__tests__/element-queries.js +++ b/src/__tests__/element-queries.js @@ -426,12 +426,12 @@ test('queryAllByRole returns semantic html elements', () => { expect(queryAllByRole(/heading/i)).toHaveLength(6) expect(queryAllByRole('list')).toHaveLength(2) expect(queryAllByRole(/listitem/i)).toHaveLength(3) - expect(queryAllByRole(/textbox/i)).toHaveLength(2) + expect(queryAllByRole(/textbox/i)).toHaveLength(1) expect(queryAllByRole(/checkbox/i)).toHaveLength(1) expect(queryAllByRole(/radio/i)).toHaveLength(1) expect(queryAllByRole('row')).toHaveLength(3) expect(queryAllByRole(/rowgroup/i)).toHaveLength(2) - expect(queryAllByRole(/(table)|(textbox)/i)).toHaveLength(3) + expect(queryAllByRole(/(table)|(textbox)/i)).toHaveLength(2) expect(queryAllByRole(/img/i)).toHaveLength(1) }) diff --git a/src/role-helpers.js b/src/role-helpers.js index 6218461d..fadf6e73 100644 --- a/src/role-helpers.js +++ b/src/role-helpers.js @@ -69,16 +69,54 @@ function getImplicitAriaRoles(currentNode) { } } + //
with an accessible name? + if (currentNode.matches('form')) { + return ['form'] + } + + //
with an accessible name? + if (currentNode.matches('section')) { + return ['region'] + } + return [] } function buildElementRoleList(elementRolesMap) { function makeElementSelector({name, attributes = []}) { - return `${name}${attributes - .map(({name: attributeName, value}) => - value ? `[${attributeName}=${value}]` : `[${attributeName}]`, - ) - .join('')}` + const inclusiveAttributeSelectors = [] + const exclusiveAttributeSelectors = [] + attributes.forEach(({name: attributeName, constraints = [], value}) => { + const selector = value + ? `[${attributeName}="${value}"]` + : `[${attributeName}]` + + const shouldBeUndefined = constraints.indexOf('undefined') !== -1 + const shouldBeGreaterOne = constraints.indexOf('>1') !== -1 + const shouldHaveAnyValue = constraints.indexOf('set') !== -1 + + if (shouldHaveAnyValue) { + inclusiveAttributeSelectors.push(selector) + exclusiveAttributeSelectors.push(`[${attributeName}=""]`) + } else if (shouldBeGreaterOne) { + exclusiveAttributeSelectors.push(`[${attributeName}^="-"]`) + exclusiveAttributeSelectors.push(`[${attributeName}="0"]`) + exclusiveAttributeSelectors.push(`[${attributeName}="1"]`) + } else if (shouldBeUndefined) { + exclusiveAttributeSelectors.push(selector) + } else { + inclusiveAttributeSelectors.push(selector) + } + }) + + const inclusiveAttributeSelector = inclusiveAttributeSelectors.join('') + const exclusiveAttributeSelector = exclusiveAttributeSelectors.join('') + + return `${name}${inclusiveAttributeSelector}${ + exclusiveAttributeSelector === '' + ? '' + : `:not(${exclusiveAttributeSelector})` + }` } function getSelectorSpecificity({attributes = []}) { From 598b4de43c062d333f92942e84d5c1872cf17922 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Wed, 27 Nov 2019 15:18:45 +0100 Subject: [PATCH 4/4] Add list and combobox tests --- .../__snapshots__/role-helpers.js.snap | 31 +++++++++++++++++++ src/__tests__/role-helpers.js | 20 ++++++++++++ 2 files changed, 51 insertions(+) diff --git a/src/__tests__/__snapshots__/role-helpers.js.snap b/src/__tests__/__snapshots__/role-helpers.js.snap index ef5746b2..85a85770 100644 --- a/src/__tests__/__snapshots__/role-helpers.js.snap +++ b/src/__tests__/__snapshots__/role-helpers.js.snap @@ -169,5 +169,36 @@ textbox: data-testid="a-textarea" /> +-------------------------------------------------- +combobox: + + + + + + + --------------------------------------------------" `; diff --git a/src/__tests__/role-helpers.js b/src/__tests__/role-helpers.js index 9563b66c..248d1231 100644 --- a/src/__tests__/role-helpers.js +++ b/src/__tests__/role-helpers.js @@ -55,7 +55,14 @@ function setup() { + + + + + + +
    @@ -93,7 +100,13 @@ function setup() { radio2: getByTestId('a-radio-2'), input: getByTestId('a-input-1'), input2: getByTestId('a-input-2'), + input3: getByTestId('a-input-3'), textarea: getByTestId('a-textarea'), + combobox1: getByTestId('a-combobox-1'), + combobox2: getByTestId('a-combobox-2'), + listbox1: getByTestId('a-listbox-1'), + listbox2: getByTestId('a-listbox-2'), + listbox3: getByTestId('a-listbox-3'), } } @@ -126,6 +139,11 @@ test('getRoles returns expected roles for various dom nodes', () => { input, input2, textarea, + combobox1, + combobox2, + listbox1, + listbox2, + listbox3, } = setup() expect(getRoles(section)).toEqual({ @@ -145,6 +163,8 @@ test('getRoles returns expected roles for various dom nodes', () => { rowgroup: [tbody], command: [menuItem, menuItem2], menuitem: [menuItem, menuItem2], + combobox: [combobox1, combobox2], + listbox: [listbox1, listbox2, listbox3], }) })