Skip to content

Commit 94e8494

Browse files
felixarntzfelixarntz
committedFeb 15, 2025
Enhance function declarations modal accessibility by using tab semantics for navigating through the function declarations.
1 parent 88d2c13 commit 94e8494

File tree

13 files changed

+2021
-816
lines changed

13 files changed

+2021
-816
lines changed
 

‎package-lock.json

+988-568
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@
99
"fast-glob": "^3.3.3"
1010
},
1111
"dependencies": {
12+
"@ariakit/react": "^0.4.15",
13+
"@emotion/styled": "^11.6.0",
1214
"@wordpress/icons": "^10.16.0",
1315
"@wordpress/interface": "^9.1.0",
1416
"clsx": "^2.1.1",

‎src/components/OptionsFilterSearchControl/index.js

+48-38
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import clsx from 'clsx';
77
* WordPress dependencies
88
*/
99
import { SearchControl } from '@wordpress/components';
10-
import { useState } from '@wordpress/element';
10+
import { useCallback, useState } from '@wordpress/element';
1111
import { useDebounce } from '@wordpress/compose';
1212
import { speak } from '@wordpress/a11y';
1313
import { __, _n, sprintf } from '@wordpress/i18n';
@@ -17,60 +17,70 @@ import { __, _n, sprintf } from '@wordpress/i18n';
1717
*
1818
* @since n.e.x.t
1919
*
20-
* @param {Object} props The component props.
21-
* @param {string} props.label The label for the search control.
22-
* @param {Object[]} props.options The list of options to filter. Each option must contain at least `value` and
23-
* `label` properties.
24-
* @param {Function} props.onFilter The callback function to be called when the options are filtered. It will receive
25-
* the filtered list of options, or potentially the whole list if no filter is active.
20+
* @param {Object} props The component props.
21+
* @param {string} props.label The label for the search control.
22+
* @param {Object[]} props.options The list of options to filter. Each option must contain at least `value` and
23+
* `label` properties.
24+
* @param {Function} props.onFilter The callback function to be called when the options are filtered. It will
25+
* receive the filtered list of options, or potentially the whole list if no
26+
* filter is active.
27+
* @param {string[]} props.searchFields Optional. The fields to search in the options. Defaults to
28+
* `['label', 'value']`.
2629
* @return {Component} The component to be rendered.
2730
*/
2831
export default function OptionsFilterSearchControl( props ) {
2932
const {
3033
label: labelProp,
3134
options = [],
3235
onFilter,
36+
searchFields,
3337
className,
3438
...additionalProps
3539
} = props;
3640

3741
const [ filterValue, setFilterValue ] = useState( '' );
3842
const debouncedSpeak = useDebounce( speak, 500 );
3943

40-
const setFilter = ( newFilterValue ) => {
41-
const newFilteredOptions = options.filter( ( option ) => {
42-
if ( newFilterValue === '' ) {
43-
return true;
44-
}
45-
if (
46-
option.label
47-
?.toLowerCase()
48-
.includes( newFilterValue.toLowerCase() )
49-
) {
50-
return true;
51-
}
52-
return option.value
53-
?.toLowerCase()
54-
.includes( newFilterValue.toLowerCase() );
55-
} );
44+
const setFilter = useCallback(
45+
( newFilterValue ) => {
46+
const fields = searchFields || [ 'label', 'value' ];
47+
const newFilteredOptions = options.filter( ( option ) => {
48+
if ( newFilterValue === '' ) {
49+
return true;
50+
}
5651

57-
setFilterValue( newFilterValue );
58-
onFilter( newFilteredOptions );
52+
for ( const field of fields ) {
53+
if (
54+
option[ field ]
55+
?.toLowerCase()
56+
.includes( newFilterValue.toLowerCase() )
57+
) {
58+
return true;
59+
}
60+
}
5961

60-
const resultCount = newFilteredOptions.length;
61-
const resultsFoundMessage = sprintf(
62-
/* translators: %d: number of results */
63-
_n(
64-
'%d result found.',
65-
'%d results found.',
66-
resultCount,
67-
'ai-services'
68-
),
69-
resultCount
70-
);
62+
return false;
63+
} );
7164

72-
debouncedSpeak( resultsFoundMessage, 'assertive' );
73-
};
65+
setFilterValue( newFilterValue );
66+
onFilter( newFilteredOptions );
67+
68+
const resultCount = newFilteredOptions.length;
69+
const resultsFoundMessage = sprintf(
70+
/* translators: %d: number of results */
71+
_n(
72+
'%d result found.',
73+
'%d results found.',
74+
resultCount,
75+
'ai-services'
76+
),
77+
resultCount
78+
);
79+
80+
debouncedSpeak( resultsFoundMessage, 'assertive' );
81+
},
82+
[ options, onFilter, searchFields, debouncedSpeak ]
83+
);
7484

7585
return (
7686
<SearchControl

‎src/components/Tabs/context.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
import { createContext, useContext } from '@wordpress/element';
5+
6+
export const TabsContext = createContext( undefined );
7+
8+
export const useTabsContext = () => useContext( TabsContext );

‎src/components/Tabs/index.js

+149
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
/**
2+
* External dependencies
3+
*/
4+
import { useStoreState, useTabStore } from '@ariakit/react';
5+
6+
/**
7+
* WordPress dependencies
8+
*/
9+
import { useInstanceId } from '@wordpress/compose';
10+
import { useEffect, useMemo } from '@wordpress/element';
11+
import { isRTL } from '@wordpress/i18n';
12+
13+
/**
14+
* Internal dependencies
15+
*/
16+
import { TabsContext } from './context';
17+
import { Tab } from './tab';
18+
import { TabList } from './tablist';
19+
import { TabPanel } from './tabpanel';
20+
21+
const externalToInternalTabId = ( externalId, instanceId ) => {
22+
return externalId && `${ instanceId }-${ externalId }`;
23+
};
24+
25+
const internalToExternalTabId = ( internalId, instanceId ) => {
26+
return typeof internalId === 'string'
27+
? internalId.replace( `${ instanceId }-`, '' )
28+
: internalId;
29+
};
30+
31+
/**
32+
* Tabs is a collection of React components that combine to render
33+
* an [ARIA-compliant tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).
34+
*
35+
* Tabs organizes content across different screens, data sets, and interactions.
36+
* It has two sections: a list of tabs, and the view to show when a tab is chosen.
37+
*
38+
* `Tabs` itself is a wrapper component and context provider.
39+
* It is responsible for managing the state of the tabs, and rendering one instance of the `Tabs.TabList` component and one or more instances of the `Tab.TabPanel` component.
40+
*/
41+
const Tabs = Object.assign(
42+
function Tabs( {
43+
selectOnMove = true,
44+
defaultTabId,
45+
orientation = 'horizontal',
46+
onSelect,
47+
children,
48+
selectedTabId,
49+
activeTabId,
50+
defaultActiveTabId,
51+
onActiveTabIdChange,
52+
} ) {
53+
const instanceId = useInstanceId( Tabs, 'tabs' );
54+
const store = useTabStore( {
55+
selectOnMove,
56+
orientation,
57+
defaultSelectedId: externalToInternalTabId(
58+
defaultTabId,
59+
instanceId
60+
),
61+
setSelectedId: ( newSelectedId ) => {
62+
onSelect?.(
63+
internalToExternalTabId( newSelectedId, instanceId )
64+
);
65+
},
66+
selectedId: externalToInternalTabId( selectedTabId, instanceId ),
67+
defaultActiveId: externalToInternalTabId(
68+
defaultActiveTabId,
69+
instanceId
70+
),
71+
setActiveId: ( newActiveId ) => {
72+
onActiveTabIdChange?.(
73+
internalToExternalTabId( newActiveId, instanceId )
74+
);
75+
},
76+
activeId: externalToInternalTabId( activeTabId, instanceId ),
77+
rtl: isRTL(),
78+
} );
79+
80+
const { items, activeId } = useStoreState( store );
81+
const { setActiveId } = store;
82+
83+
useEffect( () => {
84+
window.requestAnimationFrame( () => {
85+
const focusedElement =
86+
items?.[ 0 ]?.element?.ownerDocument.activeElement;
87+
88+
if (
89+
! focusedElement ||
90+
! items.some( ( item ) => focusedElement === item.element )
91+
) {
92+
return; // Return early if no tabs are focused.
93+
}
94+
95+
// If, after ariakit re-computes the active tab, that tab doesn't match
96+
// the currently focused tab, then we force an update to ariakit to avoid
97+
// any mismatches, especially when navigating to previous/next tab with
98+
// arrow keys.
99+
if ( activeId !== focusedElement.id ) {
100+
setActiveId( focusedElement.id );
101+
}
102+
} );
103+
}, [ activeId, items, setActiveId ] );
104+
105+
const contextValue = useMemo(
106+
() => ( {
107+
store,
108+
instanceId,
109+
} ),
110+
[ store, instanceId ]
111+
);
112+
113+
return (
114+
<TabsContext.Provider value={ contextValue }>
115+
{ children }
116+
</TabsContext.Provider>
117+
);
118+
},
119+
{
120+
/**
121+
* Renders a single tab.
122+
*
123+
* The currently active tab receives default styling that can be
124+
* overridden with CSS targeting `[aria-selected="true"]`.
125+
*/
126+
Tab: Object.assign( Tab, {
127+
displayName: 'Tabs.Tab',
128+
} ),
129+
/**
130+
* A wrapper component for the `Tab` components.
131+
*
132+
* It is responsible for rendering the list of tabs.
133+
*/
134+
TabList: Object.assign( TabList, {
135+
displayName: 'Tabs.TabList',
136+
} ),
137+
/**
138+
* Renders the content to display for a single tab once that tab is selected.
139+
*/
140+
TabPanel: Object.assign( TabPanel, {
141+
displayName: 'Tabs.TabPanel',
142+
} ),
143+
Context: Object.assign( TabsContext, {
144+
displayName: 'Tabs.Context',
145+
} ),
146+
}
147+
);
148+
149+
export default Tabs;

0 commit comments

Comments
 (0)