XWIKI-22485: Livedata option dropdown has no grouping semantics #3662
Conversation
* Updated the structure of the LiveData dropdown (namely, removed separator <li>s and grouped links together) * Updated bootstrap dropdown styles to account for this new kind of separator in dropdowns. * Updated the tests to work on this updated architecture
| @@ -47,7 +47,7 @@ | |||
| <ul class="dropdown-menu dropdown-menu-right"> | |||
|
|
|||
| <!-- Actions --> | |||
| <li class="dropdown-header">{{ $t('livedata.dropdownMenu.actions') }}</li> | |||
| <li><span class="dropdown-header">{{ $t('livedata.dropdownMenu.actions') }}</span><ul> | |||
There was a problem hiding this comment.
WDYT of indenting the new ul block?
There was a problem hiding this comment.
Done in 53d85de 👍
I indented only once for the <li><ul> blocks though.
In order to avoid making code review more difficult for barely any reason, I try to not add indentation at first on code blocks where it looks okayish without it.
There was a problem hiding this comment.
Go ahead with the right formatting.
| <li role="separator" class="divider"></li> | ||
|
|
||
| <li class="dropdown-header">{{ $t('livedata.dropdownMenu.layouts') }}</li> | ||
| <li><span class="dropdown-header">{{ $t('livedata.dropdownMenu.layouts') }}</span><ul> |
There was a problem hiding this comment.
Same question as https://github.com/xwiki/xwiki-platform/pull/3662/files#r1853982643 here too
There was a problem hiding this comment.
Done in 53d85de 👍
Note that I updated all three uls
I'll add this paragraph directly as a comment on the ticket too for reference sake. For the sake of users of assistive tools, and overall accessibility of XWiki, you want to make sure the semantics you convey through your HTML are roughly the same as the semantics you convey through your style. This is adaptability. This PR makes sure we represent those subcategories in the HTML structure. Additionally, it removes the "I am one item of the list" semantics from the separator, because a separator is not an item anyone would name when asked to list the elements of this dropdown (meaning it has no semantics and should be showed using non semantic elements/ no element style only). Before AT would approx read: |
* Improved indentation in the dropdown menu template
| {{ panel.name }} | ||
| </a> | ||
| </li> | ||
| <li><span class="dropdown-header">{{ $t('livedata.dropdownMenu.panels') }}</span><ul> |
There was a problem hiding this comment.
that part could be indented as well.
Jira URL
https://jira.xwiki.org/browse/XWIKI-22485
Changes
Description
Clarifications
Screenshots & Video
On the left is the dropdown before the changes in this PR, and on the right is the same dropdown after the changes in this PR. We can see that the styles are pretty much the same. This was the goal of this PR: improve the HTML architecture of the dropdown without regressing on the style.
Executed Tests
Successfully built the livedata webjar with the quality profile:
mvn clean install -f xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-test/xwiki-platform-livedata-test-docker/.Successfully passed livedata docker tests:
mvn clean install -f xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-test/xwiki-platform-livedata-test-docker/.Manual tests on a local instance to check for style with Firefox (see screenshot above).
Sonarlint analysis on the updated files did not point out any recent quality regressions.
Expected merging strategy