search

carbon-design-system / carbon-for-ibm-dotcom

Carbon for IBM.com is based on the Carbon Design System for IBM
https://www.ibm.com/standards/carbon/
Apache License 2.0
268 stars 156 forks source link

[Footer] React & Web component - On Mobile, Footer (local modal) is zoomed in for the user - no DDS consultant #7202

Closed Praveen-sr closed 2 years ago

Praveen-sr commented 3 years ago

Engineering info:

Description

Issue: On Mobile, Footer (local modal) is zoomed in for the user. Once the modal is closed, user has to zoom out manually.

Component(s) impacted

Footer_new

Browser

Safari

Carbon for IBM.com version

1.25

Business priority

Medium Priority = upcoming release but is not pressing

Application/website

Carbon for IBM

Package

@carbon/ibmdotcom-react, @carbon/ibmdotcom-web-components

CodeSandbox example

ex

Steps to reproduce the issue (if applicable)

No response

Release date (if applicable)

No response

Code of Conduct

andy-blum commented 2 years ago

Preliminary research reveals that this is coming from default behavior on iOS devices. When a form element receives focus, if its font size is less than 16px, the browser will zoom into the element to increase visibility. Two taps or a manual "pinch" motion should return users to the default zoom level.

There are old stackoverflow posts and github issues that mention manipulating the <meta name="viewport"> tag to eliminate zoom-ability altogether, but that would a significant detriment to the site's accessibility, and it sounds like iOS doesn't respect those attributes anymore anyway. The best (and perhaps only) way to fix this is to increase the font size used in the text input.

We could increase the font size here, but I'm not sure if that's preferable to simply letting iOS devices do their thing.

Thoughts, @shixiedesign, @oliviaflory, @photodow?

shixiedesign commented 2 years ago

Discussing with the team on what's the best solution here. Either leave as is, or increase font size to 16. For the second approach, let us take a quick pass in Sketch to see how it will look.

proeung commented 2 years ago

@shixiedesign Thanks for the response! Since we're blocked on which direction to move forward with, I'm going to move this issue to the "Blocked" pipeline and take it out from our current sprint 22. We'll it back once we have a solution from the design team.

shixiedesign commented 2 years ago

Hey @proeung @andy-blum I investigated this one a bit. So previously the type sizes are 16 through expressive theme. After expressive theme is removed, search type size reverted to 14px. This is meant to be temporary. We've done a re-design of the Locale model all together — not huge changes, just to clean up type sizes & use card group as a dependency — and the dev issue is currently scheduled for sprint 23, under Epic [Locale selector] Design clean up to address inconsistencies #6395

Here's the design spec: https://ibm.box.com/s/vd05uonyedsuk6xft0bkly2d1ip9ahs9

image

So, with that in mind, I wonder if it makes sense to close this issue and instead work on the Epic 6395 for sprint 22? FYI @jeffchew @RobertaJHahn

proeung commented 2 years ago

@shixiedesign I think that makes sense. @RobertaJHahn I'm going to remove this issue from our HC dev queue and we can review this epic (https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6395) when it's ready for scheduling and dev assignee.

RobertaJHahn commented 2 years ago

I have linked this bug to the epic #6395 for easy reference as this bug fix is now included in the scope of that epic.

The summary of the work has also been copied into the dev issue #7582.

Closing this issue.