Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(acessibility): add messages for aria-label
Browse files Browse the repository at this point in the history
joaocore committed Nov 7, 2023
1 parent acb5a1c commit 4de051d
Showing 4 changed files with 18 additions and 3 deletions.
2 changes: 2 additions & 0 deletions messages/en.json
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
{
"store/search.clear-input": "Clear search field",
"store/search.submit-search": "Search Products",
"store/search.placeholder": "Search",
"store/search.searchFor": "Search for {term}",
"store/search.search-term-too-short": "Search term is too short",
2 changes: 2 additions & 0 deletions messages/es.json
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
{
"store/search.clear-input": "Borrar campo de búsqueda",
"store/search.submit-search": "Buscar Productos",
"store/search.placeholder": "Buscar",
"store/search.searchFor": "Buscar por {term}",
"store/search.search-term-too-short": "El término de búsqueda es demasiado corto",
2 changes: 2 additions & 0 deletions messages/pt.json
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
{
"store/search.clear-input": "Limpar campo de pesquisa",
"store/search.submit-search": "Buscar produtos",
"store/search.placeholder": "Buscar",
"store/search.searchFor": "Buscar por {term}",
"store/search.search-term-too-short": "O termo de busca é muito curto",
15 changes: 12 additions & 3 deletions react/components/SearchBar/AutocompleteInput.tsx
Original file line number Diff line number Diff line change
@@ -4,6 +4,7 @@ import { Input, InputSearch } from 'vtex.styleguide'
import { ExtensionPoint, useChildBlock } from 'vtex.render-runtime'
import { IconSearch, IconClose } from 'vtex.store-icons'
import type { DownshiftProps } from 'downshift'
import { useIntl } from 'react-intl'

import { useSearchBarCssHandles } from './SearchBarCssHandles'

@@ -111,6 +112,8 @@ function AutocompleteInput({
const { handles, withModifiers } = useSearchBarCssHandles()
const inputRef = useRef<HTMLInputElement>(null)

const intl = useIntl()

let dMode = displayMode

if (DISPLAY_MODES.indexOf(dMode) < 0) {
@@ -163,7 +166,9 @@ function AutocompleteInput({
visibility: hasValue ? 'visible' : 'hidden',
}}
id="closeIcon"
aria-label="Clear input text"
aria-label={intl.formatMessage({
id: 'store/search.clear-input',
})}
onClick={() => onClearInput()}
>
<CloseIcon />
@@ -178,7 +183,9 @@ function AutocompleteInput({
)} flex items-center pointer bn bg-transparent outline-0 pv0 pl0 pr3`}
onClick={() => hasValue && onGoToSearchPage()}
id="searchIcon"
aria-label="Search Products"
aria-label={intl.formatMessage({
id: 'store/search.submit-search',
})}
>
<SearchIcon />
</button>
@@ -195,7 +202,9 @@ function AutocompleteInput({
)} flex items-center h-100 pointer pv0 nr5 ph5 bn c-link`}
onClick={onGoToSearchPage}
id="searchIcon"
aria-label="Search Products"
aria-label={intl.formatMessage({
id: 'store/search.submit-search',
})}
>
<SearchIcon />
</button>

0 comments on commit 4de051d

Please sign in to comment.