react-beautiful-dnd changelog

Changelog History

Page 1

• v13.0.0 Changes

  February 24, 2020

  🚀

  📷 Cover photo by Matheus Ferrero on Unsplash

  🚀 > 🎧 Release soundtrack: Colder Heavens - Blanco White

  Highlights

  • 🛠 Babel changes: no more unintentional polyfilling!
  • 🍱 ♿️ More reliable on focus messaging. Verified on VoiceOver, JAWS and NVDA screen readers

  🚀 > This is a low risk breaking version. It is essentially a bug fix release with some API changes. You might need to make some changes if you were unintentionally relying on our unexpected polyfilling, or if you are overriding our default screen reader messaging, then there will be some stuff for you to do.

  Babel

  This has been marked this as a breaking change 💥 as consumers might have been unknowingly relying on polyfills in rbd as a side effect 😲. This is a very low risk breaking change

  We have moved from @babel/runtime-corejs2 to @babel/runtime #1629. rbd aims to never polyfill anything - it should only use ponyfills (This should be the position of most libraries!) Sadly, choosing to use corejs2 meant that rbd did do polyfilling. We have now fixed this. Moving to @babel/runtime also saved a few kbs which is nice too.

  Thanks @TrySound for making this happen!

  Accessibility

  This is marked as a breaking change 💥 as there have been some changes in API - but they are pretty small. If you are not touching any of the rbd aria-* attributes or DragDropContext | liftInstruction then you can upgrade safely.

  It was discovered by @ccveer that our screen reader on browser focus messages where not being read out for particular HTMLElement types #1695 😦. I went on an accessibility deep dive to figure out what we should do , rather than just changing things until something worked. As a result of this research and experimentation with various screen readers (VoiceOver, JAWS and NVDA), I have made some small modifications to provide more principled and robust on focus announcements.

  Here are some screenshots of things working correctly:

  VoiceOver	JAWS	NVDA

  ⚡️ If you are providing custom screen reader messages, be sure to check out our updated screen reader guide.

  🔄 Changes

  // DragDropContext- DragDropContext | liftInstruction+ DragDropContext | dragHandleUsageInstructions// Drag handle- DragHandleProps | aria-labelledby+ DragHandleProps | aria-describedby+ DragHandleProps | role
  

  Usage instructions

  Moving from liftInstruction to dragHandleUsageInstructions to better reflect that we are now using to provide all of the assisted technology usage instructions, and not just the lift instructions. Previously our screen reader preset gave the instruction to start a drag on the drag handle, and other instructions after onDragStart in an announcement. We now give all of the usage instructions on the elements description. This seems to line up best with the intended use of an elements accessible description property. We are now using aria-describedby to set a description on a drag handle with interaction usage instructions as recommended by the W3C. aria-describedby points to a hidden element that contains the text you provide to dragHandleUsageInstructions

  No longer overriding 'name'

  A label one way to control the name of an element. The name is usually the content of the element and is often used to identify an element. We don't want to be touching the name so we are no longer using aria-labelledby

  ➕ Adding a role

  📄 > Lots of accessibility terminology here! If you are interested in the details check out our screen reader guide

  We now add a role to a drag handle. A drag handle is an interactive element as it has a tabindex. We now also add a role to convert the drag handle into a widget. Adding a role is needed for NVDA (a screen reader) to read out an interactive elements accessibility properties (name, role, value) 😅.

  ⚡️ Once axe-core is updated in Google lighthouse we will also add a aria-roledescription to give a more descriptive role. We didn't want to include this change until lighthouse was okay with it to prevent consumers from getting punished for (incorrect) accessibility violations. You are welcome to add your own aria-roledescription today if you want if you don't mind the lighthouse violation. You can track this change here: #1742

  // Will add this in an upcoming patch releaseDragHandleProps | aria-roledescription="Draggable item"
  

  🛠 Fixes

  • The Sensor API will now correctly release forcefully abandoned locks #1699. Thanks @nerdkid93 for finding this one
  • 🍱 A browser error will no longer be thrown when navigating with turbolinks #1751. Thanks @sdb1228 for raising this, as well as providing a fix and test 👏❤️

  Other

  • ⚡️ Two updates to our table pattern by @elamje!! A new approach suggestion #1692 and a grammar fix #1690 🎉

