[MessageBox]: 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

MessageBox

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/modals-popovers-messagebox--default

Steps to Reproduce

1. Open example on Android device in Chrome https://sap.github.io/ui5-webcomponents-react/v2/?path=/story/modals-popovers-messagebox--default
2. Within the browser > 3 dots (More) >Settings > Accessibility > Increase the default zoom till the end (300%)
3. Click on Open Messagebox button
4. 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 text is not readable.

[ilhan007]

Hello @AlekseiSch,

We noticed that you filed 10 + issues in the past year which shows strong interest and usage. Do you mind sharing your organization or product? It’s for our statistics, we wonder if it’s for a known consumer of ours or a new one.

Thank you

BR, ilhan UI5 Web Components Core team

[AlekseiSch]

Hello, @ilhan007, I'm working on Central Communication Center for SAP and we use UI5 components in our applications

[AlekseiSch]

Hello, @Valkanister, @ilhan007 any updates on that?

[Valkanister]

Hello @AlekseiSch,

We are currently in discussion if such small viewports are feasible. I will update you once there are results from 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?

[Valkanister]

Hello @AlekseiSch,

There are still ongoing discussions. The issue is not trivial and a lot has to be taken into account.

Kind regards, Georgi

[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!