[4.0] Admin List views Accessibility for Drag and Drop

[dgrammatiko]

Steps to reproduce the issue

All List views in the backend are falling sort on Drag and drop with keyboard. What needs to be done:

• This code, similar to all pages:

						<td class="order text-center d-none d-md-table-cell">
								<?php
								$iconClass = '';
							if (!$canChange)
							{
								$iconClass = ' inactive';
							}
							elseif (!$saveOrder)
							{
								$iconClass = ' inactive tip-top hasTooltip" title="' . HTMLHelper::_('tooltipText', 'JORDERINGDISABLED');
							}
							?>
							<span class="sortable-handler<?php echo $iconClass; ?>">
								<span class="icon-menu" aria-hidden="true"></span>
							</span>
							<?php if ($canChange && $saveOrder) : ?>
								<input type="text" style="display:none" name="order[]" size="5" value="<?php echo $item->ordering; ?>" class="width-20 text-area-order">
							<?php endif; ?>
						</td>

Needs to become:

						<td class="order text-center d-none d-md-table-cell">
								<?php
								$iconClass = '';
							if (!$canChange)
							{
								$iconClass = ' inactive';
							}
							elseif (!$saveOrder)
							{
								$iconClass = ' inactive tip-top hasTooltip" title="' . HTMLHelper::_('tooltipText', 'JORDERINGDISABLED');
							}
							?>
							<button type="button" data-list-draggable="true">
								<span class="icon-menu" aria-hidden="true"></span>
							</button>
							<?php if ($canChange && $saveOrder) : ?>
								<input type="text" style="display:none" name="order[]" size="5" value="<?php echo $item->ordering; ?>" class="width-20 text-area-order">
							<?php endif; ?>
						</td>

Then we can apply the same logic @Fedik used in the subforms field custom element.

• Verify that the logic in the sorting method is actually correct, I have a feeling it's failing badly (Yes you can blame me again on this one 🤷‍♂️)

Expected result

Actual result

System information (as much as possible)

Additional comments

@chmst @zwiastunsw can you help with the html markup, then either me or @Fedik will be able to patch the missing interactivity

[brianteeman]

							<button type="button" data-list-draggable="true">
								<span class="icon-menu" aria-hidden="true"></span>
							</button>

The code looks almost perfect. I would just add some sr-only text here to describe the button for assistive technology

[chmst]

Maybe this is ot, but I wonder if there is a usecase where the case !saveOrder occurs?

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/23758.}

[dgrammatiko]

@chmst basically I was only referring to the code that also @brianteeman shared above. I have zero clue if the conditional ever gets triggered but most importantly for me the tooltip in there is a good indication of a failed design...

PS if it's disabled then DO NOT SHOW THAT COLUMN!!!

[chmst]

agree with "do notshow the column if ordering is disabled.
I've tried the code and would like this for sr-only:

<button type="button" data-list-draggable="true">
		<span class="icon-menu" aria-hidden="true"></span>
		<span class="sr-only"><?php echo Text::_('JORDERPOSITION ') . $item->ordering; ?></span>
</button>

The text should be defined, mybe with text variable for the number.
Your opinon?

[brianteeman]

The text should be defined, maybe with text variable for the number.

1. Good idea
2. It will need to update as soon as it is "dropped"
3. It should be a sprintf instead of a Text + number so it can be translated correctly

[dgrammatiko]

@brianteeman @chmst a reminder that we don't have sprintf in the JS API, so this can only be implemented PHP side

[chmst]

If we have to change all list views, it does not matter to add the attribute directly.
Or we do not write a text but only the number like "#12"? Would this do the trick in js?
Not sure about language specfic things like ltr, trl.

[dgrammatiko]

<span class="sr-only" data-text="<?php sprintf('Some text %s', '{replacement}'); ?>"><?php echo Text::_('JORDERPOSITION ') . $item->ordering; ?></span>

this could be handled very easily in the js world

[infograf768]

agree with "do notshow the column if ordering is disabled.

There are 2 ways to start using ordering in the list views:
One by setting ordering in Table Options
The other by just clicking on the Heading icon of the ordering column.
This last one is a very welcome shortcut as the Table Options dropdown implies much more manipulation.
Taking off the column would kill that shortcut.

[brianteeman]

@infograf768 you are confused. This is not about column sorting but about drag and drop ordering. Drag and drop ordering is not always needed as in some views it serves no function

[infograf768]

I was speaking of drag and drop ordering.
Evidently drag and drop maybe useless in some managers and in that case the column should go.

[brianteeman]

Your previous comment makes no sense then

[chmst]

So what I understand:
We all agree that the ordering column can be hidden if ordering is not allowed. I don't know a use case where this could happen but hiding the column is easy and not in scope of this PR.
The scope is:
If a user is allowed to change the ordering of i.e. articles, he/she now can do it by drag and drop of the item. If he can see the item and if he can use the mouse.
It is not possible for keyboard users or blind users, because the keyboard cannot do dag and drop.

So we can do

1. Add a sr-only attribute to every icon which could be dragged which shows the ordering number of this item.
2. As the keyboard user cannot perform the drag and drop, a text inoput field is added to every item.

My question @dgrammatiko this input field is hidden with display:none. How can the user make it visible?

[brianteeman]

because the keyboard cannot do dag and drop.

actually it can do and it can be accessible
https://medium.com/salesforce-ux/4-major-patterns-for-accessible-drag-and-drop-1d43f64ebf09
https://dev.opera.com/articles/accessible-drag-and-drop/

[zwiastunsw]

The code presented above seems to be good, but this code does not contain the marking needed to operate the keyboard drag function. See the pattern in the first link cited by Brian (Pattern 1: Sorting a List).
In the past (eg Joomla 1.5) this feature was accessible in Joomla because the user could enter the desired order in the text fields or move each row of the table using the up and down arrow buttons. You could take that code as the beginning to build a new code using the progressive enhancement. But this is beyond the scope of this discussion. I hope that @dgrammatiko and @Fedik will propose a good solution
I will complement the links provided by Brian with one more
https://www.sitepoint.com/accessible-drag-drop/
@chmst : I agree

[dgrammatiko]

My question @dgrammatiko this input field is hidden with display:none. How can the user make it visible?

He can't, this input is used by the program for referencing the position in the list. If you need this info somewhere you need to show me your desired HTML markup and then I'll have to figure out how to adapt the PHP + JS to render and update that info whenever some changes are made...

[brianteeman]

Check this out - it is perfect - and note the use of aria-live

https://schne324.github.io/dragon-drop/demo/

[dgrammatiko]

@brianteeman yup based on dragula so it's. good fit. Also proves that it was a good idea to get dragula in J4 couple of years ago...

[brianteeman]

wish I had the skill to implement it