Skip to content

Releases: mbraak/tree-element

v0.4.0

Choose a tag to compare

@github-actions github-actions released this 24 Oct 11:01

Added

  • The option multiSelect lets the user select multiple nodes.

Changed

  • Make the tree readable for screen readers.

v0.3.2

Choose a tag to compare

@github-actions github-actions released this 12 Oct 06:00

Changed

  • The default closedIcon and openedIcon triangles are larger and have the
    same width and height, like the triangle characters they replaced.

v0.3.1

Choose a tag to compare

@github-actions github-actions released this 11 Oct 20:01

Fixed

  • A relative dataUrl, such as api/nodes.json, is resolved against the page
    instead of the root of the site. This makes it work when the page is in a
    subdirectory, for example on GitHub Pages.
  • The default closedIcon and openedIcon are now svg triangles instead of
    text characters. This make sure they are the same on all platforms.

v0.3.0

Choose a tag to compare

@github-actions github-actions released this 11 Oct 14:20

Added

  • The keys Home and End select the first and the last visible node.
  • The key Enter dispatches the new event tree.activate, for example to open
    the edit page of the node.
  • The options ariaLabel and ariaLabelledBy give the tree an accessible name.
  • The colors in tree_element.css are css custom properties, such as
    --tree-element-title-color, so you can change them or add a dark theme. See
    Styling.
  • A folder's treeitem has aria-busy="true" while its children load.

Fixed

  • The tree can be reached with the tab key when no node is selected.
  • Do not set aria-label for tree nodes. Rely on the node text instead.
  • Screen readers no longer read the open/close toggler. It has
    aria-hidden="true"; aria-expanded on the node already has the state.
  • When loading the children of a folder fails, the tree no longer requests them
    again and again. The folder stays closed; opening it again retries.

Changed

  • The toggler and the rows are at least 24px high, and the toggler is at least
    24px wide: the WCAG 2.5.8 minimum for click targets. This makes the tree a
    bit taller. The toggler no longer has a margin; the space around its icon
    separates it from the title.
  • The toggler is a span instead of an a without href. Update css that
    selects a.tree-element-toggler.
  • When the user prefers reduced motion (prefers-reduced-motion: reduce),
    folders open and close without animation, unless animationSpeed is set.
  • The method selectNode keeps an already selected node selected, as
    documented.
  • The methods closeNode and toggle return a promise that is resolved when
    the folder is closed or opened, like openNode. Await it when you need to
    know the animation has finished.

v0.2.0

Choose a tag to compare

@github-actions github-actions released this 16 Sep 12:17

Fixed

  • The options closedIcon and openedIcon render a string as html instead of
    as text.

Changed

  • Make rendering faster by using templates.
  • The children of a closed folder are rendered when the folder is opened,
    instead of when the tree is rendered. onCreateLi is called for a node when
    it is rendered.
  • The method getSelectedNode returns null instead of false.
  • The method setState saves the state to storage when saveState is enabled.

v0.1.1

Choose a tag to compare

@github-actions github-actions released this 06 Sep 12:14

Changed

  • tree.load_failed is also dispatched when a request fails with a network error.