XWIKI-22280: Object editor dropdowns are not keyboard accessible #3254

Sereza7 · 2024-07-05T14:35:10Z

Jira URL

https://jira.xwiki.org/browse/XWIKI-22280

Changes

Description

Added translations for the hint of the dropdowns
Updated the DOM generated for the class and object editors to be more precise and correct on semantics.
Updated dataeditors.js to take those changes into account.
Updated the styles to take those changes into account
Improved organization in dataeditors.css
Added a transition on the caret rotations.
Added basic keyboard support to the property reorder tool as an alternative to drag and drop
Updated button classes to use current bootstrap button styles (btn-default instead of btn-secondary...)
Refined a bit more the style to fit better with what it used to be and better UI navigability.
Updated translation to reflect the new functionality of the reorder button.

Clarifications

We rely on a prototype library, scriptaculous, to power this page. Ideally we'd move everything to Jquery, but this is beyond the scope of this PR, so I just extended the scriptaculous code to make the sortable components keyboard operable.
I decided to have the highlight of items on both :focus and :hover. This can create situations where there's two items highlighted. IMO this is okay, but this could be considered as confusing and we might look for another solution (two highlight colors, or keeping it like it used to be, on hover only, and have only the blue-border for the focus state)

Screenshots & Video

Video taken after e030e84 :

2024-07-05.16-23-46.mp4

Executed Tests

See #3254 (comment)

Expected merging strategy

Prefers squash: Yes
Backport on branches:
- None, DOM changes are pretty dangerous. Even if it's an UI which should not have too much custom code relying on.

* Added translations for the hint of the dropdowns * Updated the DOM generated for the class and object editors to be more precise and correct on semantics. * Updated the .js to take those changes into account. * Updated the styles to take those changes into account * Improved organization in dataeditors.css * Added a transition on the caret rotations. TODO: * remove the value from the titles, the punctuation doesn't match the use * Accessibility of the reordering feature

* Added basic keyboard support to the reorder tool as an alternative to drag and drop * Removed titles from the toggling buttons, they only conveyed repetitive info and would need some additional (very similar) translations * Updated style to use current bootstrap button styles (btn-default instead of btn-secondary...) * Refined a bit more the style to fit better with what it used to be and better UI navigability. * Updated translation to reflect the new functionality of the reorder button.

tkrieck · 2024-07-09T19:13:21Z

Hi @Sereza7 some remarks on this:

The delete button can be use the trash icon, this way we can standardize delete actions to a trash can icon and remove to an X icon.
Could the buttons for delete, move and edit be moved to the beginning of the line? There's a lot of space between line title and these actions.
The edit icon seems to be bigger than the others.

The overall design can also be improved by giving more clear delimitations on where something starts and where something ends. It could be by adding some borders and backgrounds and removing unnecessary icons. The example below I managed to do with just CSS, without changing the DOM (by no means I am saying that it should be this way, more like an idea for improvements.).

What do you think?

* Replaced the cross with a trash icon for the delete actions.

Sereza7 · 2024-07-12T15:18:36Z

@tkrieck

The delete button can be use the trash icon, this way we can standardize delete actions to a trash can icon and remove to an X icon.

👍 Done in ce80b17

Could the buttons for delete, move and edit be moved to the beginning of the line? There's a lot of space between line title and these actions.

It would need a lot of refactoring, the caret and its title are quite stronly linked now. Putting active elements in the middle is not possible without quite a few fixes. Since it's also a change compared to the old UI, I propose to open a ticket and handle this improvement in another PR later down the line. Is that okay with you? (I'll open the ticket when/if I get your confirmation)

The edit icon seems to be bigger than the others.

It seems to be a quirk of FontAwesome icons, nothing much I can do here except add extra style just to counterbalance this difference in size perceived.
With a trash icon it's way better AFAICS:

tkrieck · 2024-07-12T15:52:32Z

