Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Snyk] Upgrade react-beautiful-dnd from 13.0.0 to 13.1.1 #9575

Merged
merged 2 commits into from
Apr 3, 2024
Merged

[Snyk] Upgrade react-beautiful-dnd from 13.0.0 to 13.1.1 #9575

merged 2 commits into from
Apr 3, 2024

Conversation

mattkrick
Copy link
Member

This PR was automatically created by Snyk using the credentials of a real user.


Snyk has created this PR to upgrade react-beautiful-dnd from 13.0.0 to 13.1.1.

ℹ️ Keep your dependencies up-to-date. This makes it easier to fix existing vulnerabilities and to more quickly identify and fix newly disclosed vulnerabilities when they affect your project.

  • The recommended version is 2 versions ahead of your current version.
  • The recommended version was released 2 years ago, on 2022-08-30.
Release notes
Package name: react-beautiful-dnd
  • 13.1.1 - 2022-08-30
    • Adds react v18 to the list of supported react versions via peerDependency.
    • Various dependency bumps
    • Various changes to documentation
  • 13.1.0 - 2021-03-21

    Features

    You can now import default sensors as useMouseSensor, useKeyboardSensor, or useTouchSensor for individual reuse via sensors prop
    – Thanks @ vladmoroz

    React 17 is now supported 🎉
    – Thanks @ 100terres

    Fixes

    Removed redundant event listener
    – Thanks @ hodovani

    Misc

    Various improvements to the docs and examples
    – Thanks @ theBstar @ Ardeshir81 @ hednowley @ RavenAlly @ alexbudure @ vkentta @ johnrees @ agilatakishiyev @ petyosi @ inokawa @ ToriK17 @ paulshen @ ValentinH @ featherbear @ GarrisonJ

    Documentation is now available in Greek 🇬🇷
    – Thanks @ hdks55l

    Story source code is now visible in Storybook
    – Thanks @ 2stash

    Various internal changes
    – Thanks @ ValentinH

  • 13.0.0 - 2020-02-24

    release banner image

    📷 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
    voiceover nvda jaws

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

    Changes

    - 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 release
DragHandleProps | 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

from react-beautiful-dnd GitHub release notes
Commit messages
Package name: react-beautiful-dnd

Compare

Note: You are seeing this because you or someone else with access to this repository has authorized Snyk to open upgrade PRs.

For more information:

🧐 View latest project report

🛠 Adjust upgrade PR settings

🔕 Ignore this dependency or unsubscribe from future upgrade PRs

Dschoordsch
Dschoordsch approved these changes Apr 3, 2024
View reviewed changes
Copy link
Contributor

@Dschoordsch Dschoordsch left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Smoke tested

@Dschoordsch Dschoordsch merged commit c8c2321 into master Apr 3, 2024
1 check passed
@Dschoordsch Dschoordsch deleted the snyk-upgrade-04c3bade0a740e087f327f4c325fa9b6 branch April 3, 2024 07:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Dschoordsch Dschoordsch Dschoordsch approved these changes

Assignees
No one assigned
Labels
size/xs
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@mattkrick @Dschoordsch @snyk-bot @actions-user