Comments (4)
Ah, thank you - I didn't realize the Aria autocomplete behavior was all arrow key based. That combined w/ .active
not applying any actual visual changes by default made it seem like things simply weren't working.
Thanks for telling me about the aria
behavior, I was assuming that tabindex
and tabbing between results was the correct way to specify behavior. Issue no longer valid.
from stimulus-autocomplete.
( I should note that I see in the code where there are hooks to respond to keyboard events, but they also don't appear to work for me in Safari 15.3 or Chrome 99.0.4844.51, Mac OS 12.2.1 )
from stimulus-autocomplete.
@netshade thanks for offering some help. The autocomplete accessibility is something I want to improve.
Technically the autocomplete is an aria combo box. According to the spec, the popup with the results should not be in the keyboard tab sequence.
Keyboard Interaction
- Tab: The textbox is in the page Tab sequence.
- Note: The popup indicator icon or button (if present), the popup, and the popup descendants are excluded from the page Tab sequence.
https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard-interaction-6
The autocomplete already implements the rest of the keyboard interactions. However, it'd be nice if we could automatically set the aria combobox
role in the autocomplete and add aria listbox
role to the results.
from stimulus-autocomplete.
( I should note that I see in the code where there are hooks to respond to keyboard events, but they also don't appear to work for me in Safari 15.3 or Chrome 99.0.4844.51, Mac OS 12.2.1 )
You can add new event key handlers (or override existing ones) adding onXKeydown
event handlers to your subclass. For example, to do something when the "a" key is pressed:
import { Autocomplete } from "stimulus-autocomplete"
export default class extends Autocomplete {
onaKeydown = (event) => {
console.log("a key down")
}
}
from stimulus-autocomplete.
Related Issues (20)
- Feature request : delay option HOT 3
- Provide default styles
- Failed to resolve module specifier "stimulus-autocomplete" HOT 3
- Prefilled form HOT 1
- Additional event on select HOT 3
- How to fetch data on focus? HOT 11
- Make the query paramater name `q` customizable HOT 2
- error event doesn't fire on 400+ response HOT 1
- Auto-select/highlight the first result on "data load ended" HOT 2
- Suggestion: Allow to use local HTML instead of fetching from the server HOT 3
- Prevent Lighthouse Aria warnings HOT 1
- Data is not being Filtered. HOT 1
- Accessibility
- Feature improve: When mouse move on an option item, it should become the current selected option item. HOT 4
- data-autocomplete-query-param-value not working HOT 4
- Error Unexpected token after import stimulus-autocomplete HOT 6
- Setting X-Requested-With header in V3 HOT 2
- onInputFocus is not defined HOT 1
- How can you pass along additional params beyond params[:q] to controller? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from stimulus-autocomplete.