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.

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

[4.0] Admin List views Accessibility for Drag and Drop #23758

Open
dgrammatiko opened this Issue Feb 3, 2019 · 19 comments

Comments

Projects
None yet
6 participants
@dgrammatiko
Copy link
Contributor

dgrammatiko commented Feb 3, 2019

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

This comment has been minimized.

Copy link
Contributor

brianteeman commented Feb 3, 2019

							<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

This comment has been minimized.

Copy link
Contributor

chmst commented Feb 3, 2019

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

This comment has been minimized.

Copy link
Contributor Author

dgrammatiko commented Feb 3, 2019

@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

This comment has been minimized.

Copy link
Contributor

chmst commented Feb 3, 2019

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

This comment has been minimized.

Copy link
Contributor

brianteeman commented Feb 3, 2019

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

This comment has been minimized.

Copy link
Contributor Author

dgrammatiko commented Feb 3, 2019

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

@chmst

This comment has been minimized.

Copy link
Contributor

chmst commented Feb 3, 2019

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

This comment has been minimized.

Copy link
Contributor Author

dgrammatiko commented Feb 3, 2019

<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

This comment has been minimized.

Copy link
Member

infograf768 commented Feb 4, 2019

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

This comment has been minimized.

Copy link
Contributor

brianteeman commented Feb 4, 2019

@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

This comment has been minimized.

Copy link
Member

infograf768 commented Feb 4, 2019

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

This comment has been minimized.

Copy link
Contributor

brianteeman commented Feb 4, 2019

Your previous comment makes no sense then

@chmst

This comment has been minimized.

Copy link
Contributor

chmst commented Feb 4, 2019

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

This comment has been minimized.

Copy link
Contributor

brianteeman commented Feb 4, 2019

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

This comment has been minimized.

Copy link
Contributor

zwiastunsw commented Feb 4, 2019

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

This comment has been minimized.

Copy link
Contributor Author

dgrammatiko commented Feb 4, 2019

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

This comment has been minimized.

Copy link
Contributor

brianteeman commented Feb 19, 2019

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

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

@dgrammatiko

This comment has been minimized.

Copy link
Contributor Author

dgrammatiko commented Feb 19, 2019

@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

This comment has been minimized.

Copy link
Contributor

brianteeman commented Feb 19, 2019

wish I had the skill to implement it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.