TextField issue with diacritics not fully visible

[enortonAtAdobe]

🐛 Bug Report

full diacritics not visible in TextField for some characters depending on the browser

🤔 Expected Behavior

full diacritics should be visible

😯 Current Behavior

💁 Possible Solution

🔦 Context

💻 Code Sample

https://32w4px.csb.app/

🌍 Your Environment

this happens in some browsers but not others - mainly Firefox seems to be the only one to handle correctly

🧢 Your Company/Team

AEP

🕷 Tracking Issue (optional)

[snowystinger]

Looks like this might be font related.

I tried a TextField inside a Provider with the arabic locale, it's closer but the third line under that letter still seems cut off. https://codesandbox.io/s/broken-dust-8fscze?file=/src/App.js

It looks like this happens in native as well https://jsfiddle.net/pbw3L0kv/2/

Will bring up with our design, I tried changing the line-height and padding with partial luck. Changing the line-height rendered all the diacritic in the vertical space, but was still cut off in the horizontal.

[snowystinger]

After a discussion with the team. We've realized that codesandbox is not part of our typekit provisioning, nor possibly is chromatic. As a result, the images we've been dealing with and example apps are not actually correct. We need to use an environment where we actually resolve to the correct font and see if this is still a problem there.

We have another issue, neither our docs site nor localhost appears to be provisioned for the Arabic Adobe font face, so we'll need to add that, and any others, such as Hebrew
--spectrum-font-family-ar: 'adobe-arabic', 'myriad-arabic', var(--spectrum-font-fallbacks-sans); right now arabic is falling back to SF or system font

We also need to verify this against other accent marks that hang below the text baseline, such as the French Ç

[ktabors]

Adobe Arabic is sans-serif and we want a serif font for consistency, so we're using Myriad Arabic. The same for Hebrew. Spectrum CSS has made this change as well.

[snowystinger]

Here is a textfield in an Arabic locale provider with Arabic text, using Myriad Arabic. These screen shots were all generated from https://reactspectrum.blob.core.windows.net/reactspectrum/4a41f3b71c62796056043e36972fa7118f2a0e3e/storybook/index.html?path=/story/textfield--default&providerSwitcher-express=false
Steps:

1. Change locale in top bar
2. inspect dom element for input
3. replace label with text from this ticket
4. paste text from this ticket into field

FireFox - everything handled correctly

Safari - field looks fine, but label arabic diacritic is cut off

Chrome - Arabic diacritic cut off in field