[ShellBar]: A11y 300% zoom level support

[AlekseiSch]

Bug Description

On applying zoom settings all the UIs are overlapped and not visible completely within the visible area and component becomes not usable to the user.

Affected Component

ShellBar

Expected Behaviour

On applying zoom settings, all UI elements need to be fully recognizable and operable to the user

Isolated Example

https://sap.github.io/ui5-webcomponents-react/v2/?path=/story/layouts-floorplans-shellbar--default

Steps to Reproduce

1. Open example on Android device in Chrome https://sap.github.io/ui5-webcomponents-react/v2/?path=/story/layouts-floorplans-shellbar--default
2. Within the browser > 3 dots (More) >Settings > Accessibility > Increase the default zoom till the end (300%)
3. Observe that component becomes not usable to the user

Log Output, Stack Trace or Screenshots

Priority

None

UI5 Web Components Version

2.11.0

Browser

Chrome

Operating System

Android

Additional Context

No response

Organization

No response

Declaration

• [x] I’m not disclosing any internal or sensitive information.

[Valkanister]

Dear @AlekseiSch,

There is no WCAG success criterion that requires zoom to such high levels. The proper way to test reflow is to resize the screen/viewport to 320 px. Also in the sample you mentioned - you need to open the sample alone in a new window- without the menus on the left and right. Then resize to 320 px via Chrome dev tools. In that case you can see that there are no overlaps.

Kind regards, 

Georgi SAP Development Support

[AlekseiSch]

Hello, @Valkanister. There is a requirement to support al least 200% zoom level: https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html

Success Criterion (SC) Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.

You can see the screenshots from mobile android device: On the first screen zoom is set to 100% and the are no menus on the left and right, and on the second screen zoom is set to 200% and ShellBar doesn't fit to the screen width, avatar is outside the ShellBar.

[AlekseiSch]

Hello, @Valkanister , any updates on that?

[github-actions[bot]]

Hello, everyone! The issue has been inactive for 21 days. If there are still questions or comments, please feel free to continue the discussion. Inactive issues will be closed after 7 days!

[AlekseiSch]

Hello @Valkanister Are there any updates or decisions about whether small viewports are feasible?

[kgogov]

Hello @AlekseiSch,

Thank you for reporting this issue.

As @Valkanister already pointed out, you should test the zoom level support by opening the example in a standalone format, rather than within the documentation sample page, where the examples are loaded in an isolated iframe.

Please open the following page and test again: 🔗 https://sap.github.io/ui5-webcomponents/nightly/packages/fiori/test/pages/ShellBar_evolution.html

From my observations, the ShellBar component behaves correctly on both desktop and mobile screen resolutions, even with zoom levels applied. You can refer to the attached screenshots for comparison.

It seems the confusion may have come from the way the component was initially tested.

👉 When you retest, could you please let us know if you still experience the issue? We’re here to help if you have any further questions.

Best regards, Konstantin

[AlekseiSch]

Hi, @kgogov

Thanks for your answer. I've retested it on an Android device, and the link provided is even less functional than the one in the documentation. Many buttons are not available, and the side navigation panel is unreadable.

[kgogov]

Hello @AlekseiSch,

After consulting with colleagues, it turns out that internal discussions regarding the reported incident are still ongoing. We will provide more information as soon as there is more clarity on the matter.

A related issue can be found here: 🔗 https://github.com/SAP/ui5-webcomponents/issues/11715

We remain available in case you have any further questions.

Best regards, Konstantin

[Valkanister]

Hello @AlekseiSch,

Thanks for the feedback. We will follow up with you internally as the scope of these issues is too big to have a resolution just in Github.

Kind regrds, Georgi

[github-actions[bot]]

This issue has been closed. To reopen, just leave a comment!