[AutoComplete] Rebuild autocomplete internals to use new accessible components #3910

voiid · 2021-01-25T16:37:37Z

WHY are these changes introduced?

Fixes accessibility issues on all uses of the Autocomplete component.

This PR includes the following:

Introduction of new ComboBox and ListBox components built by @dleroux with help from @AndrewMusgrave. These are currently subcomponents of Autocomplete for now, but our intention is to get these in a state (mostly missing documentation) to become top level components in the future. These follow the aria 1.2 spec.
Storybook story bug fixes to better showcase the component. New stories introduced for more complete documentation of the components capabilities.
New and improved Autocomplete component which supports much more intuitive visual representations for different states, much improved keyboard navigation and screen reader support.

Visual change audit

To maintain full backwards compatibility we did our absolute best to match all of the visuals of the component 1 to 1. There are a few intentional changes to help differentiate between hover and selection states but otherwise, everything should match.

The link below contains a comprehensive before and after comparison of just about every prop combination.

https://docs.google.com/spreadsheets/d/12X7igZB6jN3mzuhaXL9WK2SlK2HvRhJyAepCJkZRB7M/edit?userstoinvite=andrew.musgrave@shopify.com&ts=6011e9fc#gid=0

Render graphs

It's hard to tell the whole story of render times in screen shots - these shots are mainly displaying the render amounts which can we been above the flame graph to the right

Before	After

Test coverage

The test coverage is near perfect. The failure stems from the old combobox being added as additions

8/8 Old	8/8 Old	8/10 Old - 2/10 New

WHAT is this pull request doing?

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}

🎩 checklist

Tested on mobile
Tested on multiple browsers
Tested for accessibility
Updated the component's README.md with documentation changes
Tophatted documentation changes in the style guide
For visual design changes, pinged one of @ HYPD, @ mirualves, @ sarahill, or @ ry5n to update the Polaris UI kit

github-actions · 2021-01-25T16:39:54Z

❌ Something went wrong with the Discoverability Github Action. This doesn't stop you from shipping your changes.

Details:


RangeError: Maximum call stack size exceeded

We’ve been notified and will take a look.
If you need immediate help, ping @amrocha or @kaelig on Slack

AndrewMusgrave · 2021-02-01T17:10:20Z

