All notable changes to this project will be documented in this file.
The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.
- Fixed: In some cases, focus was still set even when explicitly expanding without focus.
- Added: Set class
is-transitioning
while transitioning between expanded and collapsed states, and vice-versa.
- Fixed: Do not set focus on element initialization.
- Added: New methods
CollapsibleBlock.enableFocusOnExpand
andCollapsibleBlock.disableFocusOnExpand
to control whether to focus on the first focusable element when expanding a block.
- Fixed: Make sure to finish the "expand" state change after the duration of the height transition, so we don't need to rely completely on the browser's
transitionend
event.
- Added: New parameter
withFocus
for theCollapsibleBlock.expand
function which allows to expand a collapsible block without setting focus to the focusable elements inside it.
- Fix: Detect links with
role="button"
as focusable elements. - Fix: Do not try to select the contents of fields or other elements that do not support it.
- Added option to select focusable field contents when expanding a collapsible-block. Defaults to
true
.
- Fix: do not set auto-focus when initializing the collapsible blocks when the element's initialiation happens late (ie. after an ajax call)
- Fix: do not set auto-focus when element is not visible or inside nested collapsible blocks.
- Fix: do not set auto-focus when initializing the collapsible blocks.
- Added option to set focus to first focusable element within the collapsible block content element. Set the attribute
data-autofocus
on the collapsible block element or the element that should get the focus. - Added option to toggle state of multiple collapsible blocks at once by setting the attribute
data-collapsible-targets
with more than one collapsible block ID. - Added class
is-expanded
when blocks are expanded.
- Fix an error where the element or event passed to
finishCollapse
orfinishExpand
contains atarget
property but it is not valid.
- Added support for keyboard keys
SPACE
andENTER
to activate the collapsible handlers. - Added accessibility
aria-
attributes to represent the state of the collapsible blocks.
- Hides the content with
display: none;
when collapsing to prevent users from accessing collapsed content using the a keyboard. - Improved
collapse
andexpand
functions to allow change the state of the block without transitions, and the initial state change will not "play" transitions, and to stop any transition playing switching from "collapsing" to "expanding" and vice versa.
- Fixed how
collapse
andexpand
functions calculate the limit values for each state, avoiding wrong values when the viewport or content site changes.
- Replaced the attribute
data-collapsible-target
witharia-controls
as the later serves for accessibility purposes and can also be used to point to the target of the handler element.
- Fixed support for nested collapsible blocks without content element at initialization.
- Added body class
has-collapsible-block
on initialization.
- Fixed first collapsible does not fully expand when styles are applied too late.
- Fixed documentation of default values on README.md.
- Fixed how the script handles the
overflow
property for the content element, clear inlineoverflow
property value after expanding.
- Added support for collapsible content elements without the inner element by creating the content inner element at initialization.
- Exposed the variable
_states
for public use asCollapsibleBlock.states
. - Added transition between collapsed and expanded states.
- Added CHANGELOG.md (this file).
- Fixed some typos and removed an unnecessary paragraph from README.md.
- Removed unnecessary dependency
hammerjs
.
- Initial commit.