[Accessibility] Add support for single pointer draggable actions

[CecoMilchev]

Description

This is related to our cross-team efforts for WCAG 2.2 compliance.

Part of: https://github.com/telerik/blazor/issues/5353 with affected components at: https://github.com/telerik/web-components-ux/issues/654#issue-1411651113.

Current behavior

Currently, the dragging happens by using the primary key of the mouse, holding it down, and simultaneously moving it. This requires precise movement with the mouse. In short, Click and Hold + Move -> Click.

Expected behavior

The expected behavior is to click on the primary key of the mouse (that would pick up the draggable element) and allow the user to move the mouse (drag the element) without the need of holding down the key. In short, Click -> Move -> Click action.

[CecoMilchev]

Specification

This item aims at providing an option for the users to drag and drop items without the need to hold the primary mouse key while moving the mouse.

Parameter	DataType	Description
clickMoveClick	boolean?	Flag indicating how the drag should happen - Click and Hold + Move -> Click if false and Click -> Move -> Click if true.
cancel	function (event), received as a constructor parameter	The single pointer draggable action should be canceled if the secondary (right, usually) mouse key has been pressed. This should terminate the drag process and trigger the function provided as an input argument.
cancelDrag	function (method)	Cancels the drag action without calling the cancel handler provided to the widget. Needed when the consumers decide to handle the events themselves but still get the functionality through the exposed API.

NB: The parameter names are not set in stone - they might be different with the final version if we find more appropriate names.

cc: @telerik/kendo-dev-leads

[Stamo-Gochev]

I would say we can use more explicit names to allow easier understanding.

For example,

• dragOnClickMoveClick or dragOnPressMoveRelease - it's more verbose than clickMoveClick, but better signals the action that requires click-move-click. In theory, we can have more than 1 action that is executed on click-move-click, e.g. dragcancel and drag. I cannot think of a shorter name that describes the behavior of click-move-click - if there is a common term for such a drag strategy, I would be happy to use it instead - I have considered something like stickyDrag: true, but it is not very descriptive - you actually need to go and read what is "sticky drag"
• cancel event - it seems to me that we can use dragCancel instead - we do not have "real" events as an abstraction as we get the handlers directly, but as we already have a drag event, we better add the word drag- in front as we can group the events, e.g. drag, dragCancel, dragEnd, etc. - yes, we have used "press" and "release" instead of "dragStart" and "dragEnd", but the decision has been taken long ago and we can easily add aliases. Things like dragCancel/dragEnd/dragStart are more consistent with the HTML 5 Drag&Drop API,

[CecoMilchev]

Thank you, Stamo for your inputs and feedback on the implementation.

For the time being, I am putting the item on hold due to an unfinalized solution regarding the WCAG 2.2. Across the web teams, we are exploring alternatives to the single click draggable option.