locales/en.json

    "Autocomplete": {
-      "spinnerAccessibilityLabel": "Loading"
+      "spinnerAccessibilityLabel": "Loading",
+      "ellipsis": "{content}…"


We're moving the ellipsis prop to a translated string for internationalization

AndrewMusgrave · 2021-02-01T17:11:10Z

src/components/Autocomplete/Autocomplete.tsx

  id?: string;
  /** Collection of options to be listed */
-  options: ComboBoxProps['options'];
+  options: ComboBoxOldProps['options'];


We're keep the interface the same to prevent breaking changes

AndrewMusgrave · 2021-02-01T17:11:24Z

src/components/Autocomplete/Autocomplete.tsx

 export const Autocomplete: React.FunctionComponent<AutocompleteProps> & {
-  ComboBox: typeof ComboBox;
-  TextField: typeof TextField;
+  ComboBox: typeof ComboBoxOld;


AndrewMusgrave · 2021-02-01T17:12:26Z

src/components/Autocomplete/Autocomplete.tsx

-  ComboBox: typeof ComboBox;
-  TextField: typeof TextField;
+  ComboBox: typeof ComboBoxOld;
+  TextField: typeof ComboBox.TextField;


Both text fields extend the base Polaris textfield without adding additional API's

AndrewMusgrave · 2021-02-01T17:14:28Z

src/components/Autocomplete/components/ComboBox/ComboBox.tsx

@@ -1,377 +1,153 @@
-import React, {useState, useEffect, useCallback} from 'react';
+import React, {useState, useCallback, useMemo, Children} from 'react';


This component is a rebuild not a refactor so feel free to ignore the diff

AndrewMusgrave · 2021-02-01T17:15:51Z

src/components/Autocomplete/components/ComboBoxOld/ComboBox.tsx

@@ -0,0 +1,377 @@
+import React, {useState, useEffect, useCallback} from 'react';


This is the old combobox - nothing has been changed

AndrewMusgrave · 2021-02-01T17:16:15Z

src/components/Autocomplete/components/ComboBoxOld/tests/ComboBox.test.tsx

@@ -0,0 +1,661 @@
+import React from 'react';


AndrewMusgrave · 2021-02-01T17:20:04Z

src/components/Autocomplete/components/MappedAction/MappedAction.tsx

@@ -0,0 +1,122 @@
+import React, {useMemo} from 'react';


We created a new action component to map the difference between the old & new API

AndrewMusgrave · 2021-02-01T17:20:32Z

src/components/Autocomplete/components/MappedOption/MappedOption.tsx

@@ -0,0 +1,51 @@
+import React, {memo} from 'react';


We create a new option component to map the differences between the old + new API

AndrewMusgrave · 2021-02-01T17:22:28Z

src/test-utilities/react-testing.tsx

+import {
+  createMount,
+  mount,
+  Element as ReactTestingElement,


Renaming because Element from the DOM is global

AndrewMusgrave · 2021-02-01T17:24:28Z

tests/setup.ts

-const IGNORE_WARN_REGEXES: RegExp[] = [
-  /Deprecation: <FilterControl \/> is deprecated\. This is a private component, do not use it\. This component might be removed in a minor version update\. Use <Filters \/> instead\./,
-];
+const IGNORE_WARN_REGEXES: RegExp[] = [/Deprecation:.*/];


Changed this to a more general deprecation warning to remove test clutter.

alex-page

This looks good to me. I would strongly recommend getting these child components down to the global level as soon as possible. The tech debt of supporting them isn't high value.

dleroux · 2021-02-05T14:49:44Z

Thank you much for doing this @voiid and @AndrewMusgrave

2 things I noticed while tophatting:

when the list is scrollable using the keys keeps the list scrolled at the top. Was this an intentional change? I'd expect the focus to move the last visible item before scrolling.

I see that we are still using actual inputs in the list when it's selectable. I was under the impression that ListBox should not contain any focusable elements. I believe the reasoning is that it can steal focus from the field and interfere with screen readers. I see that is not happening though so we might be ok?

AndrewMusgrave · 2021-02-05T21:02:53Z

@dleroux The keyboard focus was an intentional change. We've fixed some bugs in the interaction and reverting to how it's currently in the autocomplete.

As for the checkbox @voiid reached out to @HYPD for confirmation on visuals. The new styles weren't a great indication that multi-select was possible. So we've reverted to the old visuals. The checkbox has a role of presentation so it'll be skipped by screen readers & if you've top-hatted that it cannot gain focus I think we've in the clear!

@voiid anything else you wanted to add?

voiid · 2021-02-05T21:58:28Z

@dleroux @AndrewMusgrave Just about covers it! Both changes were made to reduce friction with getting this change out the door.

For scrolling, I was thinking that we could revisit the scrolling behaviour with the team when we do the work to move the ComboBox and ListBox to the global level. Having it match the existing functionality for now is an effort to reduce any friction with getting this particular change out the door.

For checkboxes: The reason this change in particular was important is that while the new version communicated multiple selection very well once selections were made, having the visual checkboxes show does a better job of letting users know that multiple selection is possible before a selection is made. As Andrew mentioned it uses the presentation role so we should be safe on that front. The one negative here is that there could be an expectation that pressing the space key should select the option (in this case, it will actually enter a space into the text field and trigger a search change) but this matches the existing behaviour of the component (though the original had a weird bug that would only check on blur) so we thought it was acceptable for this version of the component. Something we should explore with usability testing for sure though!

dleroux · 2021-02-08T14:32:42Z

~~just checked in the admin where we do use the Autocomplete and it does arrow down the list before scrolling into view. Where are you seeing this behavior?~~

My bad, I see it now. I still would consider this a bug in the behavior. Maybe check with a designer on Polaris to confirm this?

dleroux

I have not been able to tophat in web but in Polaris it works great 🎉

github-actions · 2021-06-02T15:22:49Z

size-limit report

Path	Size
cjs	143.3 KB (+1.46% 🔺)
esm	97.17 KB (+2.37% 🔺)
esnext	142.83 KB (+2.79% 🔺)
css	34.54 KB (+2.3% 🔺)

AndrewMusgrave

Looked over the docs for Autocomplete, ComboBox & ListBox. They're looking great 😍

AndrewMusgrave · 2021-06-15T23:48:31Z

src/components/Autocomplete/README.md

 # Autocomplete

-The autocomplete component is an input field that provides selectable suggestions as a merchant types into it. It allows merchants to quickly search through and select from large collections of options.
+The autocomplete component is an input field that provides selectable suggestions as a merchant types into it. It allows merchants to quickly search through and select from large collections of options. Convenience wrapper around the `ComboBox` and `ListBox` components with minor UI differences.


Suggested change

The autocomplete component is an input field that provides selectable suggestions as a merchant types into it. It allows merchants to quickly search through and select from large collections of options. Convenience wrapper around the `ComboBox` and `ListBox` components with minor UI differences.

The autocomplete component is an input field that provides selectable suggestions as a merchant types into it. It allows merchants to quickly search through and select from large collections of options. It's a convenience wrapper around the `ComboBox` and `ListBox` components with minor UI differences.

AndrewMusgrave · 2021-06-17T15:46:33Z

src/components/ListBox/README.md

+- Traffic referrer source
+
+#### Don’t
+
+- Source


Same as above -

Suggested change

- Traffic referrer source

#### Don’t

- Source

- Traffic referrer source

#### Don’t

- Use interactive elements inside the list

AndrewMusgrave · 2021-06-17T15:47:18Z

src/components/ListBox/README.md

+## Examples
+
+### Basic ListBox
+


It's not always done, but we'll want to add descriptions for the examples when possible

Suggested change

Basic implementation of a control element used to let merchants select options

AndrewMusgrave · 2021-06-17T15:47:40Z

src/components/ListBox/README.md

+### Basic ListBox
+
+```jsx
+function baseListBoxExample() {


We'll want to capitalize the functions since they're components

Suggested change

function baseListBoxExample() {

function BaseListBoxExample() {

AndrewMusgrave · 2021-06-17T15:47:54Z

src/components/ListBox/README.md

+  - list
+  - listbox


Are there anyone keywords we could add - maybe interactive list?

AndrewMusgrave · 2021-06-17T16:06:55Z

src/components/ComboBox/README.md

+The `ComboBox` component is based on the [ARIA 1.2 combobox pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#combobox). It is a combination of a single-line
+`TextField` and a `Popover`. The current implementation expects a [`ListBox`] component to be used.


Suggested change

The `ComboBox` component is based on the [ARIA 1.2 combobox pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#combobox). It is a combination of a single-line

`TextField` and a `Popover`. The current implementation expects a [`ListBox`] component to be used.

The `ComboBox` component is based on the [ARIA 1.2 combobox pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#combobox). It is a combination of a single-line `TextField` and a `Popover`. The current implementation expects a [`ListBox`] component to be used.

AndrewMusgrave · 2021-06-17T16:07:36Z

src/components/ComboBox/README.md

+
+The `ComboBox` popover displays below the text field or other control by default so it is easy for merchants to discover and use. However, you can change the position with the `preferredPosition` prop.
+
+ComboBox features can be challenging for merchants with visual, motor, and cognitive disabilities. Even when they’re built using best practices, these features can be difficult to use with some assistive technologies. Merchants should always be able to search, enter data, or perform other activities without relying on the combobox.


Suggested change

ComboBox features can be challenging for merchants with visual, motor, and cognitive disabilities. Even when they’re built using best practices, these features can be difficult to use with some assistive technologies. Merchants should always be able to search, enter data, or perform other activities without relying on the combobox.

`ComboBox` features can be challenging for merchants with visual, motor, and cognitive disabilities. Even when they’re built using best practices, these features can be difficult to use with some assistive technologies. Merchants should always be able to search, enter data, or perform other activities without relying on the combobox.

AndrewMusgrave · 2021-06-17T16:08:30Z

src/components/ComboBox/README.md

+
+#### Do
+
+Use combobox as progressive enhancement to make the interface easier to use for most merchants.


I think these are lists

Suggested change

Use combobox as progressive enhancement to make the interface easier to use for most merchants.

- Use combobox as progressive enhancement to make the interface easier to use for most merchants.

AndrewMusgrave · 2021-06-17T16:08:42Z

src/components/ComboBox/README.md

+
+#### Don’t
+
+Require that merchants make a selection from the combobox to complete a task.


^

Suggested change

Require that merchants make a selection from the combobox to complete a task.

- Require that merchants make a selection from the combobox to complete a task.

AndrewMusgrave · 2021-06-17T16:09:17Z

src/components/ComboBox/README.md

+
+### Keyboard support
+
+- Give the combobox text input keyboard focus with the <kbd>tab</kbd> key (or <kbd>shift</kbd> + <kbd>tab</kbd> when tabbing backwards)


Suggested change

- Give the combobox text input keyboard focus with the <kbd>tab</kbd> key (or <kbd>shift</kbd> + <kbd>tab</kbd> when tabbing backwards)

- Give the combobox's text input keyboard focus with the <kbd>tab</kbd> key (or <kbd>shift</kbd> + <kbd>tab</kbd> when tabbing backwards)

katihoeschen · 2021-06-24T03:34:14Z

Thanks for looping me in, @voiid. These docs are in great shape! I'm dropping my feedback below, but it’s mostly questions and thinking out loud. I'll be OOO Thursday and Friday this week, but we have a meeting on Monday in case you want to chat through any of this.

ListBox - intro:

Typo: part the → part of the.
Is composition a common enough concept that it won’t slow folks down? I don’t see mention of it in the current Polaris components.
Super nitpicky: it is possible seems to imply difficulty. Maybe Composition lets you customize or you can?

ListBox - content guidelines:

Typo: an Listbox → a Listbox
Can you include an example of a clear and descriptive item?

ComboBox - intro:

Super nitpicky: The ComboBox component is a component that implements → The ComboBox component implements

ComboBox - accessibility > structure, Autocomplete - accessibility > structure:

Would it be helpful to include recommended reasons or examples of using PreferredPosition to change the component position? Given the preceding sentence, it seems risky not to add some guardrails about changing the position.

Applies to all 3 docs:

Examples section: For the basic implementation, it might be worth calling out what makes it basic so the reader doesn’t have to compare against the other examples.
Accessibility section: I can see both pros and cons of having accessibility best practices called out in a separate section, but have you considered including that information in the relevant sections above instead? That might bring more attention to accessibility direction and make it seem less optional.
Throughout: I see the component names both in all lowercase letters (listbox, combobox) and camel caps (ListBox, ComboBox). Is there a logic for using one vs. the other?

katihoeschen · 2021-06-30T14:16:06Z

src/components/ListBox/README.md

+
+# ListBox
+
+The `ListBox` component is a list component that implements part the [Aria 1.2 ListBox specs](https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox). It presents a list of options and allows users to select one or more of them. Through composition, it is possible to customize the presentation of these lists by using sections, headers or custom elements.


Suggested change

The `ListBox` component is a list component that implements part the [Aria 1.2 ListBox specs](https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox). It presents a list of options and allows users to select one or more of them. Through composition, it is possible to customize the presentation of these lists by using sections, headers or custom elements.

The `ListBox` component is a list component that implements part of the [Aria 1.2 ListBox specs](https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox).

katihoeschen · 2021-06-30T14:25:55Z

src/components/ListBox/README.md

+
+# ListBox
+
+The `ListBox` component is a list component that implements part the [Aria 1.2 ListBox specs](https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox). It presents a list of options and allows users to select one or more of them. Through composition, it is possible to customize the presentation of these lists by using sections, headers or custom elements.


If you need more structure than the standard component offers, use composition to customize the presentation of these lists by using sections, headers, or custom elements.

- Replace internals with new combobox and list box - Add support for legacy combobox - Allow TextField and Checkbox to leverage new combobox - Include additional test coverage for autocomplete and new components Co-authored-by: Andrew Musgrave <andrew.musgrave@shopify.com> Co-authored-by: Daniel Leroux <daniel.leroux@shopify.com>

* Upgrade to node v12 (#4191) * Move to node v12 * Bump merge-deep from 3.0.2 to 3.0.3 (#4254) Bumps [merge-deep](https://github.com/jonschlinkert/merge-deep) from 3.0.2 to 3.0.3. - [Release notes](https://github.com/jonschlinkert/merge-deep/releases) - [Commits](jonschlinkert/merge-deep@3.0.2...3.0.3) --- updated-dependencies: - dependency-name: merge-deep dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump ws in /examples/create-react-app-ts-react-testing (#4242) Bumps [ws](https://github.com/websockets/ws) from 6.2.1 to 6.2.2. - [Release notes](https://github.com/websockets/ws/releases) - [Commits](https://github.com/websockets/ws/commits) --- updated-dependencies: - dependency-name: ws dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump ws from 6.2.1 to 6.2.2 in /examples/create-react-app (#4241) Bumps [ws](https://github.com/websockets/ws) from 6.2.1 to 6.2.2. - [Release notes](https://github.com/websockets/ws/releases) - [Commits](https://github.com/websockets/ws/commits) --- updated-dependencies: - dependency-name: ws dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump ws from 6.2.1 to 6.2.2 in /examples/webpack (#4240) Bumps [ws](https://github.com/websockets/ws) from 6.2.1 to 6.2.2. - [Release notes](https://github.com/websockets/ws/releases) - [Commits](https://github.com/websockets/ws/commits) --- updated-dependencies: - dependency-name: ws dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Update UNRELEASED.md Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump react and react-dom to v16.14.0 (#4279) Co-authored-by: Ben Scott <227292+BPScott@users.noreply.github.com> * [TextField] Make autoComplete prop a required string (#4267) * Require autoComplete prop on TextField * switch to autoComplete="off" as default * Adding off recommendation. * Fix link formatting issue in TextField/README.md Co-authored-by: Genevieve Bulger <genevieve.bulger@shopify.com> * Update browserslist to match shopify/browserslist-config v3.0.0 (#4304) - Desktop Safari version is "last 3 safari versions" - mapping to Safari 13.1 - ios Safari version is "ios >= 13.4" - mapping to ios_saf 13.4-13.7 * [AutoComplete] Rebuild autocomplete internals to use new accessible components (#3910) * Rebuild AutoComplete internals to fix accessibility issues - Replace internals with new combobox and list box - Add support for legacy combobox - Allow TextField and Checkbox to leverage new combobox - Include additional test coverage for autocomplete and new components Co-authored-by: Andrew Musgrave <andrew.musgrave@shopify.com> Co-authored-by: Daniel Leroux <daniel.leroux@shopify.com> * Fix some accessibility warnings on listbox stories * Remove listbox section example Co-authored-by: Andrew Musgrave <andrew.musgrave@shopify.com> Co-authored-by: Daniel Leroux <daniel.leroux@shopify.com> Co-authored-by: Alex Page <alex@alexpage.com.au> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Ben Scott <227292+BPScott@users.noreply.github.com> Co-authored-by: Andrew McGoveran <andrew.mcgoveran@shopify.com> Co-authored-by: Genevieve Bulger <genevieve.bulger@shopify.com> Co-authored-by: Andrew Musgrave <andrew.musgrave@shopify.com> Co-authored-by: Daniel Leroux <daniel.leroux@shopify.com>

…omponents (#3910) * Rebuild AutoComplete internals to fix accessibility issues - Replace internals with new combobox and list box - Add support for legacy combobox - Allow TextField and Checkbox to leverage new combobox - Include additional test coverage for autocomplete and new components Co-authored-by: Andrew Musgrave <andrew.musgrave@shopify.com> Co-authored-by: Daniel Leroux <daniel.leroux@shopify.com> * Fix some accessibility warnings on listbox stories * Remove listbox section example Co-authored-by: Andrew Musgrave <andrew.musgrave@shopify.com> Co-authored-by: Daniel Leroux <daniel.leroux@shopify.com>

* Upgrade to node v12 (#4191) * Move to node v12 * Bump merge-deep from 3.0.2 to 3.0.3 (#4254) Bumps [merge-deep](https://github.com/jonschlinkert/merge-deep) from 3.0.2 to 3.0.3. - [Release notes](https://github.com/jonschlinkert/merge-deep/releases) - [Commits](jonschlinkert/merge-deep@3.0.2...3.0.3) --- updated-dependencies: - dependency-name: merge-deep dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump ws in /examples/create-react-app-ts-react-testing (#4242) Bumps [ws](https://github.com/websockets/ws) from 6.2.1 to 6.2.2. - [Release notes](https://github.com/websockets/ws/releases) - [Commits](https://github.com/websockets/ws/commits) --- updated-dependencies: - dependency-name: ws dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump ws from 6.2.1 to 6.2.2 in /examples/create-react-app (#4241) Bumps [ws](https://github.com/websockets/ws) from 6.2.1 to 6.2.2. - [Release notes](https://github.com/websockets/ws/releases) - [Commits](https://github.com/websockets/ws/commits) --- updated-dependencies: - dependency-name: ws dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump ws from 6.2.1 to 6.2.2 in /examples/webpack (#4240) Bumps [ws](https://github.com/websockets/ws) from 6.2.1 to 6.2.2. - [Release notes](https://github.com/websockets/ws/releases) - [Commits](https://github.com/websockets/ws/commits) --- updated-dependencies: - dependency-name: ws dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Update UNRELEASED.md Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump react and react-dom to v16.14.0 (#4279) Co-authored-by: Ben Scott <227292+BPScott@users.noreply.github.com> * [TextField] Make autoComplete prop a required string (#4267) * Require autoComplete prop on TextField * switch to autoComplete="off" as default * Adding off recommendation. * Fix link formatting issue in TextField/README.md Co-authored-by: Genevieve Bulger <genevieve.bulger@shopify.com> * Update browserslist to match shopify/browserslist-config v3.0.0 (#4304) - Desktop Safari version is "last 3 safari versions" - mapping to Safari 13.1 - ios Safari version is "ios >= 13.4" - mapping to ios_saf 13.4-13.7 * [AutoComplete] Rebuild autocomplete internals to use new accessible components (#3910) * Rebuild AutoComplete internals to fix accessibility issues - Replace internals with new combobox and list box - Add support for legacy combobox - Allow TextField and Checkbox to leverage new combobox - Include additional test coverage for autocomplete and new components Co-authored-by: Andrew Musgrave <andrew.musgrave@shopify.com> Co-authored-by: Daniel Leroux <daniel.leroux@shopify.com> * Fix some accessibility warnings on listbox stories * Remove listbox section example Co-authored-by: Andrew Musgrave <andrew.musgrave@shopify.com> Co-authored-by: Daniel Leroux <daniel.leroux@shopify.com> * Update to node 12.22.0 and react-testing v3.2.0 (#4349) * Update node version to 12.22.0 Released on 2021-03-30, this is the first version of node where esmodules are considered stable. We're not relying on that yet, but this sets the stage for the future. * Update @shopify/react-testing to v3.2.0 This adds support for React 17 so future migration will be easier * Remove deprecated languages (#4351) * Update translation.yml * Delete locales/hi.json * Delete locales/ms.json * format translation.yml as expected Co-authored-by: translation-platform[bot] <35075727+translation-platform@users.noreply.github.com> * Rename ComboBox and ListBox to Combobox and Listbox (#4379) * Fix autocomlete docs Co-authored-by: Alex Page <alex@alexpage.com.au> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Ben Scott <227292+BPScott@users.noreply.github.com> Co-authored-by: Andrew McGoveran <andrew.mcgoveran@shopify.com> Co-authored-by: Genevieve Bulger <genevieve.bulger@shopify.com> Co-authored-by: Andrew Musgrave <andrew.musgrave@shopify.com> Co-authored-by: Daniel Leroux <daniel.leroux@shopify.com> Co-authored-by: Kyle Durand <kyle.durand@shopify.com> Co-authored-by: Al-Campuzano <32461613+Al-Campuzano@users.noreply.github.com> Co-authored-by: translation-platform[bot] <35075727+translation-platform@users.noreply.github.com>

…omponents (#3910) * Rebuild AutoComplete internals to fix accessibility issues - Replace internals with new combobox and list box - Add support for legacy combobox - Allow TextField and Checkbox to leverage new combobox - Include additional test coverage for autocomplete and new components Co-authored-by: Andrew Musgrave <andrew.musgrave@shopify.com> Co-authored-by: Daniel Leroux <daniel.leroux@shopify.com> * Fix some accessibility warnings on listbox stories * Remove listbox section example Co-authored-by: Andrew Musgrave <andrew.musgrave@shopify.com> Co-authored-by: Daniel Leroux <daniel.leroux@shopify.com>

* Upgrade to node v12 (#4191) * Move to node v12 * Bump merge-deep from 3.0.2 to 3.0.3 (#4254) Bumps [merge-deep](https://github.com/jonschlinkert/merge-deep) from 3.0.2 to 3.0.3. - [Release notes](https://github.com/jonschlinkert/merge-deep/releases) - [Commits](jonschlinkert/merge-deep@3.0.2...3.0.3) --- updated-dependencies: - dependency-name: merge-deep dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump ws in /examples/create-react-app-ts-react-testing (#4242) Bumps [ws](https://github.com/websockets/ws) from 6.2.1 to 6.2.2. - [Release notes](https://github.com/websockets/ws/releases) - [Commits](https://github.com/websockets/ws/commits) --- updated-dependencies: - dependency-name: ws dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump ws from 6.2.1 to 6.2.2 in /examples/create-react-app (#4241) Bumps [ws](https://github.com/websockets/ws) from 6.2.1 to 6.2.2. - [Release notes](https://github.com/websockets/ws/releases) - [Commits](https://github.com/websockets/ws/commits) --- updated-dependencies: - dependency-name: ws dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump ws from 6.2.1 to 6.2.2 in /examples/webpack (#4240) Bumps [ws](https://github.com/websockets/ws) from 6.2.1 to 6.2.2. - [Release notes](https://github.com/websockets/ws/releases) - [Commits](https://github.com/websockets/ws/commits) --- updated-dependencies: - dependency-name: ws dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Update UNRELEASED.md Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump react and react-dom to v16.14.0 (#4279) Co-authored-by: Ben Scott <227292+BPScott@users.noreply.github.com> * [TextField] Make autoComplete prop a required string (#4267) * Require autoComplete prop on TextField * switch to autoComplete="off" as default * Adding off recommendation. * Fix link formatting issue in TextField/README.md Co-authored-by: Genevieve Bulger <genevieve.bulger@shopify.com> * Update browserslist to match shopify/browserslist-config v3.0.0 (#4304) - Desktop Safari version is "last 3 safari versions" - mapping to Safari 13.1 - ios Safari version is "ios >= 13.4" - mapping to ios_saf 13.4-13.7 * [AutoComplete] Rebuild autocomplete internals to use new accessible components (#3910) * Rebuild AutoComplete internals to fix accessibility issues - Replace internals with new combobox and list box - Add support for legacy combobox - Allow TextField and Checkbox to leverage new combobox - Include additional test coverage for autocomplete and new components Co-authored-by: Andrew Musgrave <andrew.musgrave@shopify.com> Co-authored-by: Daniel Leroux <daniel.leroux@shopify.com> * Fix some accessibility warnings on listbox stories * Remove listbox section example Co-authored-by: Andrew Musgrave <andrew.musgrave@shopify.com> Co-authored-by: Daniel Leroux <daniel.leroux@shopify.com> Co-authored-by: Alex Page <alex@alexpage.com.au> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Ben Scott <227292+BPScott@users.noreply.github.com> Co-authored-by: Andrew McGoveran <andrew.mcgoveran@shopify.com> Co-authored-by: Genevieve Bulger <genevieve.bulger@shopify.com> Co-authored-by: Andrew Musgrave <andrew.musgrave@shopify.com> Co-authored-by: Daniel Leroux <daniel.leroux@shopify.com>

voiid force-pushed the autocomplete-accessibility-improvements branch from 61d2402 to 432eb80 Compare January 28, 2021 21:36

voiid changed the title ~~[WIP] [AutoComplete] Rebuild autocomplete internals to use new accessible components~~ [AutoComplete] Rebuild autocomplete internals to use new accessible components Jan 29, 2021

AndrewMusgrave reviewed Feb 1, 2021

View reviewed changes

voiid assigned voiid and AndrewMusgrave Feb 2, 2021

voiid marked this pull request as ready for review February 2, 2021 21:38

AndrewMusgrave requested review from alex-page, aveline and dleroux February 2, 2021 21:41

alex-page approved these changes Feb 3, 2021

View reviewed changes

voiid force-pushed the autocomplete-accessibility-improvements branch from 4363388 to 75ba773 Compare February 10, 2021 15:16

dleroux approved these changes Feb 10, 2021

View reviewed changes

voiid force-pushed the autocomplete-accessibility-improvements branch 3 times, most recently from 8fb3a6f to f805a54 Compare February 25, 2021 15:38

voiid force-pushed the autocomplete-accessibility-improvements branch from dafbc28 to 935a739 Compare June 2, 2021 15:19

voiid force-pushed the autocomplete-accessibility-improvements branch from 935a739 to 66ded1b Compare June 2, 2021 18:38

shopify-shipit bot temporarily deployed to alpha-release June 2, 2021 19:04 Inactive

voiid force-pushed the autocomplete-accessibility-improvements branch from 2b6215b to 227a6f5 Compare June 4, 2021 17:44

alex-page added the v7.0.0 label Jun 9, 2021

alex-page force-pushed the main branch 5 times, most recently from 9552c69 to 10da401 Compare June 10, 2021 04:05

voiid changed the base branch from main to v7.0.0-release June 10, 2021 04:45

voiid force-pushed the autocomplete-accessibility-improvements branch from 00ea87f to b2449a6 Compare June 14, 2021 22:49

AndrewMusgrave reviewed Jun 17, 2021

View reviewed changes

voiid requested a review from katihoeschen June 18, 2021 22:45

katihoeschen reviewed Jun 30, 2021

View reviewed changes

voiid force-pushed the autocomplete-accessibility-improvements branch from 1e2567a to d40ba0b Compare July 5, 2021 23:42

voiid added 2 commits July 13, 2021 14:54

Fix some accessibility warnings on listbox stories

c4faabb

Remove listbox section example

084860b

voiid merged commit 9654c80 into v7.0.0-release Jul 14, 2021

voiid deleted the autocomplete-accessibility-improvements branch July 14, 2021 22:41

lucabezerra mentioned this pull request Aug 26, 2021

[Test Modernization] Modernizing ComboBox and Autocomplete tests. #4442

Closed

chloerice mentioned this pull request Jan 27, 2022

[Autocomplete][a11y][v1] Outstanding a11y issues #789

Closed

		@@ -1,377 +1,153 @@
		import React, {useState, useEffect, useCallback} from 'react';
		import React, {useState, useCallback, useMemo, Children} from 'react';

		@@ -0,0 +1,377 @@
		import React, {useState, useEffect, useCallback} from 'react';

	The autocomplete component is an input field that provides selectable suggestions as a merchant types into it. It allows merchants to quickly search through and select from large collections of options. Convenience wrapper around the `ComboBox` and `ListBox` components with minor UI differences.
	The autocomplete component is an input field that provides selectable suggestions as a merchant types into it. It allows merchants to quickly search through and select from large collections of options. It's a convenience wrapper around the `ComboBox` and `ListBox` components with minor UI differences.


	Basic implementation of a control element used to let merchants select options

	function baseListBoxExample() {
	function BaseListBoxExample() {

		The `ComboBox` component is based on the [ARIA 1.2 combobox pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#combobox). It is a combination of a single-line
		`TextField` and a `Popover`. The current implementation expects a [`ListBox`] component to be used.


		The `ComboBox` popover displays below the text field or other control by default so it is easy for merchants to discover and use. However, you can change the position with the `preferredPosition` prop.

		ComboBox features can be challenging for merchants with visual, motor, and cognitive disabilities. Even when they’re built using best practices, these features can be difficult to use with some assistive technologies. Merchants should always be able to search, enter data, or perform other activities without relying on the combobox.

	ComboBox features can be challenging for merchants with visual, motor, and cognitive disabilities. Even when they’re built using best practices, these features can be difficult to use with some assistive technologies. Merchants should always be able to search, enter data, or perform other activities without relying on the combobox.
	`ComboBox` features can be challenging for merchants with visual, motor, and cognitive disabilities. Even when they’re built using best practices, these features can be difficult to use with some assistive technologies. Merchants should always be able to search, enter data, or perform other activities without relying on the combobox.


		#### Do

		Use combobox as progressive enhancement to make the interface easier to use for most merchants.

	Use combobox as progressive enhancement to make the interface easier to use for most merchants.
	- Use combobox as progressive enhancement to make the interface easier to use for most merchants.


		#### Don’t

		Require that merchants make a selection from the combobox to complete a task.

	Require that merchants make a selection from the combobox to complete a task.
	- Require that merchants make a selection from the combobox to complete a task.


		### Keyboard support

		- Give the combobox text input keyboard focus with the <kbd>tab</kbd> key (or <kbd>shift</kbd> + <kbd>tab</kbd> when tabbing backwards)

	- Give the combobox text input keyboard focus with the <kbd>tab</kbd> key (or <kbd>shift</kbd> + <kbd>tab</kbd> when tabbing backwards)
	- Give the combobox's text input keyboard focus with the <kbd>tab</kbd> key (or <kbd>shift</kbd> + <kbd>tab</kbd> when tabbing backwards)


		# ListBox

		The `ListBox` component is a list component that implements part the [Aria 1.2 ListBox specs](https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox). It presents a list of options and allows users to select one or more of them. Through composition, it is possible to customize the presentation of these lists by using sections, headers or custom elements.

[AutoComplete] Rebuild autocomplete internals to use new accessible components #3910

[AutoComplete] Rebuild autocomplete internals to use new accessible components #3910

Uh oh!

Conversation

voiid commented Jan 25, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

WHY are these changes introduced?

Visual change audit

Render graphs

Test coverage

WHAT is this pull request doing?

How to 🎩

🎩 checklist

Uh oh!

github-actions bot commented Jan 25, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alex-page left a comment

Choose a reason for hiding this comment

Uh oh!

dleroux commented Feb 5, 2021

Uh oh!

AndrewMusgrave commented Feb 5, 2021

Uh oh!

voiid commented Feb 5, 2021

Uh oh!

dleroux commented Feb 8, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dleroux left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Jun 2, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report

Uh oh!

AndrewMusgrave left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

voiid commented Jan 25, 2021 •

edited

Loading

github-actions bot commented Jan 25, 2021 •

edited

Loading

dleroux commented Feb 8, 2021 •

edited

Loading

github-actions bot commented Jun 2, 2021 •

edited

Loading