@dnd-kit/accessibility

Minor Changes

• #1229 aabb8bd Thanks @ayy-bc! - Introduce ariaLiveType prop on <LiveRegion> to allow consumers to configure the aria-live attribute to other values for announcements, such as aria-live="polite".

Patch Changes

• #776 3978c43 Thanks @clauderic! - The ARIA live region element used for screen reader announcements is now positioned using position: fixed instead of position: absolute. As of @dnd-kit/core^6.0.0, the live region element is no longer portaled by default into the document.body. This change was introduced in order to fix issues with portaled live regions. However, this change can introduce visual regressions when using absolutely positioned elements, since the live region element is constrained to the stacking and position context of its closest positioned ancestor. Using fixed position ensures the element does not introduce visual regressions.

Major Changes

• a9d92cf #174 Thanks @clauderic! - Distributed assets now only target modern browsers. Browserlist config:

  defaults
  last 2 version
  not IE 11
  not dead
  

  If you need to support older browsers, include the appropriate polyfills in your project's build process.

Patch Changes

• b406cb9 #187 Thanks @clauderic! - Introduced the useDndMonitor hook. The useDndMonitor hook can be used within components wrapped in a DndContext provider to monitor the different drag and drop events that happen for that DndContext.

  Example usage:

  import {DndContext, useDndMonitor} from '@dnd-kit/core';
  
  function App() {
    return (
      <DndContext>
        <Component />
      </DndContext>
    );
  }
  
  function Component() {
    useDndMonitor({
      onDragStart(event) {},
      onDragMove(event) {},
      onDragOver(event) {},
      onDragEnd(event) {},
      onDragCancel(event) {},
    });
  }
  

Major Changes

• 2833337 #186 Thanks @clauderic! - Simplify useAnnouncement hook to only return a single announcement rather than entries. Similarly, the LiveRegion component now only accepts a single announcement rather than `entries.

  • The current strategy used in the useAnnouncement hook is needlessly complex. It's not actually necessary to render multiple announcements at once within the LiveRegion component. It's sufficient to render a single announcement at a time. It's also un-necessary to clean up the announcements after they have been announced, especially now that the role="status" attribute has been added to LiveRegion, keeping the last announcement rendered means users can refer to the last status.

Patch Changes

• c24bdb3 #184 Thanks @clauderic! - Tweaked LiveRegion component:
  • Entries are now rendered without wrapper span elements. Having wrapper span elements causes VoiceOver on macOS to try to move the VoiceOver cursor to the live region, which interferes with scrolling. This issue is not exhibited when rendering announcement entries as plain text without wrapper spans.
  • Added the role="status" attribute to the LiveRegion wrapper element.
  • Added the white-space: no-wrap; property to ensure that text does not wrap.

Patch Changes

• 423610c #56 Thanks @clauderic! - Add MIT license to package.json and distributed files

Patch Changes

• 310bbd6 #37 Thanks @nickpresta! - Fix typo in package.json repository URL

Major Changes

• 2912350 Thanks @clauderic! - Initial public release.

Minor Changes

• 7bd4568 #30 - Initial beta release, authored by @clauderic.