feat(@vtmn/css, @vtmn/react, @vtmn/svelte, @vtmn/vue): Improve `VtmnAlert` component

[ThomasPierreDECATH]

Describe the bug We want to use the Alert component into a page but not sticky. In order to to that we need to import VtmnAlertItem but it is not exported for the moment

This component could be impoved by :

• Replace the <div/> by <dialog/> HTML tag
• tabindex should be exported as a prop in order to allow user to focus on the Alert
• Set an ID on the title and the content
• Set aria-labelledby with title ID on the <dialog/>
• Set aria-describedby with content ID on the <dialog/>
• Allow Alert to be 100% wide on mobile (90% now)

[Tlahey]

I take it Also set 2 slots (like the VtmnAccordion)

• One for the title
• One for the description

[Tlahey]

ping @lauthieb it seems ok for you ? No breaking changes

[lauthieb]

Thanks @ThomasPierreDECATH for your issue & @Tlahey for your answer. @Tlahey I'll let you check directly with @thibault-mahe for confirmation, but if there are no breaking changes, it could be okay yes :)

[Tlahey]

Linked PR https://github.com/Decathlon/vitamin-web/pull/1464

[Tlahey]

For informations

• Replace the <div/> by <dialog/> HTML tag -- > Checked on https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/examples/alertdialog/ the role alert is a div, we keep this synthax.
• tabindex should be exported as a prop in order to allow user to focus on the Alert -- > For a11y a role alert must have a negative tabindex
• Set an ID on the title and the content - -- > Not necessary, the role alert don't have an aria-labelledby / describedby
• Set aria-labelledby with title ID on the
  -- > Same above
• Set aria-describedby with content ID on the
  -- > Same above
• Allow Alert to be 100% wide on mobile (90% now) -- > Must be specific to the application that uses it

[Tlahey]

We can close this issue