Great work @Fedik Merry Christmas to you too!! ?

@Fedik check Fedik#4

Another thing about the sortable functionality: it needs to be keyboard accessible. I have no clue if either the draggula or the airbnb script are accessible! Anyways some time ago @brianteeman pointed out some resource about accessible drag and drop: https://www.sitepoint.com/accessible-drag-drop/
(I think it's the correct one, but I couldn't find the actual discussion).
All and all we need to re-evaluate the script for drag and drop considering accessibility!

@dgt41 current problem is to make the sorting to work, at least ?

because it is now a custom element, I do not think it will be good idea to have "external dependency"

as you already told, can be need to merge in to single file

@dgt41 and idea,
what if we drop "drag sorting" and just make "old school" a two arrows 'move Up'/'move Down' ?
it is perfect for accessibility and should not be hard to implement

@Fedik let's create couple codepens with deferent approaches and let the a11y and design team decide which way the want to go. For me anything that fulfils the requirements is good enough! ?

@Fedik would be easy to implement but we'd be going backwards rather than forwards. J3 supports drag-n-drop and J4 only allows you to move rows 1 place at a time

@C-Lodder J3's drag and drop is not accessible, the point is accessibility here, if we can replicate J3 dnd in accessible fashion lets do it, else let's do something that is accessible...

Brian shared a link for an a11y dnd a while back. It's definitely possible

but we'd be going backwards rather than forwards

it an evolution loop ?
well, just an idea ?

for now I do not have any solution

Brian shared a link for an a11y dnd a while back. It's definitely possible

the problem with that example, that it use HTML5 draggable which do not work good on mobiles

up - down arrows are not an improvement and they are not better for accessibility

It is perfectly possible to provide keyboard support for drag and drop
See https://www.sitepoint.com/accessible-drag-drop/ for info
http://jspro.brothercake.com/multidrag/demo4b.html for demo

@Fedik do you want to experiment on the code of site point that @brianteeman posted above?
I could spend some time to make this behave as the sortable

@dgt41 I will try on next weekend,
but any help are welcome ?

@Fedik check

• https://github.com/RubaXa/Sortable
• https://codepen.io/taoofbean/pen/rnCvK

I can live with a CE wrapper (joomla-sortable) for this lib ;)

@dgt41 I seen that, but somehow I do not liked that ?

If use of external lib, then I would stop on https://github.com/Shopify/draggable they declare Accessibility support https://github.com/Shopify/draggable/search?q=accessibility&type=Issues&utf8=%E2%9C%93

for now I try native HTML 5 dragable API, with some polyfill for mobile browsers

note for me

keymap:

tab to switch element / switch drop target
space (or modifier + space) to select
ctrl+m / enter to place
esc to cancel

for now,
Desktop drag sorting, works.

Keyboard sorting, works:

1. tab to navigate to needed row,
2. (ctr,alt,shift) + space select the row,
3. tab to select destination,
4. enter to place selected row in to destination

esc to cancel selection

Great! One thing though the source in in build/webcomponents/... not directly in the media/system/webcomponents. The later is the compiled/transpiled version

I still need to add keyboard navigation to add/remove buttons.
Test the mobile dragable polyfil.
And try something with "nested" forms, if I will have a mood ?

@dgt41 can you please have a look, I cannot make es6 minyfied, there some random error ?

@Fedik run

npm install git://github.com/gruntjs/grunt-contrib-uglify.git#harmony --save-dev

and change in the Gruntfile.js the line

grunt.loadNpmTasks('grunt-contrib-uglify');

to

grunt.loadNpmTasks('grunt-contrib-uglify-es');

then run again grunt createElement

@dgt41 works. thanks!

Now it support a base nesting, however I would not recommend to use a complex nested forms, and complex fields in a nested forms. example an editor field should not be in nested.

This is ready for testing.

Use any existing subform field, and make sure it still work.
Or use this example:

<field name="field-name" type="subform" multiple="true" label="Subform Field">
	<form>
		<field type="text" name="text" label="text" />
	</form>
</field>

For nested:

<field name="field-name-other" type="subform" multiple="true" label="Subform Field">
    <form>
        <field type="text" name="text" label="text" />
        <field name="subform-nested" type="subform" multiple="true" label="Nested Field"
            layout="joomla.form.field.subform.repeatable-table">
            <form>
                <field type="text" name="text-nested" label="text2" />
            </form>
        </field>
    </form>
</field>

@Fedik if you can resolve the conflicts I will give it a try

@brianteeman done

Thanks will test tomorrow

Tested with a subform and cannot work out how to get the sorting by keyboard to work

Tested with a subform and cannot work out how to get the sorting by keyboard to work

