Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

XWIKI-22581: FocusCatcher input has no label #3577

Open
wants to merge 4 commits into
base: master
Choose a base branch
from

Conversation

Sereza7
Copy link
Contributor

@Sereza7 Sereza7 commented Oct 18, 2024

Jira URL

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

Changes

Description

  • Replaced the FocusCatcher artificial input.
  • Updated the style of the gallery to use css grid instead of hackish solutions all around.
  • Improved accessibility by changing the div interactive controllers with buttons.
  • Improved consistency of the UI by adding standard round corners to the component.

Clarifications

  • The solution picked had to go around a layout issue with the picture overflowing off the grid when wrapped and in full screen See the comment for more details on this issue.

Screenshots & Video

Video demo:

2024-10-18.13-54-58.mp4

The gallery controls are tested both with the mouse and the keyboard.

Before:
image
After:
image

I tried to keep the visuals as close as possible as what was here before. The only differences I can spot are:

  • Round corners
  • Slightly more space between the side of the component and the previous/next buttons. This happens because of the default padding that was added when transforming this element in a button. IMO this change is not a problem.

Executed Tests

Manual tests: see above + tests with different screen sizes.
Built changes with mvn clean install -f xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war -Pquality and tested mvn clean install -f xwiki-platform-core/xwiki-platform-office/xwiki-platform-office-test/xwiki-platform-office-test-docker -Pdocker -Dxwiki.test.ui.wcag=true. The WCAG violations reported did not highlight any issue with the gallery anymore.

Expected merging strategy

  • Prefers squash: Yes
  • Backport on branches:
    • None

* Replaced the FocusCatcher artificial input with a semantically better span.
* Updated the style of the gallery to use css grid instead of hackish solutions all around.
* Improved accessibility by changing the div interactive controllers with buttons.

TODO: Check further the half screen large picture maximized gallery behavior bug and find a fix for it.
* Fixed the full screen display vertical overflow issue.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant