fix(review)

louismaximepiton · vprothais · louismaximepiton · commit 6ea9b22d943c · 2025-12-31T10:20:32.000+01:00
Co-authored-by: Vincent Prothais &lt;vincent.prothais@orange.com&gt;
diff --git a/site/data/sidebar-components.yml b/site/data/sidebar-components.yml
@@ -4,7 +4,7 @@
   pages:
     - title: Accordion
       draft: true
-    - title: Alert
+    - title: Alerts
       draft: true
     - title: Back to top
       draft: true
@@ -42,7 +42,7 @@
       draft: true
     - title: Input group
       draft: true
-    - title: Link
+    - title: Links
       category: Navigation
     - title: List group
       draft: true
@@ -100,5 +100,3 @@
       draft: true
     - title: Tooltip
       draft: true
-    - title: Validation
-      category: Control
diff --git a/site/data/sidebar-getting-started.yml b/site/data/sidebar-getting-started.yml
@@ -51,6 +51,7 @@
       draft: true
     - title: Component
       draft: true
+    - title: Form validation
 
 - title: About
   icon: globe2
diff --git a/site/src/assets/examples/cheatsheet/index.astro b/site/src/assets/examples/cheatsheet/index.astro
@@ -308,7 +308,7 @@ export const body_class = 'bg-body-tertiary'
     <article class="my-3" id="overview">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>Overview</h3>
-        <a class="d-flex align-items-center" href={getVersionedDocsPath('/components/validation')}>Documentation</a>
+        <a class="d-flex align-items-center" href={getVersionedDocsPath('/foundation/form-validation')}>Documentation</a>
       </div>
 
       <div>
@@ -366,7 +366,7 @@ export const body_class = 'bg-body-tertiary'
     <article class="my-3" id="disabled-forms">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>Disabled forms</h3>
-        <a class="d-flex align-items-center" href={getVersionedDocsPath('/components/validation/#disabled-forms')}>Documentation</a>
+        <a class="d-flex align-items-center" href={getVersionedDocsPath('/foundation/form-validation/#disabled-forms')}>Documentation</a>
       </div>
 
       <div>
@@ -422,7 +422,7 @@ export const body_class = 'bg-body-tertiary'
     <article class="my-3" id="sizing">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>Sizing</h3>
-        <a class="d-flex align-items-center" href="#">Documentation</a>
+        <a class="d-flex align-items-center" href={getVersionedDocsPath('/components/text-input/#sizing')}>Documentation</a>
       </div>
 
       <div>
@@ -517,7 +517,7 @@ export const body_class = 'bg-body-tertiary'
     <article class="my-3" id="validation">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>Validation</h3>
-        <a class="d-flex align-items-center" href={getVersionedDocsPath('/components/validation')}>Documentation</a>
+        <a class="d-flex align-items-center" href={getVersionedDocsPath('/foundation/form-validation')}>Documentation</a>
       </div>
 
       <div>
