feat(core): adopt breaking changes for Object Number

[MariaIDineva]

Related Issue(s)

Part of #13490

Description

Adopts breaking changes coming from Fundamental Styles for ObjectNumber:

• Adds a screen reader text for the different states/statuses - 'negative' | 'critical' | 'positive' | 'informative':

<fd-object-number unit="EUR" status="negative" class="fd-object-number fd-object-number--negative fd-object-number--interactive" tabindex="0" role="button">
  <span class="fd-object-number__text> -2,000.00</span>
  <span class="fd-object-number__unit">EUR</span>
  <span class="fd-object-number__sr-only ng-star-inserted">Value State Error</span>
</fd-object-number>

• Adds a new statusMessage input which the user can use to override the default screen reader text for the status.

• Adds a screen reader text when the Object Number is emphasized:

<fd-object-number unit="EUR" status="negative" class="fd-object-number fd-object-number--negative>
  <span class="fd-object-number__text fd-object-number__text--bold"> -2,000.00</span>
  <span class="fd-object-number__unit">EUR</span>
  <span class="fd-object-number__sr-only ng-star-inserted">Emphasized</span>
</fd-object-number>

• Adds two new states to Object Number - interactive and inverted which can also be combined. Updates the examples to display those.
• Adds role="button" and tabindex=0 to interactive object numbers.
• Transforms all Object Number inputs to signals.
• Allows FdTranslatePipe to accept null in which case it returns the default value, i.e. an empty string.

Screenshots

[netlify]

✅ Deploy Preview for fundamental-ngx ready!

Name	Link
🔨 Latest commit	ca6dfa3
🔍 Latest deploy log	https://app.netlify.com/projects/fundamental-ngx/deploys/68ef90eaacd554000834efb1
😎 Deploy Preview	https://deploy-preview-13529--fundamental-ngx.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[mikerodonnell89]

Honestly I don't know how to control this, and need to do some research. But I noticed when using Voiceover and control+option+arrow keys, when the sr-only element is focused, the border appears in the wrong place. Gives the appearance of highlighting the incorrect object status

[MariaIDineva]

Honestly I don't know how to control this, and need to do some research. But I noticed when using Voiceover and control+option+arrow keys, when the sr-only element is focused, the border appears in the wrong place. Gives the appearance of highlighting the incorrect object status

That's an interesting finding, I'll dig into it.

[MariaIDineva]

So I played with the issue a bit:

• I tried it with JAWS on Chrome, using insert + arrows to navigate. In JAWS it does not give any focus to the elements and reads them altogether:

-2,000.00  EURValue State Error0.00  EURValue State Warning1,000.37  EURValue State Success100.88  EURValue State Information999.00  EUR

• I tried it with Voiceover on Safari. The behaviour is similar to the one that JAWS has on Chrome. It focuses the whole group of numbers and reads them all through, without allowing one-by-one navigation:

• I also tried Voiceover on Edge, it works the same was as on Chrome.

• Back to Voiceover on Chrome:

  • I also tried updating the styles of the screen reader element with what we have in SAPUI5:

.fd-object-number__sr-only {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    user-select: none;
    left: 0;
    top: 0;
    font-size: 0;
}

But in this case focusing on the sr-element moves the visual focus to the page-content div.

• Another thing that I tried was adding left: 0; right: 0. Then the visual focus seems to be on correct element, but only if its width macthes the width of the sr-element (which depend on the particular text inside and it varies):

[InnaAtanasova]

I noticed when using Voiceover and control+option+arrow keys, when the sr-only element is focused, the border appears in the wrong place. Gives the appearance of highlighting the incorrect object status

Can you try the following options:

1. Completely hide the sr-only element when the SR visually highlights it.

.fd-object-number__sr-only:focus {
  display: none;
}

2. Change a bit the CSS. Try with clip-path.

.fd-object-number__sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  clip-path: inset(50%);
}

3. Your last option would be to make the sr-only element a sibling, not a child of the Object Status that gets the SR focus and link it via aria-labelledby or aria-describedby. The resulting markup should look like:

<span 
  class="fd-object-number fd-object-number--negative" 
  aria-describedby="object-status-desc">
    <span class="fd-object-number__text fd-object-number__text--bold">-2,000.00</span>
    <span class="fd-object-number__unit">EUR</span>
</span>
<span id="object-status-desc" class="fd-object-number__sr-only">
    Emphasized, Value State Error
</span>

This would require setting a default ID for the span with the status message so that you can link it.

[MariaIDineva]

Since none of the implementations discussed managed to fix the focus on the screen reader element when using Voiceover on Chrome, but the issue is not reproducible with JAWS, we are leaving the styles as they are.