| layout |
|---|
doc-page.html |
When creating web applications or UI widgets these modules may come in handy.
Every software has its problems - so do browsers. The ally/fix namespace contains utilities to combat things browsers get wrong.
ally/fix/pointer-focus-children(Internet Explorer 10 - 11)ally/fix/pointer-focus-input(Safari and Firefox on Mac OS X)ally/fix/pointer-focus-parent(WebKit and old Blink)
Sometimes :focus is not enough for communicating your application's intentions properly.
ally/style/focus-sourceprovideshtml[focus-source="pointer|key|script"]ally/style/focus-withinpolyfills:focus-withinwith.ally-focus-within
While it's best to use standardized features and leave browsers to figure things out, specifications sometimes leave us hanging in limbo.
ally/maintain/disabledrenders elements inert to prevent any user interactionally/maintain/focus-trappedcontains focus in a given sub-tree of the documentally/maintain/hiddensetsaria-hidden="true"on insignificant branches
In order to work with focusable elements, we must first know which elements we're supposed to work with. See what does "focusable" mean? for a differentiation.
ally/query/first-tabbablefinds the first keyboard focusable elementally/query/focusablefinds all focusable elementsally/query/tabbablefinds all keyboard focusable elementsally/query/tabsequencefinds all keyboard focusable elements respecting the[tabindex]order
Unlike any other ally modules, the is/* components do not take take options.context argument, but expect the element as first argument, allowing easy use in .filter(). See what does "focusable" mean? for a differentiation.
ally/is/disabledreturns true if the element is:disabledally/is/focus-releavntreturns true if the element is considered theoretically focusableally/is/focusablereturns true if the element is considered focusable by scriptally/is/only-tabbablereturns true if the element is tabbable but not focusableally/is/shadowedreturns true if the element is the descendant of aShadowRootally/is/tabbablereturns true if the element is considered keyboard focusable ("tabbable")ally/is/valid-areareturns true if the<area>element is properly used via<map>by an<img>ally/is/valid-tabindexreturns true if the element'stabindexattribute value is soundally/is/visiblereturns true if the element is rendered (but not necessarily visible in the viewport)
Making up for missing or lacking DOM mutation APIs.
ally/element/disableddisables all elements, not only form controls
Especially when dealing with transitional user interfaces we need to know when an element can be safely focused.
ally/when/focusableexecutes a callback once an element fulfillsally/is/focusableand is visible in the viewportally/when/keyexecutes a callback when a given key has been pressedally/when/visible-areaexecutes a callback once an element is visible in the viewport
Sometimes you need some DOM traversal utilities
ally/get/insignificant-branchesreturns an array containing the branches of the DOM that do contain any of the target elements
ally/map/attributemaps WAI-ARIA states and propertiesally/map/keycodemaps control keys to readable names
When creating libraries these modules may come in handy.
- NOTE: When you find yourself using one of these in your application code, we should talk about what you're trying to achieve and how we could do that as part of the library instead. Get in touch, file an issue explaining what you're trying to achieve!
- NOTE: These modules are only available to be consumed via ES6, AMD or CommonJS directly, they are not exposed in the production bundle
ally.min.js.
Sometimes you need some DOM traversal utilities
ally/get/active-elementsidentifies theShadowHostancestry of the active elementally/get/insignificant-branchesally/get/focus-targetally/get/parentsally/get/shadow-host-parentsally/get/shadow-host
Emitting events when there's no standardized equivalent
Translate volatile events to stateful interfaces
ally/observe/interaction-typeobserves user interaction method to distinguish pointer and keyboard actions
When working on ally.js these modules may come in handy.
- NOTE: When you find yourself using one of these in your application or library code, we should talk about what you're trying to achieve and how we could do that as part of the library instead. Get in touch, file an issue explaining what you're trying to achieve!
- NOTE: These modules are only available to be consumed via ES6, AMD or CommonJS directly, they are not exposed in the production bundle
ally.min.js.
The internal tools are documented in a less accessible way to make it just a tiny bit harder for someone not working on ally to use them. This is intentional. The stability of these APIs is not guaranteed.