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

Tech drag drop cancel #456

Merged
merged 18 commits into from
Apr 26, 2019
Merged

Tech drag drop cancel #456

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
7ece4ca
Set up drag-drop-cancel technique
May 9, 2018
f56e3ad
Moved Wiki Technique draft here
detlevhfischer May 17, 2018
e2547b4
Merge branch 'master' into tech-drag-drop-cancel
Jun 22, 2018
ffe768c
Update drag-drop-cancel.html
detlevhfischer Oct 18, 2018
c638054
moved acc support note
detlevhfischer Oct 18, 2018
d1f580a
removed < bracket
detlevhfischer Oct 18, 2018
6264706
Changed test procedure
detlevhfischer Oct 18, 2018
183f18c
Changed title from 'gestures' to 'actions'
detlevhfischer Oct 18, 2018
49eedc6
Merge remote-tracking branch 'origin/master' into tech-drag-drop-cancel
alastc Nov 20, 2018
676a777
Minor tidy up
alastc Nov 20, 2018
b333023
Fixed section tag closing.
alastc Nov 29, 2018
6f428d7
Renamed for publication
alastc Nov 29, 2018
7b6caab
Updating the understanding doc
alastc Nov 29, 2018
87f4ad8
Updating filename to 208
alastc Dec 20, 2018
f982685
Removing the draft-links.
alastc Jan 11, 2019
9cf409a
minor omission in test procedure
detlevhfischer Jan 17, 2019
7d16480
Rename G208.html to G210.html
Apr 26, 2019
4083760
Update pointer-cancellation.html
Apr 26, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 71 additions & 0 deletions techniques/general/G210.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Ensuring that drag-and-drop actions can be cancelled</title>
<link rel="stylesheet" type="text/css" href="../../css/editors.css"/>
</head>
<body>
<h1>Ensuring that drag-and-drop actions can be cancelled</h1>
<section id="meta">
<h2>Metadata</h2>
<p id="id"></p>
<p id="technology">general</p>
<p id="type">sufficient</p>
</section>
<section id="applicability">
<h2>When to Use</h2>
<h3>Applicability</h3>
<p>The Technique is applicable to any technology that supports pointer input (e.g. supporting any or all of the following: mouse pointer, touch on touch screen or trackpad, stylus input, or laser pointer input).</p>
</section>

<section id="description">
<h2>Description</h2>
<p>The objective of this technique is to ensure that users who use a path-based drag-and-drop action to move an item from the initial location to a drop target can abort the action after picking up the target. This can be done either by releasing the item outside a drop area, or by moving the item back to its original position in a separate action that undoes the first action. A third option is to have a step after the element is dropped onto target, either with a dialog asking for confirmation of the action when the item is dropped, or providing an undo command.</p>

<p class="note">This technique addresses pointer actions where support has been implemented by authors, not gestures provided by the user agent (such as horizontal swiping to move through the browser history or vertical swiping to scroll through page content) or the operating system (e.g., gestures to move between open apps, or call up contextual menus of assistive technologies when these are enabled).</p>

<h3>User Agent and Assistive Technology Support Notes</h3>
<p>On touch screen devices, author-supplied path-based and multipoint gestures usually do not work when OS level assistive technologies (AT) like a built-in screenreader is turned on. AT generally consumes path-based or multipoint gestures so they would not reach the authored content. For example, a horizontal drag gesture may not move a slider thumb as intended by the author, but move the screen reader focus to the next or previous element. Some gestures may work if the user operates "pass through gestures" which are often unreliable as they may depend on factors of hardware, operating system, operating system "skin", operating system setting, or user agent.</p>
</section>

<section id="examples">
<h2>Examples</h2>
<ul>
<li>A site shows a file directory. Files can be picked up and moved over a trash can icon. When the picked-up file is released outside this target, it reverts to the old position.</li>
<li>A site shows a file directory. Files can be picked up and moved over a trash can icon to delete it. When the picked-up file is released over the trash can, a modal dialog asks the user to confirm or cancel the delete action.</li>
<li>A kanban implementation of a project planning site shows different columns for phases of an activity. Users can pick up and move icons representing planning items to another column. When an item has been picked up and now follows the pointer, it can be moved outside the drop targets (columns) and dropped there to cancel the action. The item will then jump back to the old position.</li>
<li>A kanban implementation of an issue tracking system shows columns that indicate different phases in handling issues (such as new / processed / done / closed). There is no screen space outside the kanban columns. Users can pick up and move icons representing issues between columns. When an item has been dropped in another column, the action can be reversed by dragging the icon back to the original column where it will return to its original position (defined by sorting preferences).</li>
</ul>
</section>

<section id="resources">
<h2>Resources</h2>
<a href="https://www.youtube.com/watch?v=DI5ALywD6Qc">Video of canceled drag-and-drop interaction (item released outside drop target) (Youtube)</a>
</section>

<section id="tests">
<h2>Tests</h2>
<section class="test-procedure">
<h3>Procedure</h3>
<p>For content that is draggable, check whether the drag-and-drop action can be reversed by:</p>
<ol>
<li>releasing the picked-up item outside a drop target</li>
<li>dragging the picked-up item back to its old position</li>
<li>a confirmation dialog or an undo control appears after the item has been dropped</li>
</ol>
</section>
<section class="test-results">
<h3>Expected Results</h3>
<ul>
<li>At least one option of #1, #2, #3 is true</li>
</ul>
</section>
</section>
<section id="related">
<h2>Related Techniques</h2>
<ul>
<li>ID</li>
</ul>
</section>
</body>
</html>
18 changes: 11 additions & 7 deletions understanding/21/pointer-cancellation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,18 +73,22 @@ <h2>Techniques</h2>
<section id="sufficient">
<h3>Sufficient</h3>
<ul>
<li>Activating a control using the up-Event in HTML, iOS and Android</li>
<li><a href="https://www.w3.org/WAI/GL/mobile-a11y-tf/wiki/M029">M029(wiki) Touch events are only triggered when touch is removed from a control</a></li>
</ul>
<li><a href="../../techniques/general/G210">G210</a></li>
<li>@@ Activating a control using the up-Event in HTML, iOS and Android.</li>
<li>@@ Touch events are only triggered when touch is removed from a control.</li>
</ul>
</section>
<section id="advisory">
<!--<section id="advisory">
<h2>Advisory</h2>
</section>
<ul>

</ul>
</section>-->
<section id="failure">
<h2>Failure</h2>
<ul>
<li><a href="http://w3c.github.io/Mobile-A11y-TF-Note/Techniques/FM001">FM001 Failure of SC 2.5.3 due to activating a button on initial touch location rather than the final touch location</a></li>
</ul>
<li>@@ Failure of SC 2.5.3 due to activating a button on initial touch location rather than the final touch location.</li>
</ul>
</section>
</section>
</body>
Expand Down