• v13.0.0-beta.1

  February 20, 2020

• v12.2.0 Changes

  December 05, 2019

  Overhauled collision engine #930

  

  🚀 In this release we have rewritten our collision engine to better account for mixed sized draggables and droppables.

  Mixed sized draggables

  Old collision engine	New collision engine
  🛠

  Mixed sized droppables

  Old collision engine
  

  🆕 New collision engine
  

  🍱 ✍️We wrote a blog which goes deep into the improvements we have made: Overhauling our collision engine

  🍱 A huge thanks to @caspersmith who helped us find a new approach to doing item collisions 🎉

  We have listed this as a minor change as it is an intentional change of behaviour

  🛠 Fixes

  • ⚠ More robust server side rendering (SSR) check to ensure we do not use useLayoutEffect on the server to avoid React warnings. We now use the same strategy as React and Redux. #1636. Thanks @LinusCenterstrom for contributing this one!
  • ✂ Removes duplicate code from the dimension locking example #1637. Good catch, @CraigEge!
  • ✂ Removes duplicate checks in is-position-in-frame #1635. @danieldelcore, nice 👀

  🚀 > All of these fixes resulted in a patch release (which got absorbed by the minor change

  A new maintainer joins the team!

  🍱 @danieldelcore has been added as a maintainer to rbd. Welcome @danieldelcore ! He greatly assisted in creating our new collision engine 👏

  

  Thanks

  🚀 A number of Atlassian's helped get this release over the line. Special shout out to:

  • Jake Miller
  • Ee Venn Soh
  • Tamarah Walsh
  • James Rotanson (for the amazing cover art)

• v12.2.0-alpha.1

  December 03, 2019

• v12.1.1 Changes

  November 15, 2019

  🛠 Fixes

  • Moving jest-axe from dependency to devDependency #1614. Thanks @dominykas for the pickup and pull request!

  🚀 > This resulted in a patch release.

• v12.1.0 Changes

  November 14, 2019

  🆕 New onBeforeCapture responder #1588

  <DragDropContext /> | onBeforeCapture is called after we know a drag will start, but before any dimensions have been collected from the DOM. It is an opportunity to add or remove <Draggable /> and <Droppable /> components, or modify element sizes.

  🍱 > ⚠️ Warning: this is pretty powerful and it can be used to do great things, as well as terrible things.

  📄 For more details, check out our responders guide

  In the following example, I am adding a trash bin (<Droppable />) in onBeforeCapture with some items (<Draggable />) in it to show off the kind of thing you can do ♻️

  

  Responder lifecycle+ 1. `onBeforeCapture`: a drag is about to start and dimensions have \*\*not been collected\*\* from the DOM2. `onBeforeDragStart`: a drag is about to start and dimensions \*\*have been captured\*\* from the DOM 3. `onDragStart`: A drag has started 4. `onDragUpdate`: Something has changed during a drag 5. `onDragEnd` \*\*(required)\*\*: A drag has ended. It is the responsibility of this responder to synchronously apply changes that has resulted from the drag
  

  This change resulted in a minor version bump

  🛠 Fixes

  • 🛠 Fixing issue with announcer and hot module reloading #1584. Thanks @Mangatt for raising this one ❤️
  • 🏗 Improving the accessibility of lift instructions #1568. Thanks @flacerdk for finding this and @seancurtis for the fix! @seancurtis went the extra mile and also created a jest-axe help us have even better accessibility coverage. It seems to pick up a bit more than our existing lighthouse build
  • 🛠 Fixing typo in our reparenting pattern. Thanks @TrySound for raising it

  🛠 > These fixes resulted in a patch version bump (which got eaten by the minor version bump)

• v12.1.0-alpha.0

  November 13, 2019

• v12.0.0 Changes

  July 11, 2019

  2019-06-27

• v12.0.0-beta.9

  October 22, 2019

• v12.0.0-beta.8

  October 22, 2019

• 1
• 2
• 3
• 4
• Next ›
• Last »