Skip to content

Latest commit

 

History

History
80 lines (47 loc) · 4.41 KB

disabled.md

File metadata and controls

80 lines (47 loc) · 4.41 KB
Raw
layout tags
doc-api.html
shadow-dom, service, argument-options

ally.maintain.disabled

Disables any type of user interaction - including the ability to focus elements - essentially rendering elements inert.

Description

This allows an application to make sure no element other than the exempted can be focused. This is method is superior to the idea of trapping focus by intercepting Tab, because it allows cycling through the browser UI and is not as prone to break for spatial focus navigation (i.e. any sort of focus navigation that does not use the Tab key). The major benefit of disabling focus of elements is that in turn we do not have to meddle with the user's interaction to actually change focus - we can leave that to the browser.

Elements are disabled by ally.element.disabled and can be identified in the DOM by the attribute [data-ally-disabled="true"] to align with styling of other :disabled elements.

The proposed inert attribute was removed from HTML5, because people thought inert subtrees by way of the <dialog> element would suffice. While we believe it doesn't, the inert attribute would only have solved half of the problem, because there's no way to avoid inheriting the inert state onto children. This behavior can be observed in the Google Chrome Inert Attribute Polyfill.

ally.maintain.disabled observes DOM manipulations and automatically disables newly added elements when necessary.

Usage

var handle = ally.maintain.disabled({
  context: '.within-filter-selector',
  filter: '.except-filter-selector',
});

handle.disengage();

Arguments

Name Type Default Description
context <selector> documentElement The scope of the DOM in which to search. The first element of a collection is used.
filter <selector> null The significant elements to exclude from being disabled.

Returns

A <service> interface, providing the handle.disengage() method to stop the service.

Throws

Examples

Changes

  • Since v1.1.0 changing tabindex attribute values are properly handled.
  • Since v1.1.0 the disengage() method reverts elements within ShadowHosts to their previous state.
  • Since v1.1.0 DOM mutations within ShadowRoots are properly observed.
  • Since v1.1.0 initially disabled elements are not accidentally enabled when disengaging the service.
  • Since v#master ancestors of exempted sub-trees (defined by filter option) are not disabled anymore.

Notes

Related resources

Contributing