3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-07-24 20:17:50 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(v2): improve Algolia search accessibility (#3166)

Browse source 
* feat(v2): improve Algolia search accessbility

* fix(v2): make sure to import modal before opening
This commit is contained in:
François Chalifour 2020-07-31 15:37:10 +02:00 • committed by GitHub
parent d560a52ef2
commit e442ac95ee
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 42 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

2
packages/docusaurus-theme-search-algolia/package.json
View file

@ -8,7 +8,7 @@
}, },
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@docsearch/react": "^1.0.0-alpha.24", "@docsearch/react": "^1.0.0-alpha.25",
"@hapi/joi": "^17.1.1", "@hapi/joi": "^17.1.1",
"algoliasearch": "^4.0.0", "algoliasearch": "^4.0.0",
"algoliasearch-helper": "^3.1.1", "algoliasearch-helper": "^3.1.1",

25
packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js
View file

@ -5,7 +5,7 @@
* LICENSE file in the root directory of this source tree. * LICENSE file in the root directory of this source tree.
*/ */
import React, {useState, useCallback} from 'react'; import React, {useState, useRef, useCallback} from 'react';
import {createPortal} from 'react-dom'; import {createPortal} from 'react-dom';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import {useHistory} from '@docusaurus/router'; import {useHistory} from '@docusaurus/router';
@ -35,7 +35,9 @@ function DocSearch(props) {
const {siteMetadata} = useDocusaurusContext(); const {siteMetadata} = useDocusaurusContext();
const {withBaseUrl} = useBaseUrlUtils(); const {withBaseUrl} = useBaseUrlUtils();
const history = useHistory(); const history = useHistory();
const searchButtonRef = useRef(null);
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const [initialQuery, setInitialQuery] = useState(null);
const importDocSearchModalIfNeeded = useCallback(() => { const importDocSearchModalIfNeeded = useCallback(() => {
if (DocSearchModal) { if (DocSearchModal) {
@ -61,7 +63,23 @@ function DocSearch(props) {
setIsOpen(false); setIsOpen(false);
}, [setIsOpen]); }, [setIsOpen]);
useDocSearchKeyboardEvents({isOpen, onOpen, onClose}); const onInput = useCallback(
(event) => {
importDocSearchModalIfNeeded().then(() => {
setIsOpen(true);
setInitialQuery(event.key);
});
},
[importDocSearchModalIfNeeded, setIsOpen, setInitialQuery],
);
useDocSearchKeyboardEvents({
isOpen,
onOpen,
onClose,
onInput,
searchButtonRef,
});
return ( return (
<> <>
@ -81,7 +99,7 @@ function DocSearch(props) {
onFocus={importDocSearchModalIfNeeded} onFocus={importDocSearchModalIfNeeded}
onMouseOver={importDocSearchModalIfNeeded} onMouseOver={importDocSearchModalIfNeeded}
onClick={onOpen} onClick={onOpen}
aria-label="Search" ref={searchButtonRef}
/> />
{isOpen && {isOpen &&
@ -89,6 +107,7 @@ function DocSearch(props) {
<DocSearchModal <DocSearchModal
onClose={onClose} onClose={onClose}
initialScrollY={window.scrollY} initialScrollY={window.scrollY}
initialQuery={initialQuery}
navigator={{ navigator={{
navigate({suggestionUrl}) { navigate({suggestionUrl}) {
history.push(suggestionUrl); history.push(suggestionUrl);

38
yarn.lock
View file

@ -1764,19 +1764,19 @@
enabled "2.0.x" enabled "2.0.x"
kuler "^2.0.0" kuler "^2.0.0"
"@docsearch/css@^1.0.0-alpha.24": "@docsearch/css@^1.0.0-alpha.25":
version "1.0.0-alpha.24" version "1.0.0-alpha.25"
resolved "https://registry.yarnpkg.com/@docsearch/css/-/css-1.0.0-alpha.24.tgz#a2e8d7e7ac50ebea17f90e974c5174b0d1a5c855" resolved "https://registry.yarnpkg.com/@docsearch/css/-/css-1.0.0-alpha.25.tgz#08eb99fc8364c71427e0885cb09892c607e0617a"
integrity sha512-BCNomH+wdpg+hWTCczwQATS4hbztOvzU/6GXco+KIgVrvpTovtPsS7BYTQMCRhs2gPSk3p3DqgW95mwCoAvt0w== integrity sha512-Mq2rFnq/SyQhDah/YjvE0dLnz8JozncOCKPqjbfyt/Q5sJwJhNfUlrZhvk2OgOirKX4izYrFq4PZgGKDokiEgQ==
"@docsearch/react@^1.0.0-alpha.24": "@docsearch/react@^1.0.0-alpha.25":
version "1.0.0-alpha.24" version "1.0.0-alpha.25"
resolved "https://registry.yarnpkg.com/@docsearch/react/-/react-1.0.0-alpha.24.tgz#c0fb18e0df9494b86e50588892a0b25e293aa0ac" resolved "https://registry.yarnpkg.com/@docsearch/react/-/react-1.0.0-alpha.25.tgz#e3bf76e888b28c1b37c6412fd99939b83a10eca6"
integrity sha512-abfYBMrZcxmUhyxjdYPCRqBCC5XMilKEmondjkjUQG0W1sYmpjrVOMYBiTq6ZTW+7urVvXPjD9bm0fBZnlI9ow== integrity sha512-s2hwj47lcpNBZVYojhbMZZ+grzm1AFFcbkgJYAl97rgzvG5X7lr8sGvzEIgjlE64t4T6FWtrM/B8XxZq1K9SxA==
dependencies: dependencies:
"@docsearch/css" "^1.0.0-alpha.24" "@docsearch/css" "^1.0.0-alpha.25"
"@francoischalifour/autocomplete-core" "^1.0.0-alpha.24" "@francoischalifour/autocomplete-core" "^1.0.0-alpha.25"
"@francoischalifour/autocomplete-preset-algolia" "^1.0.0-alpha.24" "@francoischalifour/autocomplete-preset-algolia" "^1.0.0-alpha.25"
algoliasearch "^4.0.0" algoliasearch "^4.0.0"
"@endiliey/react-ideal-image@^0.0.11": "@endiliey/react-ideal-image@^0.0.11":
@ -1876,15 +1876,15 @@
unique-filename "^1.1.1" unique-filename "^1.1.1"
which "^1.3.1" which "^1.3.1"
"@francoischalifour/autocomplete-core@^1.0.0-alpha.24": "@francoischalifour/autocomplete-core@^1.0.0-alpha.25":
version "1.0.0-alpha.24" version "1.0.0-alpha.25"
resolved "https://registry.yarnpkg.com/@francoischalifour/autocomplete-core/-/autocomplete-core-1.0.0-alpha.24.tgz#fc71704a17cf9326a66d97134508abdf02313181" resolved "https://registry.yarnpkg.com/@francoischalifour/autocomplete-core/-/autocomplete-core-1.0.0-alpha.25.tgz#16a2a88ec0919b90fa3378f1f3652ff8f9df2a05"
integrity sha512-rdWCKeIeDYjUXokdoyRNrFTreGZ8WLO/mhxAIWyLJ8ymdfXsortJqPL3fSDe57khXllGaZc/qxNsZi5RrpDRmQ== integrity sha512-wQjL1NjgGGlbeTa+fg1+HNoUiJ0+a32xEE+8wKKHu1FX4dH/FRMkn8sEulsq6QHZyg41YMeJkOUHUwBnNtyWeA==
"@francoischalifour/autocomplete-preset-algolia@^1.0.0-alpha.24": "@francoischalifour/autocomplete-preset-algolia@^1.0.0-alpha.25":
version "1.0.0-alpha.24" version "1.0.0-alpha.25"
resolved "https://registry.yarnpkg.com/@francoischalifour/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.0.0-alpha.24.tgz#f305d529d9e6c31b7e14d7aff45e912a23b187e5" resolved "https://registry.yarnpkg.com/@francoischalifour/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.0.0-alpha.25.tgz#703eb85d4f55eab66fd9cf5f18749ee830093f78"
integrity sha512-LHcbVKZaki42J30zg30ZoAuEJVysfIMSE91JT9YuOnpch+26hC8Vff9VlCs+6ACYxXGuGHdX7uuKYOx7GcoQ3A== integrity sha512-tXrNYJ5my5LzphHfVLzSkuH2XMOn8CnLkG/FkaoiNeFQ97NpYrI0LOQxOPloalz2/dulgvvSqIg85XGzjAKfEg==
"@hapi/address@2.x.x": "@hapi/address@2.x.x":
version "2.1.4" version "2.1.4"