[4.0] Subform custom element

[Fedik]

Summary of Changes

Convert subform.js to custom element <joomla-field-subform />

Testing Instructions

Add subform field in to an any form, and check whether it works as usual.

Documentation Changes Required

yes I think

Todo:

• make sorting to work (important)
• nested forms (optional)

@dgt41 Christmas present to you 😄

[dgrammatiko]

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

[dgrammatiko]

@Fedik check Fedik#4

[dgrammatiko]

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!

[Fedik]

@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

[Fedik]

@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

[dgrammatiko]

@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! 😃

[C-Lodder]

@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

[dgrammatiko]

@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...

[C-Lodder]

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

[Fedik]

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

[brianteeman]

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

[dgrammatiko]

@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

[Fedik]

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

[dgrammatiko]

@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 ;)

[Fedik]

@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

[Fedik]

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

[Fedik]

@dgrammatiko done, thanks!

[dgrammatiko]

I have tested this item ✅ successfully on bdaf42d

---

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

[laoneo]

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.

[brianteeman]

@laoneo and thats why it was not the best decision

[dgrammatiko]

@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

[dgrammatiko]

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)

[laoneo]

@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.

[dgrammatiko]

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

[laoneo]

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

[Fedik]

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

[laoneo]

I have tested this item ✅ successfully on bdaf42d

---

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

[dgrammatiko]

I have tested this item ✅ successfully on bdaf42d

---

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

[ghost]

Ready to Commit after two successful tests.

[phalouvas]

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

[laoneo]

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