Improve Autocomplete accessibility (https://github.com/woocommerce/woocommerce-admin/pull/2840)
This commit is contained in:
parent
547b771cdf
commit
55fe83c70b
|
@ -123,7 +123,7 @@ export class Autocomplete extends Component {
|
|||
const filtered = [];
|
||||
|
||||
// Create a regular expression to filter the options.
|
||||
const expression = getSearchExpression( escapeRegExp( query.trim() ) );
|
||||
const expression = getSearchExpression( escapeRegExp( query ? query.trim() : '' ) );
|
||||
const search = expression ? new RegExp( expression, 'i' ) : /^$/;
|
||||
|
||||
for ( let i = 0; i < options.length; i++ ) {
|
||||
|
|
|
@ -6,7 +6,7 @@ import { Button } from '@wordpress/components';
|
|||
import classnames from 'classnames';
|
||||
import { Component, createRef } from '@wordpress/element';
|
||||
import { isEqual } from 'lodash';
|
||||
import { ENTER, ESCAPE, UP, DOWN, LEFT, TAB, RIGHT } from '@wordpress/keycodes';
|
||||
import { ENTER, ESCAPE, UP, DOWN, LEFT, RIGHT } from '@wordpress/keycodes';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
/**
|
||||
|
@ -82,7 +82,6 @@ class List extends Component {
|
|||
event.stopPropagation();
|
||||
break;
|
||||
|
||||
case TAB:
|
||||
case DOWN:
|
||||
nextSelectedIndex = null !== selectedIndex
|
||||
? ( selectedIndex + 1 ) % filteredOptions.length
|
||||
|
@ -153,6 +152,7 @@ class List extends Component {
|
|||
'is-selected': index === selectedIndex,
|
||||
} ) }
|
||||
onClick={ () => this.select( option ) }
|
||||
tabIndex="-1"
|
||||
>
|
||||
{ option.label }
|
||||
</Button>
|
||||
|
|
|
@ -55,6 +55,11 @@
|
|||
width: 24px;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
box-shadow: 0 0 0 1px $new-muriel-primary-500;
|
||||
border-color: $new-muriel-primary-500;
|
||||
}
|
||||
|
||||
&.with-value .components-base-control__label,
|
||||
&.is-active .components-base-control__label,
|
||||
&.has-tags .components-base-control__label {
|
||||
|
@ -96,7 +101,7 @@
|
|||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 56px;
|
||||
top: 57px;
|
||||
z-index: 10;
|
||||
overflow: scroll;
|
||||
max-height: 350px;
|
||||
|
|
Loading…
Reference in New Issue