I propose to open a ticket and handle this improvement in another PR later down the line. Is that okay with you? (I'll open the ticket when/if I get your confirmation)

Yes, that's perfect! 👍

With a trash icon it's way better AFAICS:
Yes, definitely.

Sereza7 · 2024-07-16T10:37:43Z

Created https://jira.xwiki.org/browse/XWIKI-22333 👍

Sereza7 · 2024-09-11T14:27:45Z

Testing session:
First, we built the changes successfully with mvn clean install -f xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources and mvn clean install -f xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/ -Pquality,docker .

Looked for xclass-title and toggle-collapsable, no result outside of .vm, .css and dataeditors.js
Looked at the page obejcts ObjectEditPaqge.java and ClassEditPage.java. Those look too high level to handle the togglers. Togglers are about the objects/properties inside of those pages
Looked at the BaseElements ObjectEditPane.java
- xobject_%s_%s_content should not be impacted by our changes
- xobject_%s_%s_title has its content changed, but it does not seem like it's breaking any selector or how we use the object
- In order to make sure, I looked for a test that used displayObject from ObjectEditPane. SkinxTest fit the bill. mvn clean install -f xwiki-platform-distribution/xwiki-platform-distribution-flavor/xwiki-platform-distribution-flavor-test/xwiki-platform-distribution-flavor-test-ui/ -Pchrome ran without issue
- Similar selector used in ClassPropertyEditPane expand(). Following this function usage, I tested it with addProperty from the EditClassIT tests. mvn clean install -f xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-test/xwiki-platform-flamingo-skin-test-docker passed successfully.

surli · 2024-09-12T13:14:38Z

Similar selector used in ClassPropertyEditPane expand(). Following this function usage, I tested it with addProperty from the EditClassIT tests. mvn clean install -f xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-test/xwiki-platform-flamingo-skin-test-docker passed successfully.

Frankly for such changes I'd run entirely ObjectEditorIT

surli · 2024-09-12T13:15:51Z

...lamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/editclass.vm

-      <h2>
-        $!escapetool.xml($doc.displayView($field.xWikiClass.get('prettyName'), "${field.name}_" , $field))
-        ($doc.displayView($field.xWikiClass.get('name'), "${field.name}_" , $field):
+      <h3>


Was a mistake before to use h2?

I added additional structure to the page with a H2 :
https://github.com/xwiki/xwiki-platform/pull/3254/files#diff-6188397dc36b434aca69e83161e131eb37f552008a22b918a6b8bd1bc925b22eR183-R189

This is clearly a subcategory of the propertylist, so I think a H3 here would be appropriate.

surli · 2024-09-12T13:17:38Z

...amingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/editobject.vm

    </h3>
+    <a href="$doc.getURL('objectremove', "form_token=$!{services.csrf.getToken()}&amp;classname=${escapetool.url($class.name)}&amp;classid=${obj.number}&amp;xredirect=${escapetool.url($doc.getURL('edit', 'editor=object'))}")" class="xobject-action delete" title="$services.localization.render('core.editors.object.removeObject.tooltip')">$services.icon.renderHTML('trash')</a>


missing escaping on the title no?

surli · 2024-09-12T13:19:54Z

...latform-web/xwiki-platform-web-war/src/main/webapp/resources/js/xwiki/editors/dataeditors.js

      item.makePositioned();
      item.appendChild(movebutton);
      movebutton.observe('click', function(event) {
        event.stop();
      }.bindAsEventListener());
+      // Extend the Sortable items with arrow keys support
+      movebutton.observe('keydown', function(event){
+        if (![38, 40].includes(event.keyCode)) { return; }


Worth a comment to indicate what 38/40 are (Up/Down I guess?)

surli · 2024-09-12T13:21:06Z

...latform-web/xwiki-platform-web-war/src/main/webapp/resources/js/xwiki/editors/dataeditors.js

      item.makePositioned();
      item.appendChild(movebutton);
      movebutton.observe('click', function(event) {
        event.stop();
      }.bindAsEventListener());
+      // Extend the Sortable items with arrow keys support
+      movebutton.observe('keydown', function(event){


I'd externalize the whole function to simplify future refactoring. And possibly for testing too...

surli · 2024-09-12T13:21:48Z

...latform-web/xwiki-platform-web-war/src/main/webapp/resources/js/xwiki/editors/dataeditors.js

+        var item = event.target.parentElement.parentElement.parentElement;
+        /* We need to recompute the name of the entry similarly to what's done in scriptaculous
+          to make sure it matches the one we get in the sequence. */
+        let format = /^[^_\-](?:[A-Za-z0-9\-\_]*)[_](.*)$/;


Where did you get this regex from?

Sereza7 added 2 commits July 3, 2024 17:50

XWIKI-22280: Object editor dropdowns are not keyboard accessible

ce80b17

* Replaced the cross with a trash icon for the delete actions.

Sereza7 added 2 commits July 17, 2024 13:26

Merge branch 'xwiki:master' into XWIKI-22280

86b1ba7

Merge branch 'xwiki:master' into XWIKI-22280

bc27057

Sereza7 marked this pull request as ready for review September 11, 2024 14:28

surli reviewed Sep 12, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

XWIKI-22280: Object editor dropdowns are not keyboard accessible #3254

XWIKI-22280: Object editor dropdowns are not keyboard accessible #3254

Sereza7 commented Jul 5, 2024 •

edited

Loading

tkrieck commented Jul 9, 2024

Sereza7 commented Jul 12, 2024

tkrieck commented Jul 12, 2024

Sereza7 commented Jul 16, 2024

Sereza7 commented Sep 11, 2024

surli commented Sep 12, 2024

surli Sep 12, 2024

Sereza7 Sep 13, 2024

surli Sep 12, 2024

surli Sep 12, 2024

surli Sep 12, 2024

surli Sep 12, 2024

		</h3>
		<a href="$doc.getURL('objectremove', "form_token=$!{services.csrf.getToken()}&classname=${escapetool.url($class.name)}&classid=${obj.number}&xredirect=${escapetool.url($doc.getURL('edit', 'editor=object'))}")" class="xobject-action delete" title="$services.localization.render('core.editors.object.removeObject.tooltip')">$services.icon.renderHTML('trash')</a>

XWIKI-22280: Object editor dropdowns are not keyboard accessible #3254

Are you sure you want to change the base?

XWIKI-22280: Object editor dropdowns are not keyboard accessible #3254

Conversation

Sereza7 commented Jul 5, 2024 • edited Loading

Jira URL

Changes

Description

Clarifications

Screenshots & Video

Executed Tests

Expected merging strategy

tkrieck commented Jul 9, 2024

Sereza7 commented Jul 12, 2024

tkrieck commented Jul 12, 2024

Sereza7 commented Jul 16, 2024

Sereza7 commented Sep 11, 2024

surli commented Sep 12, 2024

surli Sep 12, 2024

Choose a reason for hiding this comment

Sereza7 Sep 13, 2024

Choose a reason for hiding this comment

surli Sep 12, 2024

Choose a reason for hiding this comment

surli Sep 12, 2024

Choose a reason for hiding this comment

surli Sep 12, 2024

Choose a reason for hiding this comment

surli Sep 12, 2024

Choose a reason for hiding this comment

Sereza7 commented Jul 5, 2024 •

edited

Loading