Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add excludeHidden for *ByText queries #1184

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/config.ts
Expand Up @@ -24,6 +24,8 @@ let config: InternalConfig = {
eventWrapper: cb => cb(),
// default value for the `hidden` option in `ByRole` queries
defaultHidden: false,
// default value for the `hidden` option in `ByText` queries
defaultExcludeHiddenText: false,
// default value for the `ignore` option in `ByText` queries
defaultIgnore: 'script, style',
// showOriginalStackTrace flag to show the full error stack traces for async errors
Expand Down
11 changes: 2 additions & 9 deletions src/queries/role.js
Expand Up @@ -13,7 +13,7 @@ import {
getImplicitAriaRoles,
prettyRoles,
isInaccessible,
isSubtreeInaccessible,
getCachedIsSubtreeInaccessible,
} from '../role-helpers'
import {wrapAllByQueryWithSuggestion} from '../query-helpers'
import {checkContainerType} from '../helpers'
Expand Down Expand Up @@ -94,14 +94,7 @@ function queryAllByRole(
}
}

const subtreeIsInaccessibleCache = new WeakMap()
function cachedIsSubtreeInaccessible(element) {
if (!subtreeIsInaccessibleCache.has(element)) {
subtreeIsInaccessibleCache.set(element, isSubtreeInaccessible(element))
}

return subtreeIsInaccessibleCache.get(element)
}
const cachedIsSubtreeInaccessible = getCachedIsSubtreeInaccessible()

return Array.from(
container.querySelectorAll(
Expand Down
18 changes: 17 additions & 1 deletion src/queries/text.ts
Expand Up @@ -6,6 +6,7 @@ import {
SelectorMatcherOptions,
Matcher,
} from '../../types'
import {getCachedIsSubtreeInaccessible, isInaccessible} from '../role-helpers'
import {
fuzzyMatches,
matches,
Expand All @@ -25,6 +26,7 @@ const queryAllByText: AllByText = (
trim,
ignore = getConfig().defaultIgnore,
normalizer,
excludeHidden = getConfig().defaultExcludeHiddenText,
} = {},
) => {
checkContainerType(container)
Expand All @@ -34,13 +36,27 @@ const queryAllByText: AllByText = (
if (typeof container.matches === 'function' && container.matches(selector)) {
baseArray = [container]
}
const cachedIsSubtreeInaccessible = getCachedIsSubtreeInaccessible()

return (
[
...baseArray,
...Array.from(container.querySelectorAll<HTMLElement>(selector)),
]
// TODO: `matches` according lib.dom.d.ts can get only `string` but according our code it can handle also boolean :)
.filter(node => !ignore || !node.matches(ignore as string))
.filter(node => {
if (ignore && node.matches(ignore as string)) {
return false
}

if (!excludeHidden) {
return true
}

return !isInaccessible(node, {
isSubtreeInaccessible: cachedIsSubtreeInaccessible,
})
})
.filter(node => matcher(getNodeText(node), node, text, matchNormalizer))
)
}
Expand Down
15 changes: 15 additions & 0 deletions src/role-helpers.js
Expand Up @@ -29,6 +29,20 @@ function isSubtreeInaccessible(element) {
return false
}

/**
* @returns {function (element: Element): boolean}
*/
function getCachedIsSubtreeInaccessible() {
const subtreeIsInaccessibleCache = new WeakMap()
return function cachedIsSubtreeInaccessible(element) {
if (!subtreeIsInaccessibleCache.has(element)) {
subtreeIsInaccessibleCache.set(element, isSubtreeInaccessible(element))
}

return subtreeIsInaccessibleCache.get(element)
}
}

/**
* Partial implementation https://www.w3.org/TR/wai-aria-1.2/#tree_exclusion
* which should only be used for elements with a non-presentational role i.e.
Expand Down Expand Up @@ -330,6 +344,7 @@ export {
logRoles,
getImplicitAriaRoles,
isSubtreeInaccessible,
getCachedIsSubtreeInaccessible,
prettyRoles,
isInaccessible,
computeAriaSelected,
Expand Down
1 change: 1 addition & 0 deletions types/config.d.ts
Expand Up @@ -12,6 +12,7 @@ export interface Config {
asyncUtilTimeout: number
computedStyleSupportsPseudoElements: boolean
defaultHidden: boolean
defaultExcludeHiddenText: boolean
/** default value for the `ignore` option in `ByText` queries */
defaultIgnore: string
showOriginalStackTrace: boolean
Expand Down
16 changes: 12 additions & 4 deletions types/queries.d.ts
Expand Up @@ -40,29 +40,37 @@ export type QueryByText<T extends HTMLElement = HTMLElement> = (
options?: SelectorMatcherOptions,
) => T | null

export interface ByTextOptions extends SelectorMatcherOptions {
/**
* If true exclude elements in the query set that are usually excluded from
* the accessibility tree.
*/
excludeHidden?: boolean
}

export type AllByText<T extends HTMLElement = HTMLElement> = (
container: HTMLElement,
id: Matcher,
options?: SelectorMatcherOptions,
options?: ByTextOptions,
) => T[]

export type FindAllByText<T extends HTMLElement = HTMLElement> = (
container: HTMLElement,
id: Matcher,
options?: SelectorMatcherOptions,
options?: ByTextOptions,
waitForElementOptions?: waitForOptions,
) => Promise<T[]>

export type GetByText<T extends HTMLElement = HTMLElement> = (
container: HTMLElement,
id: Matcher,
options?: SelectorMatcherOptions,
options?: ByTextOptions,
) => T

export type FindByText<T extends HTMLElement = HTMLElement> = (
container: HTMLElement,
id: Matcher,
options?: SelectorMatcherOptions,
options?: ByTextOptions,
waitForElementOptions?: waitForOptions,
) => Promise<T>

Expand Down