feat: add dynamic font scaling for iOS Picker component

[Kuldeepdev]

Issue number: resolves # 29340

---

What is the current behavior?

Ionic Picker component do not
respond to font scaling on iOS which can create inaccessible
applications particularly for users with low vision for Picker component. 
Ionic apps on
Android devices currently support the Android equivalent due to
functionality in the Chromium webview.
Developers have also requested a way of adjusting the fonts in their
Ionic Picker component consistently.

What is the new behavior?

• Ionic Picker components now use dynamic-font function in scss file. This
means devs can change the font size on html and the text in supported
Ionic Picker components will scale up/down appropriately
• Add support for Dynamic Type on iOS (the iOS version of Dynamic Font
Scaling) for Picker Component.

Does this introduce a breaking change?

• Yes
• [X ] No

Other information

Code Reproduction:
https://github.com/Kuldeepdev/picker-dynamic-font/tree/main

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ionic-framework	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 15, 2024 0:36am

[thetaPC]

Thanks for submitting the PR!

This PR will be closed as we're maintaining alignment with iOS's picker structure, which doesn't include font scaling. However, you can still customize elements within ion-picker to scale along with fonts in your app.

.picker-col .picker-opt,
.picker-col .picker-prefix,
.picker-col .picker-suffix {
  font-size: 1.25rem;
}

.picker-toolbar .picker-button
 .picker-toolbar .picker-button.ion-activated {
  font-size: 0.875rem;
}