Thanks for working on it.

I have a few suggestion to make it more fun 😉

1. Put translation in to dedicated WebAsset as we did it for Form validation

   joomla-cms/libraries/src/WebAsset/AssetItem/FormValidateAssetItem.php

   Lines 38 to 45 in e2170c8

   	public function onAttachCallback(Document $doc)
   	{
   	// Add validate.js language strings
   	Text::script('JLIB_FORM_CONTAINS_INVALID_FIELDS');
   	Text::script('JLIB_FORM_FIELD_REQUIRED_VALUE');
   	Text::script('JLIB_FORM_FIELD_REQUIRED_CHECK');
   	Text::script('JLIB_FORM_FIELD_INVALID_VALUE');
   	}

2. Make it work for multiple elements on the page, drop the containerSelector and pass the URL as data- attribute (can also pass other options as data-) kind of:

<div 
  class="js-my-cool-sortable-table" 
  data-sorting-url="blabla" 
  data-sorting-dir="ASC" 
  data-sorting-row=".js-row-selector"
>
    <div class="js-row-selector">...</div>
    <div class="js-row-selector">...</div>
 </div>

setUpSortableTable(container, setupOptions){
  const options = {..defaultOptions, ...setupOptions};
  ...
  ...
}
document.querySelectorAll('.js-my-cool-sortable-table').forEach((container) => {
  setUpSortableTable(container, container.dataset);
});

It of course could be WC, but as regular container it will be more clear and reusable.

setUpSortableTable() could be publicly available so people can use it on its own. If you like.

Thanks 😉

@Fedik Better? I still haven't modularize it (waiting to see the other 2-3 parts that have drag and drop)

I have tested this item ✅ successfully on 42f52e7

I clicked on the first checkbox of an article and followed the instructions, and the sorting is performed correctly.

@brianteeman yes

BTW I would appreciate an accessibility test and a check on the announcements. Thanks

Better?

Looks good, thanks!

I still haven't modularize it (waiting to see the other 2-3 parts that have drag and drop)

Not important for now, can stay as you did.
It can be extended anytime later in another PR.

@brianteeman yes

BTW I would appreciate an accessibility test and a check on the announcements. Thanks

I will check tomorrow. Not looked at it too closely yet but it will need a live region for the announcement

Looks like you are missing some strings from the announcements https://dndkit.com/extend/plugins/accessibility#default-announcements and from the screen reader instructions https://dndkit.com/extend/plugins/accessibility#default-screen-reader-instructions

This pull request has conflicts, please resolve those before we can evaluate the pull request.

This pull request has conflicts, please resolve those before we can evaluate the pull request.

icon size looks a bit big and not aligned with other icons

dnd works well with both mouse and keyboard

BUT when narrator is enabled it doesnt appear to work at all with the keyboard - but neither does their own demo clauderic/dnd-kit#147

you have to turn scan mode to off in narrator for it to work. i dont know if this is something obvious to screen reader users or not.

Can someone link this PR to the issue 29936

icon size looks a bit big and not aligned with other icons

This shouldn't be committed but the icon needs to change to 3 lines from 3 dots and the clickable area should be way bigger than only the icon size Reverted

BUT when narrator is enabled it doesnt appear to work at all with the keyboard - but neither does their own demo clauderic/dnd-kit#147

Not much that we could do here but in the issue it's mentioned that after pressing caps lock the issue is resolved

Looks like you are missing some strings from the announcements

You're right but event the ones that I added I guess are wrong (just added the defaults on their docs). I guess someone should come up with what should be announced in each step of the workflow (I think it should be something like: Item with title: Fancy title was picked up, instead of the one I just added Picked up draggable item row-0

For a start I would use the exact same strings that they use and I link to. We can customise it later but for now we should at least ensure we have ALL the required strings

For a start I would use the exact same strings that they use and I link to

added the original strings

Tested with mouse and keyboard. Ordering works like a charm.
With keyboard I am not sure about the skips - but could be it is like this since ever.

I open the page, skip-to form.
Focus is on the ordering icon, not on the check-all-toggle.
Then I tab forward, ok.
When I tab backwards, the tab ignores the order-button and goes to the check-all-toggle
Tabbing forward the ignores the order-button again.

Then I am unable to tab to the order-button with tabbing.

@chmst interesting but that’s not a part that this pr covers. I’m only doing the table body reordering, so maybe open another issue for the table head?
Thanks

I guess you're ok with the introduction of the new function but if still under discussion the reasons are

I am actually did not really paid attention for that 😄
I think we can use existing method with little modification to make it b/c.

Need to check.

I think we can use existing method with little modification to make it b/c.

it always returns "1" plus it expects the url parameters ie form submit…

This pull request has conflicts, please resolve those before we can evaluate the pull request.

Hello everyone,

I ran a test with a screen reader and can confirm the following.

Given that I do not know the commands for jumping between the various sections, pressing the tab key takes you through all the navigation links.

When you reach the headers of the articles table, pressing Enter above the sort icon activates the rows so that they can be moved. Furthermore, pressing Enter on the sort icon causes you to lose focus, and you have to go through the cycle again with the Tab key to reposition yourself on the table. However, when you are above the three dots, you cannot drag the row to move the item, rendering the function unusable.

See the video at this link: https://www.loom.com/share/cd4fab7d69ed47a588698710591c1b85

It works in Firefox

https://www.loom.com/share/b20257272179484fa1d2de4a8862c902

Furthermore, pressing Enter on the sort icon causes you to lose focus, and you have to go through the cycle again with the Tab key to reposition yourself on the table

this is expected as pressing enter will reload the page, so the focus is lost. I’m not resigning the page here just implementing the drag and drop with a popular js framework/library

However, when you are above the three dots, you cannot drag the row to move the item, rendering the function unusable.

when you have the 3dots high listed y out need to press enter or space once to enter the dragging mode. Check the instructions in the description above