docs: add accessibility docs to Seat component

docs/src/documentation/03-components/08-visuals/seat/03-accessibility.mdx

@@ -0,0 +1,60 @@
+---
+title: Accessibility
+redirect_from:
+  - /components/seat/accessibility/
+---
+
+# Accessibility
+
+## Seat
+
+The Seat component has been designed with accessibility in mind.
+
+It can be used with keyboard navigation, and it includes the following properties that allow to improve the experience for users of assistive technologies:
+
+| Name            | Type     | Description                                                                                                                 |
+| :-------------- | :------- | :-------------------------------------------------------------------------------------------------------------------------- |
+| aria-labelledby | `string` | Id(s) of elements that announce the component to screen readers.                                                            |
+| title           | `string` | Adds the `title` attribute to the rendered SVG element. Announced by screen readers after the `aria-labelledby` element(s). |
+| description     | `string` | Adds the `description` attribute to the rendered SVG element. Announced by screen readers after the `title` value.          |
+
+All the props above are optional, but recommended to use to ensure the best experience for all users.
+
+The `aria-labelledby` prop can reference multiple ids, separated by a space.
+The elements with those ids can be hidden, so that their text is only announced by screen readers.
+
+The `title` and `description` props are used to provide additional context to the rendered SVG element that visually represents the seat.
+They are also announced by screen readers.
+
+The conjugation of these properties allows to provide a detailed description of the seat to users of assistive technologies.
+
+For example, the following code snippet shows how to use these properties:
+
+```jsx
+<p id="l1" style={{ display: "none", visibility: "hidden" }}>
+  For passenger John Doe
+</p>
+<Seat
+  aria-labelledby="l1"
+  title="Seat 1A"
+  description="Extra legroom"
+  label="25€"
+/>
+```
+
+It would have the screen reader announce: "For passenger John Doe. Seat 1A. Extra legroom.".
+
+Note that the `label` prop is **not** announced by screen readers, as it is intended for visual representation only.
+So be sure to include all relevant information on the three properties that are announced by screen readers.
+
+Alternatively, the paragraph element with the id `l1` is visually hidden, so that its text is only read by screen readers but not present on the screen.
+
+It is also recommended to have those strings translated and change dynamically based on the state of the user journey (eg: if the seat is selected and the user is about to deselect it, the screen reader should announce it).
+
+## SeatLegend
+
+The SeatLegend component is not interactive. However, it accepts the `aria-label` prop, that is passed to the rendered SVG element.
+
+It allows for screen readers to provide a meaningful description of the seat type, which can be useful for users of assistive technologies.
+
+The `label` prop is also announced by screen readers.