diff --git a/site/src/content/callouts/standalone-form-indicator.md b/site/src/content/callouts/standalone-form-indicator.md
@@ -1 +1 @@
-This standalone version is commonly used for building custom components and should not be used on its own. Remember to provide some sort of accessible name for assistive technologies (for instance, using `aria-labelledby`, a `.visually-hidden`, `aria-label` or a second label). See the [forms validation accessibility]([[docsref:/components/validation#accessibility]]) section for details.
+This standalone version is commonly used for building custom components and should not be used on its own. Remember to provide some sort of accessible name for assistive technologies (for instance, using `aria-labelledby`, a `.visually-hidden`, `aria-label` or a second label). See the [forms validation accessibility]([[docsref:/foundation/form-validation#accessibility]]) section for details.
diff --git a/site/src/content/docs/components.mdx b/site/src/content/docs/components.mdx
@@ -14,8 +14,7 @@ import fs from 'node:fs'
 
 <ul class="list-unstyled row gy-large row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-4 row-cols-2xl-5">
   {
-    getData('sidebar-components')
-      .filter((group) => group.title === 'Components')[0]
+    getData('sidebar-components')[0]
       .pages.map((page) => {
         if (page.category && !page.draft) {
           return (
@@ -57,9 +56,9 @@ import fs from 'node:fs'
   ['Actions', 'Content display', 'Control', 'Data', 'Dialog', 'Indicator', 'Layout', 'Navigation', 'Visual assets'].map((element) => {
     return (
       <>
-        {getData('sidebar-components').filter((group) => group.title === 'Components')[0].pages.filter((page) => page?.category === element).length > 0 && <h3>{element}</h3>}
+        {getData('sidebar-components')[0].pages.filter((page) => page?.category === element).length > 0 && <h3>{element}</h3>}
         <ul class="list-unstyled row gy-large row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-4 row-cols-2xl-5">
-          {getData('sidebar-components').filter((group) => group.title === 'Components')[0].pages.filter((page) => page?.category === element).map((page) => {
+          {getData('sidebar-components')[0].pages.filter((page) => page?.category === element).map((page) => {
             return (
               <li class="col">
                 <div class="card position-relative h-100">
diff --git a/site/src/content/docs/components/alerts.mdx b/site/src/content/docs/components/alerts.mdx
diff --git a/site/src/content/docs/components/buttons.mdx b/site/src/content/docs/components/buttons.mdx
@@ -297,7 +297,7 @@ Make buttons look inactive by adding the `disabled` boolean attribute to any `<b
 Disabled buttons using the `<a>` element behave a bit different:
 
 - Disabled buttons using `<a>` must include the `aria-disabled="true"` attribute to indicate the state of the element to assistive technologies and to make it visually appear disabled.
-- Disabled buttons using `<a>` *should not* include the `href` attribute. In case you need to keep the `href`, please refer to [disabled link accessibility warning]([[docsref:/components/link#disabled-link-accessibility-warning]]).
+- Disabled buttons using `<a>` *should not* include the `href` attribute. In case you need to keep the `href`, please refer to [disabled link accessibility warning]([[docsref:/components/links#disabled-link-accessibility-warning]]).
 - Some future-friendly styles are included to disable all `pointer-events` on anchor buttons.
 
 <Example class="p-none bd-btn-example" code={`<div class="p-large d-flex gap-xsmall flex-wrap">
diff --git a/site/src/content/docs/components/checkbox.mdx b/site/src/content/docs/components/checkbox.mdx
@@ -440,7 +440,7 @@ To create a read only checkbox, the input should be replaced by a `span` element
 
 <Callout type="info" name="input-invalid" />
 
-To display an invalid checkbox, add `.is-invalid` to a `.control-item-indicator`. An error icon will be automatically shown, if there is a decorative icon specified it will be hidden. Please take a look at our [Validation page to learn more]([[docsref:/components/validation]]).
+To display an invalid checkbox, add `.is-invalid` to a `.control-item-indicator`. An error icon will be automatically shown, if there is a decorative icon specified it will be hidden. Please take a look at our [Validation page to learn more]([[docsref:/foundation/form-validation]]).
 
 <Example buttonLabel="invalid checkboxes" class="bd-example-indeterminate" addStackblitzJs code={`<fieldset class="control-items-list">
     <div class="checkbox-item control-item-divider">
diff --git a/site/src/content/docs/components/links.mdx b/site/src/content/docs/components/links.mdx
@@ -3,7 +3,6 @@ title: Links
 description: Use OUDS Web’s custom link styles for navigational elements, enabling users to move between pages, sections, or external resources.
 aliases:
   - "/docs/components/links/"
-  - "/docs/components/link/"
 toc: true
 types:
   - Link
diff --git a/site/src/content/docs/components/radio-button.mdx b/site/src/content/docs/components/radio-button.mdx
@@ -424,7 +424,7 @@ To create a read only radio button, the input should be replaced by a `span` ele
 
 <Callout type="info" name="input-invalid" />
 
-To display an invalid radio button, add `.is-invalid` to a `.control-item-indicator`. Please take a look at our [Validation page to learn more]([[docsref:/components/validation]]).
+To display an invalid radio button, add `.is-invalid` to a `.control-item-indicator`. Please take a look at our [Validation page to learn more]([[docsref:/foundation/form-validation]]).
 
 <Example buttonLabel="invalid radio buttons" code={`<fieldset class="control-items-list">
     <div class="radio-button-item control-item-divider">
diff --git a/site/src/content/docs/components/select-input.mdx b/site/src/content/docs/components/select-input.mdx
@@ -163,7 +163,7 @@ Helper text should be explicitly associated with the select input it relates to
 ### Helper link
 
 If the helper text is not sufficient, it’s possible to offer the user an additional help link. The helper link can also be displayed on its own without helper text.
-To display a helper link below selects, use a standard small link [with `.link` and `.link-small` classes]([[docsref:/components/link#sizes]]) as a sibling of a `.select-input-container`.
+To display a helper link below selects, use a standard small link [with `.link` and `.link-small` classes]([[docsref:/components/links#sizes]]) as a sibling of a `.select-input-container`.
 
 <Callout type="warning">
 Helper link should be explicitly labelled using the `aria-labelledby` attribute in which you must combine the helper link id and the related select input label id. This will ensure that assistive technologies—such as screen readers—will announce this helper link in relation with the select input. We also recommend adding a `.visually-hidden` span inside the link to coordinate the link content and the label.
@@ -284,7 +284,7 @@ Add the `readonly` boolean attribute on an input to prevent modification of the
 
 <Callout type="info" name="input-invalid" />
 
-To display an invalid select, add `.is-invalid` to a `.select-input-field` within the `.select-input-container`. Please take a look at our [Validation page to learn more]([[docsref:/components/validation]]).
+To display an invalid select, add `.is-invalid` to a `.select-input-field` within the `.select-input-container`. Please take a look at our [Validation page to learn more]([[docsref:/foundation/form-validation]]).
 
 <Callout type="warning">
 For accessibility purposes, the invalid state should be associated with a `.error-text` as a sibling of a `.select-input-container` and related to it with an `aria-describedby` attribute when displayed. Note that the `.error-text` will replace the helper text, so it should be descriptive enough to convey the error note that the `.error-text` will replace the helper text, so it should be descriptive enough to convey the error and you must dynamically replace the `aria-describedby` attribute when the select input becomes invalid.
diff --git a/site/src/content/docs/components/switch.mdx b/site/src/content/docs/components/switch.mdx
@@ -316,7 +316,7 @@ To create a read only switch, the input should be replaced by a `span` element w
 
 <Callout type="info" name="input-invalid" />
 
-To display an invalid switch, add `.is-invalid` to a `.control-item-indicator`. Please take a look at our [Validation page to learn more]([[docsref:/components/validation]]).
+To display an invalid switch, add `.is-invalid` to a `.control-item-indicator`. Please take a look at our [Validation page to learn more]([[docsref:/foundation/form-validation]]).
 
 #### Error text on one switch item
 
diff --git a/site/src/content/docs/components/text-area.mdx b/site/src/content/docs/components/text-area.mdx
@@ -87,7 +87,7 @@ Helper text should be explicitly associated with the text area it relates to usi
 ### Helper link
 
 If the helper text is not sufficient, it’s possible to offer the user an additional help link. The helper link can also be displayed on its own without helper text.
-To display a helper link below text areas, use a standard small link [with `.link` and `.link-small` classes]([[docsref:/components/link#sizes]]) as a sibling of a `.text-area-container`.
+To display a helper link below text areas, use a standard small link [with `.link` and `.link-small` classes]([[docsref:/components/links#sizes]]) as a sibling of a `.text-area-container`.
 
 <Callout type="warning">
 Helper link should be explicitly described using the `aria-labelledby` attribute in which you must combine the helper link id and the related text area label id. This will ensure that assistive technologies—such as screen readers—will announce this helper link in relation with the text area. We also recommend adding a `.visually-hidden` span inside the link to coordinate the link content and the label.
@@ -171,7 +171,7 @@ Add the `readonly` boolean attribute on a text area to prevent modification of t
 
 <Callout type="info" name="input-invalid" />
 
-To display an invalid text area, add `.is-invalid` to a `.text-area-field` within the `.text-area-container`. Please take a look at our [Validation page to learn more]([[docsref:/components/validation]]).
+To display an invalid text area, add `.is-invalid` to a `.text-area-field` within the `.text-area-container`. Please take a look at our [Validation page to learn more]([[docsref:/foundation/form-validation]]).
 
 <Callout type="warning">
 For accessibility purposes, the invalid state should be associated with a `.error-text` as a sibling of a `.text-area-container` and related to it with an `aria-describedby` attribute when displayed. Note that the `.error-text` will replace the helper text, so it should be descriptive enough to convey the error and you must dynamically replace the `aria-describedby` attribute when the text area becomes invalid.
diff --git a/site/src/content/docs/components/text-input.mdx b/site/src/content/docs/components/text-input.mdx
@@ -186,7 +186,7 @@ Helper text should be explicitly associated with the text input it relates to us
 ### Helper link
 
 If the helper text is not sufficient, it's possible to offer the user an additional help link. The helper link can also be displayed on its own without helper text.
-To display a helper link below inputs, use a standard small link [with `.link` and `.link-small` classes]([[docsref:/components/link#sizes]]) as a sibling of a `.text-input-container`.
+To display a helper link below inputs, use a standard small link [with `.link` and `.link-small` classes]([[docsref:/components/links#sizes]]) as a sibling of a `.text-input-container`.
 
 <Callout type="warning">
 Helper link should be explicitly described using the `aria-labelledby` attribute in which you must combine the helper link id and the related text input label id. This will ensure that assistive technologies—such as screen readers—will announce this helper link in relation with the input. We also recommend adding a `.visually-hidden` span inside the link to coordinate the link content and the label.
@@ -364,7 +364,7 @@ Add the `readonly` boolean attribute on an input to prevent modification of the
 
 <Callout type="info" name="input-invalid" />
 
-To display an invalid input, add `.is-invalid` to a `.text-input-field` within the `.text-input-container`. Please take a look at our [Validation page to learn more]([[docsref:/components/validation]]).
+To display an invalid input, add `.is-invalid` to a `.text-input-field` within the `.text-input-container`. Please take a look at our [Validation page to learn more]([[docsref:/foundation/form-validation]]).
 
 <Callout type="warning">
 For accessibility purposes, the invalid state should be associated with a `.error-text` as a sibling of a `.text-input-container` and related to it with an `aria-describedby` attribute when displayed. Note that the `.error-text` will replace the helper text, so it should be descriptive enough to convey the error and you must dynamically replace the `aria-describedby` attribute when switching the text input to invalid.
diff --git a/site/src/content/docs/foundation/component.mdx b/site/src/content/docs/foundation/component.mdx
@@ -1,9 +1,9 @@
 ---
-title: Components
+title: Component
 description: Learn how and why we build nearly all our components responsively and with base and modifier classes.
 aliases:
   - "/docs/customize/components/"
-  - "/docs/foundation/components/"
+  - "/docs/foundation/component/"
 toc: true
 ---
 
diff --git a/site/src/content/docs/foundation/form-validation.mdx b/site/src/content/docs/foundation/form-validation.mdx
@@ -1,9 +1,9 @@
 ---
-title: Validation
+title: Form validation
 description: Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript.
 aliases:
   - "/docs/forms/validation/"
-  - "/docs/components/validation/"
+  - "/docs/foundation/form-validation/"
 toc: true
 extra_js:
   - src: "[[docsref:/assets/js/validate-forms.js]]"
diff --git a/site/src/content/docs/getting-started/migration-from-boosted.mdx b/site/src/content/docs/getting-started/migration-from-boosted.mdx
@@ -387,7 +387,7 @@ See [our new Text Area page]([[docsref:/components/text-area]]) for more informa
 
 ### Icon link
 
-- <span class="tag tag-small rounded-none tag-info">Info</span> `.icon-link` and `.link-chevron` are now documented in link component. See [icon link]([[docsref:/components/link#icon-link]]) and [link chevron]([[docsref:/components/link#link-chevron]]).
+- <span class="tag tag-small rounded-none tag-info">Info</span> `.icon-link` and `.link-chevron` are now documented in link component. See [icon link]([[docsref:/components/links#icon-link]]) and [link chevron]([[docsref:/components/links#link-chevron]]).
 
 ### Icon
 
diff --git a/site/src/content/docs/getting-started/migration.mdx b/site/src/content/docs/getting-started/migration.mdx
@@ -339,15 +339,15 @@ toc: true
 
 #### Links
 
-- <span class="tag tag-small rounded-none tag-positive">New</span> Link component has been implemented. Read more in our [links page]([[docsref:/components/link]]).
+- <span class="tag tag-small rounded-none tag-positive">New</span> Link component has been implemented. Read more in our [links page]([[docsref:/components/links]]).
 
 ### Helpers
 
 #### Icon link
 
 - <span class="tag tag-small rounded-none tag-negative">Breaking</span> Colors links are unstyled in OUDS Web, the documentation is only kept for Bootstrap compatibility.
 
-- <span class="tag tag-small rounded-none tag-warning">Warning</span> The icon link documentation has been merged into is the new [Link component]([[docsref:/components/link]]) documentation and removed from helpers section.
+- <span class="tag tag-small rounded-none tag-warning">Warning</span> The icon link documentation has been merged into is the new [Link component]([[docsref:/components/links]]) documentation and removed from helpers section.
 
 ### Utilities
 

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		-This standalone version is commonly used for building custom components and should not be used on its own. Remember to provide some sort of accessible name for assistive technologies (for instance, using `aria-labelledby`, a `.visually-hidden`, `aria-label` or a second label). See the [forms validation accessibility]([[docsref:/components/validation#accessibility]]) section for details.
	`1`	+This standalone version is commonly used for building custom components and should not be used on its own. Remember to provide some sort of accessible name for assistive technologies (for instance, using `aria-labelledby`, a `.visually-hidden`, `aria-label` or a second label). See the [forms validation accessibility]([[docsref:/foundation/form-validation#accessibility]]) section for details.