Skip to content

docs(autocomplete): fix a11y of autocomplete example #3405

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Mar 4, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/demo-app/autocomplete/autocomplete-demo.ts
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,8 @@ export class AutocompleteDemo {
}

filterStates(val: string) {
return val ? this.states.filter((s) => s.name.match(new RegExp(val, 'gi'))) : this.states;
return val ? this.states.filter(s => new RegExp(`^${val}`, 'gi').test(s.name))
: this.states;
}

}
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,8 @@ export class AutocompleteOverviewExample {
}

filterStates(val: string) {
return val ? this.states.filter((s) => new RegExp(val, 'gi').test(s)) : this.states;
return val ? this.states.filter(s => new RegExp(`^${val}`, 'gi').test(s))
: this.states;
}

}
18 changes: 11 additions & 7 deletions src/lib/autocomplete/autocomplete.md
Original file line number Diff line number Diff line change
Expand Up @@ -48,15 +48,19 @@ local template variable (here we called it "auto"), and binding that variable to
At this point, the autocomplete panel should be toggleable on focus and options should be selectable. But if we want
our options to filter when we type, we need to add a custom filter.

You can filter the options in any way you want based on the text input. Here we will do a simple string test on the
input value to see if it matches the option value. We already have access to the built-in `valueChanges` observable on
the `FormControl`, so we can simply map the text input's values to the suggested options by passing them through this
filter. The resulting observable (`filteredOptions`) can be added to the template in place of the `options` property
using the `async` pipe.
You can filter the options in any way you like based on the text input*. Here we will perform a simple string test on
the option value to see if it matches the input value, starting from the option's first letter. We already have access
to the built-in `valueChanges` observable on the `FormControl`, so we can simply map the text input's values to the
suggested options by passing them through this filter. The resulting observable (`filteredOptions`) can be added to the
template in place of the `options` property using the `async` pipe.

Below we are also priming our value change stream with `null` so that the options are filtered by that value on init
(before there are any value changes).

*For optimal accessibility, you may want to consider adding text guidance on the page to explain filter criteria.
This is especially helpful for screenreader users if you're using a non-standard filter that doesn't limit matches
to the beginning of the string.

*my-comp.ts*
```ts
class MyComp {
Expand All @@ -75,7 +79,7 @@ class MyComp {
}

filter(val: string): string[] {
return this.options.filter(option => new RegExp(val, 'gi').test(option));
return this.options.filter(option => new RegExp(`^${val}`, 'gi').test(option));
}
}
```
Expand Down Expand Up @@ -134,7 +138,7 @@ class MyComp {
}

filter(name: string): User[] {
return this.options.filter(option => new RegExp(name, 'gi').test(option));
return this.options.filter(option => new RegExp(`^${name}`, 'gi').test(option));
}

displayFn(user: User): string {
Expand Down