Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improve Autocomplete accessibility (https://github.com/woocommerce/woocommerce-admin/pull/2840)

This commit is contained in:
Joshua T Flowers 2019-08-27 11:24:03 +08:00 committed by GitHub
parent 547b771cdf
commit 55fe83c70b
3 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
plugins/woocommerce-admin/packages/components/src/autocomplete/index.js
View File

@ -123,7 +123,7 @@ export class Autocomplete extends Component {
const filtered = []; const filtered = [];
// Create a regular expression to filter the options. // 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' ) : /^$/; const search = expression ? new RegExp( expression, 'i' ) : /^$/;
for ( let i = 0; i < options.length; i++ ) { for ( let i = 0; i < options.length; i++ ) {

4
plugins/woocommerce-admin/packages/components/src/autocomplete/list.js
View File

@ -6,7 +6,7 @@ import { Button } from '@wordpress/components';
import classnames from 'classnames'; import classnames from 'classnames';
import { Component, createRef } from '@wordpress/element'; import { Component, createRef } from '@wordpress/element';
import { isEqual } from 'lodash'; 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'; import PropTypes from 'prop-types';
/** /**
@ -82,7 +82,6 @@ class List extends Component {
event.stopPropagation(); event.stopPropagation();
break; break;
case TAB:
case DOWN: case DOWN:
nextSelectedIndex = null !== selectedIndex nextSelectedIndex = null !== selectedIndex
? ( selectedIndex + 1 ) % filteredOptions.length ? ( selectedIndex + 1 ) % filteredOptions.length
@ -153,6 +152,7 @@ class List extends Component {
'is-selected': index === selectedIndex, 'is-selected': index === selectedIndex,
} ) } } ) }
onClick={ () => this.select( option ) } onClick={ () => this.select( option ) }
tabIndex="-1"
> >
{ option.label } { option.label }
</Button> </Button>

7
plugins/woocommerce-admin/packages/components/src/autocomplete/style.scss
View File

@ -55,6 +55,11 @@
width: 24px; 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, &.with-value .components-base-control__label,
&.is-active .components-base-control__label, &.is-active .components-base-control__label,
&.has-tags .components-base-control__label { &.has-tags .components-base-control__label {
@ -96,7 +101,7 @@
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
top: 56px; top: 57px;
z-index: 10; z-index: 10;
overflow: scroll; overflow: scroll;
max-height: 350px; max-height: 350px;