docs: fix Accessibility Guide links

gpbl · Sep 26, 2024 · 9752c0c · 9752c0c
1 parent 58966af
commit 9752c0c
Show file tree

Hide file tree

Showing 11 changed files with 76 additions and 21 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -18,7 +18,7 @@ npm install react-day-picker@latest
 
 - Moved `date-fns` from peer dependencies to dependencies.
 - Added support for [time zones](https://daypicker.dev/docs/localization#time-zone) and [Jalali Calendar](https://daypicker.dev/docs/localization#jalali-calendar).
-- [Enhanced accessibility](https://daypicker.dev/docs/accessibility) to better comply with [WCAG 2.1](https://www.w3.org/TR/WCAG21/) recommendations.
+- [Enhanced accessibility](https://daypicker.dev/guides/accessibility) to better comply with [WCAG 2.1](https://www.w3.org/TR/WCAG21/) recommendations.
 - [Simplified styles](https://daypicker.dev/docs/styling) and new CSS variables for easier customization.
 - New `excludeDisabled` prop for [range mode](https://daypicker.dev/docs/selection-modes#exclude-disabled).
 - New `dropdown-years` and `dropdown-months` caption layouts.

diff --git a/README.md b/README.md
@@ -10,7 +10,7 @@ DayPicker is a [React](https://react.dev) component for creating date pickers, c
 - 🎨 Minimal design that can be [easily styled](https://daypicker.dev/docs/styling) with CSS or any CSS framework.
 - 📅 Supports [selections](https://daypicker.dev/docs/selection-modes) of single days, multiple days, ranges of days, or [custom selections](https://daypicker.dev/guides/custom-selections).
 - 🌍 Can be [localized](https://daypicker.dev/docs/localization) into any language, supports [ISO 8601 dates](https://daypicker.dev/docs/localization#iso-week-dates), [time zones](https://daypicker.dev/docs/localization#time-zone), and the [Jalali calendar](https://daypicker.dev/docs/localization#jalali-calendar).
-- 🦮 Complies with WCAG 2.1 AA requirements for [accessibility](https://daypicker.dev/docs/accessibility).
+- 🦮 Complies with WCAG 2.1 AA requirements for [accessibility](https://daypicker.dev/guides/accessibility).
 - ⚙️ [Customizable components](https://daypicker.dev/guides/custom-components) to extend the rendered elements.
 - 🔤 Easy integration [with input fields](https://daypicker.dev/guides/input-fields).
 

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/types/props.ts b/src/types/props.ts
@@ -282,7 +282,7 @@ export interface PropsBase {
    * Use this prop to communicate the calendar's status to screen readers.
    * Prefer strings over complex UI elements.
    *
-   * @see https://daypicker.dev/docs/accessibility#footer
+   * @see https://daypicker.dev/guides/accessibility#footer
    */
   footer?: React.ReactNode | string;
   /**
@@ -292,7 +292,7 @@ export interface PropsBase {
    * Use this prop when you need to focus DayPicker after a user action, for
    * improved accessibility.
    *
-   * @see https://daypicker.dev/docs/accessibility#autofocus
+   * @see https://daypicker.dev/guides/accessibility#autofocus
    */
   autoFocus?: boolean;
   /**

diff --git a/website/docs/docs/customization.mdx b/website/docs/docs/customization.mdx
@@ -145,7 +145,7 @@ In [selection mode](./selection-modes.mdx), you can create a [custom selection](
 
 ## Footer as Live Region
 
-Use the `footer` prop to display a footer below the calendar. The footer acts as a [live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) to announce changes to screen readers. For more information on making the calendar accessible, see the [Accessibility guide](./accessibility.mdx).
+Use the `footer` prop to display a footer below the calendar. The footer acts as a [live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) to announce changes to screen readers. For more information on making the calendar accessible, see the [Accessibility guide](../guides/accessibility.mdx).
 
 ```tsx
 export function Footer() {

diff --git a/website/docs/docs/translation.mdx b/website/docs/docs/translation.mdx
@@ -24,7 +24,7 @@ Get help and provide suggestions for translating DayPicker into your language. V
 
 ## ARIA Labels
 
-The `labels` prop allows you to customize the [ARIA labels](./accessibility.mdx).
+The `labels` prop allows you to customize the [ARIA labels](../guides/accessibility.mdx).
 
 ### Example: Italian labels
 

diff --git a/website/docs/guides/custom-components.mdx b/website/docs/guides/custom-components.mdx
@@ -18,7 +18,7 @@ You may need to use custom components in advanced applications to:
 - Implement buttons or dropdowns using your own design system components
 - Wrap an element with another element, like adding a tooltip to a day cell
 
-When customizing components, familiarize yourself with the [API Reference](../api#components) and the [DayPicker Anatomy](../docs/anatomy.mdx). Ensure you maintain [accessibility](../docs/accessibility.mdx).
+When customizing components, familiarize yourself with the [API Reference](../api#components) and the [DayPicker Anatomy](../docs/anatomy.mdx). Ensure you maintain [accessibility](../guides/accessibility.mdx).
 
 :::note Custom Components vs Formatters
 

diff --git a/website/docs/intro.mdx b/website/docs/intro.mdx
@@ -15,7 +15,7 @@ DayPicker is a [React](https://react.dev) component for creating date pickers, c
 - 🎨 Minimal design that can be [easily styled](./docs/styling.mdx) with CSS or any CSS framework.
 - 📅 Supports [selections](./docs/selection-modes.mdx) of single days, multiple days, ranges of days, or [custom selections](./guides/custom-selections.mdx).
 - 🌍 Can be [localized](./docs/localization.mdx) into any language, supports [ISO 8601 dates](./docs/localization.mdx#iso-week-dates), [time zones](./docs/localization.mdx#time-zone), and the [Jalali calendar](./docs/localization.mdx#jalali-calendar).
-- 🦮 Complies with WCAG 2.1 AA requirements for [accessibility](./docs/accessibility.mdx).
+- 🦮 Complies with WCAG 2.1 AA requirements for [accessibility](./guides/accessibility.mdx).
 - ⚙️ [Customizable components](./guides/custom-components.mdx) to extend the rendered elements.
 - 🔤 Easy integration [with input fields](./guides/input-fields.mdx).
 

diff --git a/website/docs/start.mdx b/website/docs/start.mdx
@@ -59,7 +59,7 @@ export function MyDatePicker() {
 - 📅 [Selection Modes](./docs/selection-modes.mdx) - Enable users to select days with single, multiple, or range selections.
 - 🌍 [Localization](./docs/localization.mdx) - Configure DayPicker to display the calendar in different languages and date formats.
 - 🈳 [Translating DayPicker](./docs/translation.mdx) - Translate the labels and messages of the calendar.
-- 🦮 [Accessible Date Pickers](./docs/accessibility.mdx) - Make your date picker accessible to all users.
+- 🦮 [Accessible Date Pickers](./guides/accessibility.mdx) - Make your date picker accessible to all users.
 
 ### Guides
 

diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts
@@ -69,6 +69,17 @@ const config: Config = {
         entryPoints: ["../src/index.ts"],
         tsconfig: "../tsconfig-docs.json"
       }
+    ],
+    [
+      "@docusaurus/plugin-client-redirects",
+      {
+        redirects: [
+          {
+            to: "/guides/accessibility",
+            from: ["/docs/accessibility"]
+          }
+        ]
+      }
     ]
   ],
 

diff --git a/website/package.json b/website/package.json
@@ -17,6 +17,7 @@
   "dependencies": {
     "@date-fns/utc": "^1.2.0",
     "@docusaurus/core": "3.5.2",
+    "@docusaurus/plugin-client-redirects": "^3.5.2",
     "@docusaurus/preset-classic": "^3.5.2",
     "@docusaurus/remark-plugin-npm2yarn": "^3.5.2",
     "@docusaurus/theme-common": "^3.5.2",