♿️(modal) improve Modal accessibility

[Ovgodd]

Purpose

Improve Modal accessibility for screen readers and keyboard users:

• Name the dialog from its visible title, and describe it from its subtitle.
• Make the tab variant behave as tabs: one tab stop, arrow keys, and a named panel.
• Keep focus inside the dialog on small screens, where one half of the layout is off screen.
• Name the date picker calendar popover.

Share and onboarding stay for later pull requests. The close button name changes from close to Close (Fermer in French).

Proposal

• Use the visible title as an h2 and aria-labelledby. Use aria-label only when there is no visible title. Link the subtitle with aria-describedby.
• Hide title, close, and chevron icons from assistive technologies.
• Drive the tab variant with React Aria: arrows, Home, and End move the focus. Enter or Space selects. The tab list is named by the sidebar title, the panel by its tab, and the tab title is an h3.
• On small screens, mark the off-screen half inert, move focus to the back button when a tab opens, and back to the selected tab when returning.
• Draw the tab focus ring outside the item so it is no longer clipped.
• Translate the close and back buttons. Name the date picker calendar popover.
• Cover dialog name, keyboard, focus ring, and small-screen focus in unit and component tests. Update the share tests that query the close button by name.