[HSDS-269 HSDS-265 HSDS-268 HSDS-270] Various fixes

[tinkertrain]

Table focus state is missing left blue shadow in Safari

https://helpscout.atlassian.net/browse/HSDS-269

Problem

Turns out some browsers (safari 😒) don't like to apply box-shadow to elements with a display property value other than block or inline-block. Since <tr> are display: table-row, the focus indicator was not shown.

Solution

Instead of using an inset box shadow, we use a css gradient to achieve the same effect, this also fixes the little imperfection on the focus indicators (as shown on the ticket).

Input char validator badge is not hiding when reached limit and then cleared text

https://helpscout.atlassian.net/browse/HSDS-265

Problem

The character validation state was incorrect in some instances, and the use of Animate was also causing some issues which caused some visual glitches on updateing the badge.

Solution

We fix the state and remove the use of animations for the badge as their visual effect is negligible. Also updated with better tests for this feature.

Nested SimpleModal instance not compatible with voice over (Safari)

https://helpscout.atlassian.net/browse/HSDS-268

Problem

For some reason, safari wasn't updating the context when opening a modal on top of another modal using VoiceOver.

Solution

Use aria-hidden to hide elements from the voice reader.

📹 https://i.hlp.sc/lbJRc0

EditableField: validation icon is misaligned

https://helpscout.atlassian.net/browse/HSDS-270

Problem

The validation icon is misaligned when the value of the input is larger than the width of the field

Solution

We add some padding when the icon is present.

Other

We update the babel and storybook's webpack configuration to allow transpiling of @hsds modules (HSDS 4) for testing purposes, also we update react to the minimum version that permits the automatic runtime and make that change on babel too.

[cloudflare-pages[bot]]

Deploying with    Cloudflare Pages

Latest commit:	f38c89e
Status:	✅  Deploy successful!
Preview URL:	https://b43698ad.hsds-react.pages.dev
Branch Preview URL:	https://bug-fixes-001.hsds-react.pages.dev

View logs

[tinkertrain]

@knicklabs I know... I have no idea why, there's nothing "special" about the SimpleModal, the focus is transferred to the 2nd modal even on safari, just not with VoiceOver for some reason 😕 I do hope we don't use nested modals often, they don't feel like a great UX imo.

@jakubjanczyk Good find! I simplified the logic, I removed a check which honestly don't know what it was for and things now work in all circumstances (I think), added an extra test for good measure.