feat(styles): update Message Strip to latest Horizon design [ci visual]

[InnaAtanasova]

Related Issue

Closes #4383

Description

• added custom icon
• added custom colors (accent colors)
• text with Link option
• a11y improvements: aria-role is changed, added aria-live, aria-labelledby, etc.

BREAKING CHANGE:
Markup change: - the ability to add custom icon required change in the markup. The status icon is no longer added by the modifier class, but is wrapped in a container.

Before:

<div class="fd-message-strip fd-message-strip--information fd-message-strip--dismissible" role="alert">
  <p class="fd-message-strip__text">...</p>
</div>

After:

<div class="fd-message-strip fd-message-strip--information fd-message-strip--dismissible" role="note" aria-live="assertive" id="message-strip-2" aria-labelledby="message-strip-2">
  <div class="fd-message-strip__icon-container" aria-hidden="true">
    <span class="sap-icon sap-icon--message-information" focusable="false" role="presentation" aria-hidden="true"></span>
  </div>
  <p class="fd-message-strip__text">...</p>
</div>

New modifier classes:

• fd-message-strip--link - for when the text has a link (The Link inside Message Strip has additional styling.)
• fd-message-strip--accent-color-*, where * is a number from 1 to 10. - for custom color

A11y

• replaced aria-role="alert" with role="note"
• added aria-live="assertive", id and aria-labelledby

[netlify]

✅ Deploy Preview for fundamental-styles ready!

Name	Link
🔨 Latest commit	9780d88
🔍 Latest deploy log	https://app.netlify.com/sites/fundamental-styles/deploys/642dc4a2b31c74000832f21f
😎 Deploy Preview	https://deploy-preview-4426--fundamental-styles.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 site settings.