Proposal: remove the drawer dependency

Development
#1

Hello!

In the context of XWIKI-18007: Drawer menu improvements for accessibility, I had to question the legitimity of relying on an external library to handle the drawer. As we needed a lot of changes done and the bootstrap 3 drawer library we were relying on didn’t get any updates in 4 years, I thought it would be easier to remove the dependency and implement its behaviour back in a few lines in a new PR. Note that this PR also implements extended accessibility for the drawer and has a delta (+) of only 160 lines.

I think the drawer library is not useful anymore because modern CSS support makes it trivial to style one ourselves. The most difficult part of a drawer is to handle how the user can interact with it. Keyboard navigation (which represents a fair part of the ways an user can interact with an element) and accessibility were barely accounted in the library.
In bootstrap 5, the offcanvas component holds this role.

The changes are proposed in this PR.
What do you think of this change? Do you agree with the proposal to remove the dependency to bootstrap drawer?

Have a good day!
Lucas C.

What's new UI Proposal & HTML, CSS code
#2

Thanks for the proposal @CharpentierLucas

Haven’t read the proposal closely yet, but I remember we search for an alternative drawer component some time ago because we needed to be able to open several drawers on the same page (the current one, plus another one for displaying What’s new entries iirc).
Is is something you plan to support and/or could support with the code proposed in your PR?

#3

It’s not that complicated to extend the code proposed in my PR to make it support multiple drawers. :slight_smile: I didn’t make it generic yet as this is not needed in the context of the PR. Should I spend some time on making it generic right now so it’ll be straightforward to implement another drawer later?

#4

Would be nice as I need that to move the What’s New feature properly to use a drawer (which I think is a better UI) :slight_smile:

1 Like
#5

Okay, I set the PR as a draft and I’ll be spending time on improving it soon :slight_smile:

#6

So, +1 on my side to remove the dependency to the current drawer external dependency and to define our own instead.
While I’m usually not a fan of rebuilding thing ourselves:

  • this is indeed supposed to be a small and easy feature
  • earlier review of existing alternatives showed that there is not much available (especially if we take into account additional requirements such as multi drawers as mentioned above).
1 Like
#7

I definitely vote for a change. The current drawer didn’t pass the BITV (german wcag) in many points, so we decided to omit the drawer completely and put the needed buttons onto the upper topmenu (with javascript) and some needed links onto the lower topmenu.

#8

Same as Manuel, so +1. Thanks!

#9

+1, thank you!

#10

I have updated the PR for XWIKI-18007: Drawer menu improvements for accessibility to make it generic and allow features to use their own drawers. :slight_smile: