diff --git a/CHANGELOG.md b/CHANGELOG.md index e14fe8a35e..35d67eb989 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,6 +19,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ### Fixes - Fix overflowing focus outline for `Grid` items for Teams theme @Bugaa92 ([#1195](https://github.com/stardust-ui/react/pull/1195)) +- Fix routing for accessibility documentation @sophieH29 ([#1208](https://github.com/stardust-ui/react/pull/1208)) ### Features - Add `Embed` and `Video` components @stuartlong ([#1108](https://github.com/stardust-ui/react/pull/1108)) diff --git a/docs/src/views/Accessibility.tsx b/docs/src/views/Accessibility.tsx index 6cf3657494..ca041d7e17 100644 --- a/docs/src/views/Accessibility.tsx +++ b/docs/src/views/Accessibility.tsx @@ -2,6 +2,8 @@ import * as React from 'react' import DocPage from '../components/DocPage/DocPage' import CodeSnippet from '../components/CodeSnippet' import GuidesNavigationFooter from '../components/GuidesNavigationFooter' +import { Link } from 'react-router-dom' + import { code, link } from '../utils/helpers' import { Header } from '@stardust-ui/react' @@ -10,56 +12,56 @@ export default () => (
@@ -281,7 +283,7 @@ export default () => ( to compose visual components and apply a behavior on top of them to achieve desired keyboard or screen reader navigation. Users can override these and provide their own roles and attributes by changing the behavior applied.{' '} - {link('Read more about Accessibility Behaviors.', '/accessibility-behaviors')} + {link('Read more about Accessibility Behaviors.', 'accessibility-behaviors')}

@@ -411,10 +413,18 @@ export default () => (

Read more about:

    -
  • {link('Accessibility Behaviors', '/accessibility-behaviors')}
    • -
  • {link('FocusZone', '/focus-zone')}
    • -
  • {link('FocusTrapZone', '/focus-trap-zone')}
    • -
  • {link('AutoFocusZone', '/auto-focus-zone')}
    • +
  • + Accessibility Behaviors +
    • +
  • + FocusZone +
    • +
  • + FocusTrapZone +
    • +
  • + AutoFocusZone +
(
Content
    -
  • {link('Overview', '/accessibility-behaviors#overview')}
    • -
  • {link('ARIA attributes', '/accessibility-behaviors#aria-attributes')}
    • -
  • {link('Overriding behaviors', '/accessibility-behaviors#overriding-behaviors')}
    • +
  • {link('Overview', 'accessibility-behaviors#overview')}
    • +
  • {link('ARIA attributes', 'accessibility-behaviors#aria-attributes')}
    • +
  • {link('Overriding behaviors', 'accessibility-behaviors#overriding-behaviors')}
Overview

@@ -55,20 +56,21 @@ export default () => ( items, such as list items and menu items. At the same time it is possible to TAB between these navigable components (navigate between Menu and List components by pressing TAB and use arrow keys to navigate between their items).{' '} - {link('Read more about FocusZone.', '/focus-zone')} + Read more about FocusZone.

Type: {code('{ mode: FocusZoneMode, props?: FocusZoneProps }')}.

  • focusTrap - {code('FocusTrapZone')} grabs the focus and traps it within an HTML element, usually a dialog or popup.{' '} - {link('Read more about FocusTrapZone.', '/focus-trap-zone')} + Read more about FocusTrapZone.

    Type: {code('FocusTrapZoneProps | boolean')}.

  • autoFocus - {code('AutoFocusZone')} is used to grab focus and put it to inner element when component mounts. For example, when it is needed to focus an inner element in the Popup when it mounts. If true, it is enabled with default properties or can be - modified by setting object. {link('Read more about AutoFocusZone.', '/auto-focus-zone')} + modified by setting object.{' '} + Read more about AutoFocusZone.

    Type: {code('AutoFocusZoneProps | boolean')}.

    • @@ -250,9 +252,15 @@ export default () => (

    Read more about:

      -
    • {link('FocusZone', '/focus-zone')}
      • -
    • {link('FocusTrapZone', '/focus-trap-zone')}
      • -
    • {link('AutoFocusZone', '/auto-focus-zone')}
      • +
    • + FocusZone +
      • +
    • + FocusTrapZone +
      • +
    • + AutoFocusZone +

    diff --git a/docs/src/views/AutoFocusZone.tsx b/docs/src/views/AutoFocusZone.tsx index 07d491b1f5..0527ba2794 100644 --- a/docs/src/views/AutoFocusZone.tsx +++ b/docs/src/views/AutoFocusZone.tsx @@ -1,5 +1,6 @@ import * as React from 'react' import { Header } from '@stardust-ui/react' +import { Link } from 'react-router-dom' import DocPage from '../components/DocPage' import { code, link } from '../utils/helpers' import CodeSnippet from '../components/CodeSnippet' @@ -8,13 +9,10 @@ export default () => (
    Content
      -
    • {link('Overview', '/auto-focus-zone#overview')}
      • -
    • {link('Usage', '/auto-focus-zone#usage')}
      • +
    • {link('Overview', 'auto-focus-zone#overview')}
      • +
    • {link('Usage', 'auto-focus-zone#usage')}
    • - {link( - 'Override AutoFocusZone settings', - '/auto-focus-zone#override-autofocuszone-settings', - )} + {link('Override AutoFocusZone settings', 'auto-focus-zone#override-autofocuszone-settings')}
    Overview
    @@ -25,7 +23,7 @@ export default () => (

    If you need both - grabbing the focus and trap the focus in the component - use{' '} - {link('FocusTrapZone.', '/focus-trap-zone')} + FocusTrapZone.

    Usage

    @@ -34,7 +32,7 @@ export default () => ( {code('FocusTrapZone')}. To enable auto focus for a component, in the behavior set prop{' '} {code('autoFocus')} to {code('true')} with default settings or set an object with desired values for auto focus zone props.{' '} - {link('Read more about Accessibility Behaviors.', '/accessibility-behaviors')} + Read more about Accessibility Behaviors.

    {code('AutoFocusZone')}'s props which can be applied in accessibility behavior ( @@ -64,8 +62,7 @@ export default () => (

    For example, we want to specify the focusable selector for Popup with auto focus, so on Popup mount, focus will go to the element matched to that selector. For that purpose, we can to - override {code('popupAutoFocusBehavior')} and specify - {code('firstFocusableSelector')} there. + override {code('popupAutoFocusBehavior')} and specify {code('firstFocusableSelector')} there.

    ( />

    Read more about:

      -
    • {link('Accessibility Behaviors', '/accessibility-behaviors')}
      • -
    • {link('FocusZone', '/focus-zone')}
      • -
    • {link('FocusTrapZone', '/focus-trap-zone')}
      • +
    • + Accessibility Behaviors +
      • +
    • + FocusZone +
      • +
    • + FocusTrapZone +

    {code('AutoFocusZone')} code on{' '} diff --git a/docs/src/views/FocusTrapZone.tsx b/docs/src/views/FocusTrapZone.tsx index 2b095fd384..e88fb3941e 100644 --- a/docs/src/views/FocusTrapZone.tsx +++ b/docs/src/views/FocusTrapZone.tsx @@ -1,4 +1,5 @@ import * as React from 'react' +import { Link } from 'react-router-dom' import { Header } from '@stardust-ui/react' import DocPage from '../components/DocPage' import { link, code } from '../utils/helpers' @@ -9,13 +10,10 @@ export default () => (

    Content
      -
    • {link('Overview', '/focus-trap-zone#overview')}
      • -
    • {link('Usage', '/focus-trap-zone#usage')}
      • +
    • {link('Overview', 'focus-trap-zone#overview')}
      • +
    • {link('Usage', 'focus-trap-zone#usage')}
    • - {link( - 'Override FocusTrapZone settings', - '/focus-trap-zone#override-focustrapzone-settings', - )} + {link('Override FocusTrapZone settings', 'focus-trap-zone#override-focustrapzone-settings')}
    Overview
    @@ -36,10 +34,10 @@ export default () => (
    Usage

    Stardust applies focus trap via accessibility behavior, the same way as it's done for{' '} - {link('FocusZone', '/focus-zone')}. To enable focus trap for component, it is needed, in - behavior, to set prop {code('trapFocus')} to {code('true')} with default settings or set an - object with desired values for focus trap zone props.{' '} - {link('Read more about Accessibility Behaviors.', '/accessibility-behaviors')} + FocusZone. To enable focus trap for component, it is needed, in + behavior, to set prop {code('trapFocus')} to + {code('true')} with default settings or set an object with desired values for focus trap zone + props. Read more about Accessibility Behaviors.{' '} Currently, it is used for Popup via {code('popupFocusTrapBehavior')} and Dialog via{' '} {code('dialogBehavior')}.

    @@ -153,9 +151,15 @@ export default () => ( />

    Read more about:

      -
    • {link('Accessibility Behaviors', '/accessibility-behaviors')}
      • -
    • {link('FocusZone', '/focus-zone')}
      • -
    • {link('AutoFocusZone', '/auto-focus-zone')}
      • +
    • + Accessibility Behaviors +
      • +
    • + FocusZone +
      • +
    • + AutoFocusZone +

    {code('FocusTrapZone')} code on{' '} diff --git a/docs/src/views/FocusZone.tsx b/docs/src/views/FocusZone.tsx index 5fc17d14ff..d57be93898 100644 --- a/docs/src/views/FocusZone.tsx +++ b/docs/src/views/FocusZone.tsx @@ -1,4 +1,5 @@ import * as React from 'react' +import { Link } from 'react-router-dom' import { Header } from '@stardust-ui/react' import CodeSnippet from '../components/CodeSnippet' @@ -9,15 +10,15 @@ export default () => (

    Content
      -
    • {link('Overview', '/focus-zone#overview')}
      • +
    • {link('Overview', 'focus-zone#overview')}
    • - {link('Usage', '/focus-zone#usage')} + {link('Usage', 'focus-zone#usage')}
        -
      • {link('Mode', '/focus-zone#mode')}
        • -
      • {link('Props', '/focus-zone#props')}
        • +
      • {link('Mode', 'focus-zone#mode')}
        • +
      • {link('Props', 'focus-zone#props')}
      • -
    • {link('Override FocusZone settings', '/focus-zone#override-focuszone-settings')}
      • +
    • {link('Override FocusZone settings', 'focus-zone#override-focuszone-settings')}
    Overview

    @@ -75,7 +76,7 @@ export default () => (

    )`} /> - Read more about accessibility behaviors {link('here', '/accessibility-behaviors')}. + Read more about Accessibility Behaviors.

    The accessibility behavior can control the focus zone operation by specifying Focus zone's @@ -144,13 +145,13 @@ export default () => (

    • horizontal - navigation between items can be made using left/right arrow keys. -

      See an example of {link('horizontal menu', '/components/menu#types-menu')}.

      +

      See an example of {link('horizontal menu', 'components/menu#types-menu')}.

    • vertical - navigation between items can be made using up/down arrow keys.

      See an example of{' '} - {link('vertical menu', '/components/menu#variations-vertical-pointing')}. + {link('vertical menu', 'components/menu#variations-vertical-pointing')}.

      • @@ -177,7 +178,7 @@ export default () => (

    • bidirectional - navigation between items can be made using all arrow keys.{' '} It is set by default. -

      See an example of {link('tab list', '/components/menu#usages-tab-list')}.

      +

      See an example of {link('tab list', 'components/menu#usages-tab-list')}.

    @@ -243,7 +244,7 @@ export default () => ( user attempts to naviagate before the first target.

    Default: {code('false')}

    Type: {code('boolean')}

    -

    For example, {link('horizontal menu', '/components/menu#types-menu')}.

    +

    For example, {link('horizontal menu', 'components/menu#types-menu')}.

  • shouldEnterInnerZone - callback function that will be executed, will be executed on @@ -361,9 +362,15 @@ export default () => ( />

    Read more about:

      -
    • {link('Accessibility Behaviors', '/accessibility-behaviors')}
      • -
    • {link('FocusTrapZone', '/focus-trap-zone')}
      • -
    • {link('AutoFocusZone', '/auto-focus-zone')}
      • +
    • + Accessibility Behaviors +
      • +
    • + FocusTrapZone +
      • +
    • + AutoFocusZone +

    {code('FocusZone')} code on{' '}