diff --git a/README.md b/README.md
index 18cf442..66f575f 100644
--- a/README.md
+++ b/README.md
@@ -262,6 +262,20 @@ Slots for injecting content around the results/input. Useful for header/footer l
```
+### Adding labels
+
+It is common in forms to add a label next to the ` ` tag for semantic html / accessibility. You can use the
+`before-input` slot to accomplish this in conjunction with the `inputProps.id`:
+
+```html
+
+
+ Search here:
+
+ ...
+
+```
+
### suggestion item (i.e. default slot)
Used to style each suggestion inside the `
` tag. Using [scoped slots](https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots)
you have access to the `suggestion` item inside the `v-for` suggestions loop. This gives you the power of Vue templating, since
diff --git a/__tests__/__snapshots__/autosuggest.test.js.snap b/__tests__/__snapshots__/autosuggest.test.js.snap
index 4818797..7eb2076 100644
--- a/__tests__/__snapshots__/autosuggest.test.js.snap
+++ b/__tests__/__snapshots__/autosuggest.test.js.snap
@@ -1,26 +1,26 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Autosuggest @click and @selected listener events works as expected 1`] = `
-
-
+
`;
exports[`Autosuggest can click outside document to trigger close 1`] = `
-
-
+
`;
exports[`Autosuggest can customize css prefix 1`] = `
-
-
+
+
-
+
clifford kits
@@ -37,7 +37,7 @@ exports[`Autosuggest can customize css prefix 1`] = `
life of fred math
-
+
spike
@@ -48,7 +48,7 @@ exports[`Autosuggest can customize css prefix 1`] = `
rover
-
+
sassy
@@ -59,7 +59,7 @@ exports[`Autosuggest can customize css prefix 1`] = `
church
-
+
elephant
@@ -67,7 +67,7 @@ exports[`Autosuggest can customize css prefix 1`] = `
lion
-
+
something
@@ -81,10 +81,10 @@ exports[`Autosuggest can customize css prefix 1`] = `
`;
exports[`Autosuggest can customize ids and classes for container divs 1`] = `
-
-
+
+
-
+
clifford kits
@@ -101,7 +101,7 @@ exports[`Autosuggest can customize ids and classes for container divs 1`] = `
life of fred math
-
+
spike
@@ -112,7 +112,7 @@ exports[`Autosuggest can customize ids and classes for container divs 1`] = `
rover
-
+
sassy
@@ -123,7 +123,7 @@ exports[`Autosuggest can customize ids and classes for container divs 1`] = `
church
-
+
elephant
@@ -131,7 +131,7 @@ exports[`Autosuggest can customize ids and classes for container divs 1`] = `
lion
-
+
something
@@ -145,11 +145,11 @@ exports[`Autosuggest can customize ids and classes for container divs 1`] = `
`;
exports[`Autosuggest can display section header 1`] = `
-
-
+
+
-
- Suggestions
+
+ Suggestions
clifford kits
@@ -172,10 +172,10 @@ exports[`Autosuggest can display section header 1`] = `
`;
exports[`Autosuggest can display ul and li classNames 1`] = `
-
-
+
+
-
+
clifford kits
@@ -192,7 +192,7 @@ exports[`Autosuggest can display ul and li classNames 1`] = `
life of fred math
-
+
spike
@@ -203,7 +203,7 @@ exports[`Autosuggest can display ul and li classNames 1`] = `
rover
-
+
sassy
@@ -214,7 +214,7 @@ exports[`Autosuggest can display ul and li classNames 1`] = `
church
-
+
elephant
@@ -222,7 +222,7 @@ exports[`Autosuggest can display ul and li classNames 1`] = `
lion
-
+
something
@@ -236,43 +236,43 @@ exports[`Autosuggest can display ul and li classNames 1`] = `
`;
exports[`Autosuggest can handle null data 1`] = `
-
-
+
`;
exports[`Autosuggest can modify input type attribute 1`] = `
-
-
+
`;
exports[`Autosuggest can mount 1`] = `
-
-
+
`;
exports[`Autosuggest can render default suggestion value by property name 1`] = `
-
-
+
`;
exports[`Autosuggest can render section slots 1`] = `
-
-
+
+
-
- Suggestions
+
+ Suggestions
clifford kits
@@ -289,7 +289,7 @@ exports[`Autosuggest can render section slots 1`] = `
life of fred math
-
+
The Dogs
spike
@@ -301,7 +301,7 @@ exports[`Autosuggest can render section slots 1`] = `
rover
-
+
Moar Cats is good
sassy
@@ -313,7 +313,7 @@ exports[`Autosuggest can render section slots 1`] = `
church
-
+
zoo animals?
elephant
@@ -322,8 +322,8 @@ exports[`Autosuggest can render section slots 1`] = `
lion
-
- uhh
+
+ uhh
something
@@ -337,10 +337,10 @@ exports[`Autosuggest can render section slots 1`] = `
`;
exports[`Autosuggest can render simplest component with single onSelected 1`] = `
-
-
+
+
-
+
clifford kits
@@ -408,11 +408,11 @@ exports[`Autosuggest can render simplest component with single onSelected 1`] =
`;
exports[`Autosuggest can render slots 1`] = `
-
-
+
+
-
+
clifford kits
@@ -436,10 +436,10 @@ exports[`Autosuggest can render slots 1`] = `
`;
exports[`Autosuggest can render suggestions 1`] = `
-
-
+
+
-
+
clifford kits
@@ -462,26 +462,26 @@ exports[`Autosuggest can render suggestions 1`] = `
`;
exports[`Autosuggest can select from suggestions using keystroke 1`] = `
-
-
+
`;
exports[`Autosuggest can use escape key to exit 1`] = `
-
-
+
`;
exports[`Autosuggest highlights first option on keydown when previously closed 1`] = `
-
-
+
+
-
+
clifford kits
@@ -498,7 +498,7 @@ exports[`Autosuggest highlights first option on keydown when previously closed 1
life of fred math
-
+
spike
@@ -509,7 +509,7 @@ exports[`Autosuggest highlights first option on keydown when previously closed 1
rover
-
+
sassy
@@ -520,7 +520,7 @@ exports[`Autosuggest highlights first option on keydown when previously closed 1
church
-
+
elephant
@@ -528,7 +528,7 @@ exports[`Autosuggest highlights first option on keydown when previously closed 1
lion
-
+
something
@@ -542,10 +542,11 @@ exports[`Autosuggest highlights first option on keydown when previously closed 1
`;
exports[`Autosuggest is aria complete 1`] = `
-
-
+
+
-
+
+ Suggestions
clifford kits
diff --git a/__tests__/autosuggest.test.js b/__tests__/autosuggest.test.js
index 11301e7..51ab401 100644
--- a/__tests__/autosuggest.test.js
+++ b/__tests__/autosuggest.test.js
@@ -307,23 +307,39 @@ describe("Autosuggest", () => {
});
it("is aria complete", async () => {
- const wrapper = mount(Autosuggest, {
- propsData: defaultProps
- });
+ const propsData = {
+ ...defaultProps,
+ sectionConfigs: {
+ default: {
+ label: "Suggestions",
+ limit: 5,
+ onSelected: () => {}
+ }
+ }
+ }
+ const wrapper = mount(Autosuggest, { propsData });
const input = wrapper.find("input");
expect(input.attributes()["role"]).toBe("combobox");
expect(input.attributes()["aria-autocomplete"]).toBe("list");
expect(input.attributes()["aria-activedescendant"]).toBe("");
- expect(input.attributes()["aria-owns"]).toBe("autosuggest__results");
- expect(input.attributes()["aria-owns"]).toBe("autosuggest__results");
-
+ expect(input.attributes()["aria-owns"]).toBe("autosuggest-autosuggest__results");
+
+ // aria owns needs to be an "id", #191
+ const results = wrapper.find(`#${input.attributes()["aria-owns"]}`)
+ expect(results.exists()).toBeTruthy()
+
// TODO: Make sure aria-completeness is actually 2legit2quit.
input.trigger("click");
input.setValue("G");
expect(input.attributes()["aria-haspopup"]).toBe("true");
+
+ // make sure aria-labeledby references the section config label, and that it's an "id"
+ const ul = wrapper.find('ul')
+ expect(ul.attributes()['aria-labelledby']).toBe('autosuggest-Suggestions')
+ expect(ul.find(`#${ul.attributes()['aria-labelledby']}`).exists).toBeTruthy()
const mouseDownTimes = 3;
times(mouseDownTimes)(() => {
diff --git a/docs/App.vue b/docs/App.vue
index 4815104..44bc855 100644
--- a/docs/App.vue
+++ b/docs/App.vue
@@ -1,10 +1,11 @@
-
+
{{ oppositeTheme === 'light' ? '🌞 Go Light' : 'Go Dark 🌛' }}
🔍 Vue-autosuggest
logEvent('input', args)"
@highlighted="(...args) => logEvent('highlighted', args)"
@selected="onSelected"
@@ -15,6 +16,9 @@
:should-render-suggestions="(size, loading) => size >= 0 && !loading && searchText !== ''"
ref="autocomplete"
>
+
+ Select a LOTR Character
+
{{ suggestion && suggestion.item.Name }}
@@ -52,7 +56,7 @@
{{ evt.name }} : {{ evt.value }}
-
+
+