@brianteeman I knew it will be hard, and it is really hard

Once again for Keyboard sorting:

1. tab to navigate to needed row,
2. (ctr,meta,shift) + space select the row,
3. tab to select a destination,
4. enter to place selected row in to destination

The sorting by keyboard in pictures

I have painted a couple pictures.

1. tab to navigate to needed row (I would recommend to click the label first, to get there faster), you should see "row in focus" (style different from OS & Browser):
   

2. ctrl + space OR shift + space OR meta + space to select the row (aria-grabbed="true"), you should notice darkblue shadow:
   

3. now use tab to focus the destination, where selected row should be placed:
   

4. push enter, now the selected row should be placed at destination:
   

5. Done!

But it is really hard, especial if you have a lot of fields inside, you should push tab 1000 times.
I tried to follow a recommendations from https://www.sitepoint.com/accessible-drag-drop/ and some other sources.

Any suggestions to improve are welcome ?

Thanks for the update. I will try again soon. I was definitely trying to do what you showed in the images.

I was definitely trying to do what you showed in the images.

Also there was problem with minimized template.min.css, and "select' action was invisible.
Maybe this was a reason.
I have updated template.min.css in last commit

ok it works now. ;)

One question.
After selecting a row I would expect the next tab would take me to the next row where I want to place the selected row. However i have to tab through all the elements in the row to get to the next row

After selecting a row I would expect the next tab would take me to the next row where I want to place the selected row. However i have to tab through all the elements in the row to get to the next row

I would expect it also.

The problem that the rows use tabindex="0" and so "flow" with other elements/input on the page.
I tried to set it tabindex="1" then it works a bit better, however I have read recommendation to do not use tabindex bigger than zero, because it can confuse screen-reader, or something.

So for now it like this.
Maybe in future we will get a better idea how to fix it.

@wilsonge can you please merge this one?
@Fedik please fix the conflict

done

How did you guys tested this subform field? The ability to move cloned fields is not working in my test. Someone told me in my other post that jqueryUI has been deprecated in J!4 but I'm getting error with it in the subform field. Here's the screen capture:

http://take.ms/eNrxb

Someone told me in my other post that jqueryUI has been deprecated in J!4 but I'm getting error with it in the subform field

Not all deprecated items have been removed yet. If it's marked deprecated in 3.x and still exists today in the 4.0 code, that doesn't necessarily mean it's going to survive to the stable release. Remember 4.0 is very much still a work in progress.

@frogydiak well jquery-ui is not used in this PR.
Go to issues.joomla.org and click on the link Fedik:subform-custom-element then install Joomla...

@mbabker Thanks for the explanation, I'm quite new to github joomla and wanted to participate on reporting issues. I am confused to say the least. LOL! If you look at dgt41 saying above, he's pointing me to another website that is loading this thread. What?! Do I have to know in-depth Joomla developer jargons to be able to help out? Why do you guys decided to have another site for issue tracker when you can just redirect to github? Another layer of confusion and system to develop and manage. There's no clear guidelines as what to expect in J!4 branch. That explanation you did could have been in the README.md but it seems to me it was just copied from previous versions. scratching my head... confused!

@Fedik can you resolve the conflict here?

done

@Fedik can you merge: Fedik#7 and Fedik#6

Then I can mark my test as successful here

@dgrammatiko done, thanks!

I have tested this item ✅ successfully on bdaf42d

As the tests got moved to a separate repo you need to create a pr with the tests in the JS testing repo and remove them from here.

@laoneo and thats why it was not the best decision

@laoneo since all tests are basically nullified we can safely remove them in this PR as well.
Of course at some later point (eg API is stable) we will spent some time redoing them, but right now I guess this is not a show stopper

and thats why it was not the best decision

so I will agree this is bad for the short term but once the tests are done correctly this would be a better solution. (the main advantage is that if a PR breaks some tests this will be very obvious and since we want to keep B/C tests should never break, at least that's part of the theory there)

@brianteeman I wasn't part of that decision and do not know all the pros and cons. For now, if the tests are unnecessary then lets remove them in this pr and add them later.

@Fedik can you resync this (basically you will have to delete the tests as these were deleted few days ago)

@Fedik can this be tested by creating a new list custom field as it uses subforms?

@laoneo it should work as it was before, everywhere where subform field was used ?
so yes

I have tested this item ✅ successfully on bdaf42d

I have tested this item ✅ successfully on bdaf42d

Ready to Commit after two successful tests.

Below problem occurred after this update. I tried to see where exactly is the problem, but failed. The test was on Microsoft Edge browser.

Can you please open a new issue with the problem. Thanks for understanding.