Design callout messages: make included links accessible

[isabellechanclou]

Prerequisites

• [X] I have searched for duplicate or closed issues
• [X] I have validated any HTML to avoid common problems
• [X] I have read the contributing guidelines

Describe the issue

Design callout messages often contain links towards the DSM and/or some other Boosted component. Their accessible name (to be vocalized by screen readers) needs to be added/completed to indicate the target of the link, and mainly when a same wording is used for the different targets as it is the case in the Boosted badge component:

A way is to be find to add in the code to add this accessible name. The code is written this way: {{< design-callout-alert >}} This component should not be used because it does not exist in the Orange Design System specifications. Instead, consider using our Boosted [Tags]({{< docsref "/components/tags" >}}). You can also refer to the Tags guidelines on the Orange Design System website. {{< /design-callout-alert >}} Hint to try if compatible with the above syntax : adding some html <span> with a title attribute...

Reduced test cases

NA

What operating system(s) are you seeing the problem on?

Windows, macOS

What browser(s) are you seeing the problem on?

No response

What version of Boosted are you using?

v5.3

[MewenLeHo]

Possible option: since HTML is allowed inside markdown, simply use an HTML a tag for links instead of md links. Then use title or aria-label attributes to make it accessible.