Wagtailuserbar. Warning window position

[Andrei Satsevich]

There are problems with the positioning of the wagtailuserbar. The warning window is statically bound to one place. If when positioning right top or right bottom it can still be used, then when positioning userbar on the left side of the screen the warning appears in the middle of the screen on the right edge looks strange.

Steps to Reproduce

1. Start a bakerydemo project with docker-compose
2. Edit base.html: change {% wagtailuserbar %} to {% wagtailuserbar 'bottom-left' %}

• I have confirmed that this issue can be reproduced as described on a fresh Wagtail project: yes (6.0rc1)

[Pankaj K Borade]

Hey @ACK1D , I am trying to recreate this issue, but I am getting the Wagtail demo page instead of the bakerydemo. I followed all the steps for wagtail_bakery. Can you tell me where I am missing something or some documentation to refer? Your answer on this matter would be appreciated.

[Andrei Satsevich]

@BkPankaj step by step:

1. Copy repo https://github.com/wagtail/bakerydemo
2. Open project folder
3. Open base.html change {% wagtailuserbar %} to {% wagtailuserbar 'bottom-left' %}
4. In terminal run: docker compose up --build -d
5. If you have docker desktop, run in app-1 tab exec: python manage.py migrate if haven't, in project terminal: docker exec bakerydemo-app-1 python manage.py migrate
6. If you have docker desktop, run in app-1 tab exec: python manage.py load_initial_data if haven't, in project terminal: docker exec bakerydemo-app-1 python manage.py load_initial_data
7. Open in browser http://127.0.0.1:8000/admin login: admin password: changeme
8. Open in browser http://127.0.0.1:8000/
9. Done

[Pankaj K Borade]

@ACK1D Thank you for replying quickly.
I was able to recreate the issue after following all the steps you mentioned above.

If I'm not mistaken, your issue is related to the warning box appearing in the right and middle of the screen instead of being positioned according to the wagtailuserbar at the left top and left bottom. Am I correct?

[ProCoderVP]

May I work on this issue?

[Matt Westcott]

@noobCoderVP Yes, anyone is free to work on any issue, no need to ask.

[Anees Asghar]

Hi, I would like to work on this issue.

Is there a simple way to trigger a warning in the bakery demo project?

[sag​e]

@anees-asghar if you go to http://localhost:8000/breads you should be able to see one error about skipping heading levels.

[Anees Asghar]

@laymonage Although that warning does not appear for me in the "breads" endpoint, I realised I can open the warning box manually from the user bar, which is what I wanted. Thank you for the help.

I was able to reproduce the issue following @ACK1D's instructions.

[Anees Asghar]

Hello, just to update on the progress and on my approach to fixing the issue.

The wagtailuserbar tag supports a parameter position (valid values for which are top-right, top-left, bottom-right and bottom-left). Based on the value of this parameter, I pass a parameter dialog_position ("left" or "right") when instantiating AccessbilityItem. The AccessbilityItem then uses this to render the accessibility dialog on the left or right edge of the screen.

I ran into a hurdle because AccessbilityItem class can be overridden by wagtail users (bakerydemo does this) and users can replace the AccessbilityItem in the user bar by their custom version, which doesn't have access to the dialog_position received from the user bar.

My solution to this is for AccessbilityItem class to have a static attribute that stores the position of the dialog and allowing instantiation of AccessbilityItem (and subclasses) with or without dialog_position. If dialog_position is provided when instantiating, the static class attribute is modified with the new value.

This ensures that the accessibility dialog follows the position of the user bar, as well as allows users to instantiate their custom overridden accessibility item like they would normally.

I was able to implement this solution locally and I get the expected behaviour. All tests still pass. I am working on tests to complement this fix.

Any input is appreciated :)