diff --git a/aries-site/src/examples/components/search/ClearSearchExample.js b/aries-site/src/examples/components/search/ClearSearchExample.js new file mode 100644 index 000000000..37e95c82b --- /dev/null +++ b/aries-site/src/examples/components/search/ClearSearchExample.js @@ -0,0 +1,16 @@ +import React from 'react'; +import { TextInput } from 'grommet'; +import { Search as SearchIcon } from 'grommet-icons'; + +export const ClearSearchExample = () => { + return ( + } + placeholder="Search" + reverse + defaultValue="sample search term" + type="search" + /> + ); +}; diff --git a/aries-site/src/examples/components/search/SearchExample.js b/aries-site/src/examples/components/search/SearchExample.js index 07e5a5f38..e566dad13 100644 --- a/aries-site/src/examples/components/search/SearchExample.js +++ b/aries-site/src/examples/components/search/SearchExample.js @@ -1,23 +1,14 @@ import React from 'react'; -import styled from 'styled-components'; import { TextInput } from 'grommet'; import { Search as SearchIcon } from 'grommet-icons'; -// Inputs should always be accompanied by labels for accessibility. An icon -// may serve as a label if 1) the icon meaning is well understood, and 2) -// has an 'aria-labelledby' attribute. For additional detail: -// https://www.w3.org/WAI/tutorials/forms/labels/#using-aria-labelledby -// https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/forms/Basic_form_hints -const StyledTextInput = styled(TextInput).attrs(() => ({ - 'aria-labelledby': 'search-icon', -}))``; - export const SearchExample = ({ ...props }) => { const [value, setValue] = React.useState(); return ( - } + } placeholder="Search" reverse value={value} diff --git a/aries-site/src/examples/components/search/SearchIconPositionExample.js b/aries-site/src/examples/components/search/SearchIconPositionExample.js index d9731d340..6881ecc7d 100644 --- a/aries-site/src/examples/components/search/SearchIconPositionExample.js +++ b/aries-site/src/examples/components/search/SearchIconPositionExample.js @@ -1,23 +1,14 @@ import React from 'react'; -import styled from 'styled-components'; import { TextInput } from 'grommet'; import { Search as SearchIcon } from 'grommet-icons'; -// Inputs should always be accompanied by labels for accessibility. An icon -// may serve as a label if 1) the icon meaning is well understood, and 2) -// has an 'aria-labelledby' attribute. For additional detail: -// https://www.w3.org/WAI/tutorials/forms/labels/#using-aria-labelledby -// https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/forms/Basic_form_hints -const StyledTextInput = styled(TextInput).attrs(() => ({ - 'aria-labelledby': 'search-icon', -}))``; - export const SearchIconPositionExample = () => { const [value, setValue] = React.useState(); return ( - } + } placeholder="Search" value={value} onChange={event => setValue(event.target.value)} diff --git a/aries-site/src/examples/components/search/SearchPlaceholder.js b/aries-site/src/examples/components/search/SearchPlaceholder.js index cb891b8e1..6df4aa887 100644 --- a/aries-site/src/examples/components/search/SearchPlaceholder.js +++ b/aries-site/src/examples/components/search/SearchPlaceholder.js @@ -1,26 +1,21 @@ import React from 'react'; -import styled from 'styled-components'; import PropTypes from 'prop-types'; import { TextInput, Box } from 'grommet'; import { Search as SearchIcon } from 'grommet-icons'; -// Inputs should always be accompanied by labels for accessibility. An icon -// may serve as a label if 1) the icon meaning is well understood, and 2) -// has an 'aria-labelledby' attribute. For additional detail: -// https://www.w3.org/WAI/tutorials/forms/labels/#using-aria-labelledby -// https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/forms/Basic_form_hints -const StyledTextInput = styled(TextInput).attrs(() => ({ - 'aria-labelledby': 'search-icon-placeholder', -}))``; - export const SearchPlaceholder = ({ bestPractice = true }) => { const [value, setValue] = React.useState(); return ( - } - placeholder={bestPractice ? 'Search' : 'Search users...'} + } + placeholder={ + bestPractice + ? 'Search' + : 'Search first name, last name, role, location, or status' + } reverse value={value} onChange={event => setValue(event.target.value)} diff --git a/aries-site/src/examples/components/search/SearchSimpleExample.js b/aries-site/src/examples/components/search/SearchSimpleExample.js index 541f435ae..f12c65ff3 100644 --- a/aries-site/src/examples/components/search/SearchSimpleExample.js +++ b/aries-site/src/examples/components/search/SearchSimpleExample.js @@ -1,24 +1,15 @@ import React from 'react'; -import styled from 'styled-components'; import { TextInput, Box } from 'grommet'; import { Search as SearchIcon } from 'grommet-icons'; -// Inputs should always be accompanied by labels for accessibility. An icon -// may serve as a label if 1) the icon meaning is well understood, and 2) -// has an 'aria-labelledby' attribute. For additional detail: -// https://www.w3.org/WAI/tutorials/forms/labels/#using-aria-labelledby -// https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/forms/Basic_form_hints -const StyledTextInput = styled(TextInput).attrs(() => ({ - 'aria-labelledby': 'search-icon', -}))``; - export const SearchSimpleExample = () => { const [value, setValue] = React.useState(); return ( - } + } placeholder="Search" plain reverse diff --git a/aries-site/src/examples/components/search/SearchSuggestionsExample.js b/aries-site/src/examples/components/search/SearchSuggestionsExample.js index 1b45d5574..2a8870f23 100644 --- a/aries-site/src/examples/components/search/SearchSuggestionsExample.js +++ b/aries-site/src/examples/components/search/SearchSuggestionsExample.js @@ -1,17 +1,7 @@ import React from 'react'; -import styled from 'styled-components'; import { TextInput } from 'grommet'; import { Search as SearchIcon } from 'grommet-icons'; -// Inputs should always be accompanied by labels for accessibility. An icon -// may serve as a label if 1) the icon meaning is well understood, and 2) -// has an 'aria-labelledby' attribute. For additional detail: -// https://www.w3.org/WAI/tutorials/forms/labels/#using-aria-labelledby -// https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/forms/Basic_form_hints -const StyledTextInput = styled(TextInput).attrs(() => ({ - 'aria-labelledby': 'search-icon', -}))``; - // const searchSuggestions = [ 'hpe pointnext', @@ -85,8 +75,9 @@ export const SearchSuggestionsExample = () => { }; return ( - } + } placeholder="Search" reverse suggestions={suggestions} diff --git a/aries-site/src/examples/components/search/index.js b/aries-site/src/examples/components/search/index.js index 446eb24aa..17bc455ba 100644 --- a/aries-site/src/examples/components/search/index.js +++ b/aries-site/src/examples/components/search/index.js @@ -1,4 +1,5 @@ export * from './SearchExample'; +export * from './ClearSearchExample'; export * from './SearchIconPositionExample'; export * from './SearchPlaceholder'; export * from './SearchSimpleExample'; diff --git a/aries-site/src/pages/components/search.mdx b/aries-site/src/pages/components/search.mdx index b616a91a1..cd6efe35a 100644 --- a/aries-site/src/pages/components/search.mdx +++ b/aries-site/src/pages/components/search.mdx @@ -1,5 +1,6 @@ import { BestPracticeGroup, Example } from '../../layouts'; import { + ClearSearchExample, SearchExample, SearchIconPositionExample, SearchPlaceholder, @@ -27,14 +28,14 @@ Many search best practices extend "behind the scenes," such as how query strings ### Placeholder -Placeholder text should only contain the text "Search". +Placeholder text should be brief and to the point. @@ -43,7 +44,7 @@ Placeholder text should only contain the text "Search". height="small" bestPractice={{ type: 'dont', - message: `Don’t use specific attributes or descriptors in the search placeholder.`, + message: `Avoid lengthly placeholder text that overflows.`, }} > @@ -64,14 +65,42 @@ Placeholder text should only contain the text "Search". ### Accessibility -Search inputs should be accessible. Ensure users have the ability to return results using their keyboard as well as clicking a button. +Search inputs should be accessible. Ensure users have the ability to return results using their keyboard or by clicking a button. -Inputs should always be accompanied by labels for accessibility. An icon may serve as a label if: +All search inputs should specify `type="search"`. -1. The icon meaning is well understood. -2. Has an 'aria-labelledby' attribute. +Use an `aria-label` in addition to a placeholder unless a visual label is provided. -For additional detail, see [ARIA form hints](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/forms/Basic_form_hints) and ['aria-labelledby'](https://www.w3.org/WAI/tutorials/forms/labels/#using-aria-labelledby). +For additional detail, see [ARIA form hints](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/forms/Basic_form_hints). + +## Search icon + +### Placement + +The search icon may be placed either to the right or left of the input field. Icon position is controlled via the [reverse](#icon-position) property. + +Place the icon in the position that most helps people to scan the page and identify the search field. Working as a visual aid, the intention should be for the search icon to be seen first and the placeholder text second. When deciding where to place the icon, consider where the search bar is located and how the user might be scanning the page (for example, in an F shape pattern from left to right). + +### Interactivity + +The search icon is not interactive. The search may be submitted either "onChange" as the user types, "onEnter", or in some cases by clicking on an accompanying button. + +## Clear search control + +When an input has `type="search"`, many browsers will insert a native "clear" control inside the input that allows the user to clear the entire search string. + +The styling of this "clear" control is controlled by each browser, so it may differ visually from HPE brand colors and icons. + +Click into the search input to see the "clear" control. + + + + ## Variants @@ -107,7 +136,7 @@ Use simple search when its input field is desired to blend with its surrounding ### Icon position -The search icon may be placed either to the right or left of the input field. Icon position is controlled via the [reverse](https://v2.grommet.io/textinput?theme=hpe#reverse) property. +Icon position is controlled via the [reverse](https://v2.grommet.io/textinput?theme=hpe#reverse) property. =16": - version "18.2.48" - resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.48.tgz#11df5664642d0bd879c1f58bc1d37205b064e8f1" - integrity sha512-qboRCl6Ie70DQQG9hhNREz81jqC1cs9EVNcjQ1AU+jH6NFfSAhVVbrrY/+nSF+Bsk4AOwm9Qa61InvMCyV+H3w== + version "18.2.51" + resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.51.tgz#01ede6dfc712796257a3443bf8d613149e5c322a" + integrity sha512-XeoMaU4CzyjdRr3c4IQQtiH7Rpo18V07rYZUucEZQwOUEtGgTXv7e6igQiQ+xnV6MbMe1qjEmKdgMNnfppnXfg== dependencies: "@types/prop-types" "*" "@types/scheduler" "*" @@ -2814,10 +2814,10 @@ atob@^2.1.2: resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9" integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg== -available-typed-arrays@^1.0.5: - version "1.0.5" - resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz#92f95616501069d07d10edb2fc37d3e1c65123b7" - integrity sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw== +available-typed-arrays@^1.0.5, available-typed-arrays@^1.0.6: + version "1.0.6" + resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.6.tgz#ac812d8ce5a6b976d738e1c45f08d0b00bc7d725" + integrity sha512-j1QzY8iPNPG4o4xmO3ptzpRxTciqD3MgEHtifP/YnJpIo58Xu+ne4BejlbkuaLfXn/nz6HFiw29bLpj2PNMdGg== axe-core@=4.7.0: version "4.7.0" @@ -3127,7 +3127,7 @@ bytes@3.1.2: resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.2.tgz#8b0beeb98605adf1b128fa4386403c009e0221a5" integrity sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg== -call-bind@^1.0.0, call-bind@^1.0.2, call-bind@^1.0.4, call-bind@^1.0.5: +call-bind@^1.0.0, call-bind@^1.0.2, call-bind@^1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.5.tgz#6fa2b7845ce0ea49bf4d8b9ef64727a2c2e2e513" integrity sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ== @@ -3175,9 +3175,9 @@ camelize@^1.0.0: integrity sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ== caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001580: - version "1.0.30001581" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001581.tgz#0dfd4db9e94edbdca67d57348ebc070dece279f4" - integrity sha512-whlTkwhqV2tUmP3oYhtNfaWGYHDdS3JYFQBKXxcUR9qqPWsRhFHhoISO2Xnl/g0xyKzht9mI1LZpiNWfMzHixQ== + version "1.0.30001582" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001582.tgz#db3070547ce0b48d9f44a509b86c4a02ba5d9055" + integrity sha512-vsJG3V5vgfduaQGVxL53uSX/HUzxyr2eA8xCo36OLal7sRcSZbibJtLeh0qja4sFOr/QQGt4opB4tOy+eOgAxg== ccount@^2.0.0: version "2.0.1" @@ -3932,9 +3932,9 @@ ee-first@1.1.1: integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow== electron-to-chromium@^1.4.648: - version "1.4.652" - resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.652.tgz#1591c7542d43c990de786374c07a9d6ad2b63787" - integrity sha512-XvQaa8hVUAuEJtLw6VKQqvdOxTOfBLWfI10t2xWpezx4XXD3k8bdLweEKeItqaa0+OkJX5l0mP1W+JWobyIDrg== + version "1.4.654" + resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.654.tgz#65dc3cd96f8d2f8d7197492509cc9726782d6919" + integrity sha512-hjfFa+Vj4WGLRVTlCQa+IivBkpcp+boGxMQfusOC/me5Y5NfU4wX7wyw+K9p8Cw4tl0BVIZGH2n7y/jMc3w4pg== elegant-spinner@^1.0.1: version "1.0.1" @@ -5148,7 +5148,7 @@ grommet-icons@^4.10.0: "grommet@https://github.com/grommet/grommet/tarball/stable": version "2.34.2" - resolved "https://github.com/grommet/grommet/tarball/stable#a8c18f43b41eac8a922f54055f4cead67db93340" + resolved "https://github.com/grommet/grommet/tarball/stable#472a0fda9ae51b3cbef3dc5bda3270877b3a8447" dependencies: grommet-icons "^4.10.0" hoist-non-react-statics "^3.2.0" @@ -5192,12 +5192,12 @@ has-symbols@^1.0.2, has-symbols@^1.0.3: resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8" integrity sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A== -has-tostringtag@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/has-tostringtag/-/has-tostringtag-1.0.0.tgz#7e133818a7d394734f941e73c3d3f9291e658b25" - integrity sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ== +has-tostringtag@^1.0.0, has-tostringtag@^1.0.1: + version "1.0.2" + resolved "https://registry.yarnpkg.com/has-tostringtag/-/has-tostringtag-1.0.2.tgz#2cdc42d40bef2e5b4eeab7c01a73c54ce7ab5abc" + integrity sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw== dependencies: - has-symbols "^1.0.2" + has-symbols "^1.0.3" hasown@^2.0.0: version "2.0.0" @@ -5466,9 +5466,9 @@ iconv-lite@0.6.3: safer-buffer ">= 2.1.2 < 3.0.0" ignore@^5.1.1, ignore@^5.2.0: - version "5.3.0" - resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.0.tgz#67418ae40d34d6999c95ff56016759c718c82f78" - integrity sha512-g7dmpshy+gD7mh88OC9NwSGTKoc3kyLAZQRU1mt53Aw/vnvfXnbC+F/7F7QoYVKbV+KNvJx8wArewKy1vXMtlg== + version "5.3.1" + resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.1.tgz#5073e554cd42c5b33b394375f538b8593e34d4ef" + integrity sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw== import-fresh@^3.2.1: version "3.3.0" @@ -10262,9 +10262,9 @@ webpack-sources@^3.2.3: integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w== webpack@^5.75.0: - version "5.90.0" - resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.90.0.tgz#313bfe16080d8b2fee6e29b6c986c0714ad4290e" - integrity sha512-bdmyXRCXeeNIePv6R6tGPyy20aUobw4Zy8r0LUS2EWO+U+Ke/gYDgsCh7bl5rB6jPpr4r0SZa6dPxBxLooDT3w== + version "5.90.1" + resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.90.1.tgz#62ab0c097d7cbe83d32523dbfbb645cdb7c3c01c" + integrity sha512-SstPdlAC5IvgFnhiRok8hqJo/+ArAbNv7rhU4fnWGHNVfN59HSQFaxZDSAL3IFG2YmqxuRs+IU33milSxbPlog== dependencies: "@types/eslint-scope" "^3.7.3" "@types/estree" "^1.0.5" @@ -10416,15 +10416,15 @@ which-promise@^1.0.0: which "^1.1.2" which-typed-array@^1.1.11, which-typed-array@^1.1.13, which-typed-array@^1.1.9: - version "1.1.13" - resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.13.tgz#870cd5be06ddb616f504e7b039c4c24898184d36" - integrity sha512-P5Nra0qjSncduVPEAr7xhoF5guty49ArDTwzJ/yNuPIbZppyRxFQsRCWrocxIY+CnMVG+qfbU2FmDKyvSGClow== + version "1.1.14" + resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.14.tgz#1f78a111aee1e131ca66164d8bdc3ab062c95a06" + integrity sha512-VnXFiIW8yNn9kIHN88xvZ4yOWchftKDsRJ8fEPacX/wl1lOvBrhsJ/OeJCXq7B0AaijRuqgzSKalJoPk+D8MPg== dependencies: - available-typed-arrays "^1.0.5" - call-bind "^1.0.4" + available-typed-arrays "^1.0.6" + call-bind "^1.0.5" for-each "^0.3.3" gopd "^1.0.1" - has-tostringtag "^1.0.0" + has-tostringtag "^1.0.1" which@^1.1.2: version "1.3.1"