Add/alert role to notifications and ScreenReaderText

[djalmaaraujo]

Description

• New proposal for Notification.

We are adding the role="alert" to the Notification component when it appears. It will not focus on the element.

• Adding ScreenReaderText component for easy screen-reader-text class access

Checklist

• This PR has good automated test coverage
• The storybook for the component has been updated

Steps to Test

1. Pull down PR.
2. npm run dev.
3. Activate voice over (cmd+fn+f5 on macOS)
4. Open http://localhost:6006/?path=/story/notification--default
5. You should listen: Alert, Awesome! Your message has been sent successfully.

[netlify]

✅ Deploy Preview for vip-design-system-components ready!

Name	Link
🔨 Latest commit	5af1581
🔍 Latest deploy log	https://app.netlify.com/sites/vip-design-system-components/deploys/62bcbbabfe493c00088b8eaa
😎 Deploy Preview	https://deploy-preview-70--vip-design-system-components.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.

[brunobasto]

Tested and sounds good to me. Thank you for improving this!

Only minor comment would be about the translation of the word Alert, but we can think about that in the future.

🚢

[djalmaaraujo]

Tested and sounds good to me. Thank you for improving this!

Only minor comment would be about the translation of the word Alert, but we can think about that in the future.

🚢

Good point. We are not using any internalization here.