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 #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