Skip to content
This repository was archived by the owner on Mar 4, 2020. It is now read-only.

fix(docs): Fix routing for accessibility documentation #1208

Merged
sophieH29 merged 4 commits into from
Apr 11, 2019
Merged

fix(docs): Fix routing for accessibility documentation #1208

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f294be1
fix(docs): Fix routing for accessibility documentation
Apr 11, 2019
3f4e55d
Revert accidental override
Apr 11, 2019
3afe4cc
Update changelog
Apr 11, 2019
8e70832
Merge branch 'master' into docs/fix-routing
sophieH29 Apr 11, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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))
Expand Down
60 changes: 35 additions & 25 deletions docs/src/views/Accessibility.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand All @@ -10,56 +12,56 @@ export default () => (
<Header as="h2" content="Content" />
<ul>
<li>
{link('Goals of accessibility', '/accessibility#goals-of-accessibility')}
{link('Goals of accessibility', 'accessibility#goals-of-accessibility')}
<ul>
<li>{link('Out of scope', '/accessibility#out-of-scope')}</li>
<li>{link('Out of scope', 'accessibility#out-of-scope')}</li>
</ul>
</li>
<li>
{link('Making an app / page accessible', '/accessibility#making-an-app-page-accessible')}
{link('Making an app / page accessible', 'accessibility#making-an-app-page-accessible')}
<ul>
<li>{link('Semantic HTML', '/accessibility#semantic-html')}</li>
<li>{link('Design Considerations', '/accessibility#design-considerations')}</li>
<li>{link('Semantic HTML', 'accessibility#semantic-html')}</li>
<li>{link('Design Considerations', 'accessibility#design-considerations')}</li>
</ul>
</li>
<li>
{link('Keyboard Navigation', '/accessibility#keyboard-navigation')}
{link('Keyboard Navigation', 'accessibility#keyboard-navigation')}
Copy link
Contributor

@kuzhelov kuzhelov Apr 11, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

given that those are the links to the same page, suggest to use just id selector as their content - this would solve all the maintainability headache:

{link('Keyboard Navigation', '#keyboard-navigation')}

Copy link
Contributor Author

@sophieH29 sophieH29 Apr 11, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've tried that approach, unfortunately, it does not work that way. That query part is not added to the end but rewrites the path

<ul>
<li>
{link(
'Tabbing and arrow key navigation',
'/accessibility#tabbing-and-arrow-key-navigation',
'accessibility#tabbing-and-arrow-key-navigation',
)}
</li>
<li>
{link(
'Virtual Screen Reader Navigation',
'/accessibility#virtual-screen-reader-navigation',
'accessibility#virtual-screen-reader-navigation',
)}
</li>
<li>{link('Accessibility Behaviors', '/accessibility#accessibility-behaviors')}</li>
<li>{link('Focus Zone', '/accessibility#focus-zone')}</li>
<li>{link('Focus Trap Zone', '/accessibility#focus-trap-zone')}</li>
<li>{link('Auto Focus Zone', '/accessibility#auto-focus-zone')}</li>
<li>{link('Focus Indicator', '/accessibility#focus-indicator')}</li>
<li>{link('Right Click Support', '/accessibility#right-click-support')}</li>
<li>{link('Accessibility Behaviors', 'accessibility#accessibility-behaviors')}</li>
<li>{link('Focus Zone', 'accessibility#focus-zone')}</li>
<li>{link('Focus Trap Zone', 'accessibility#focus-trap-zone')}</li>
<li>{link('Auto Focus Zone', 'accessibility#auto-focus-zone')}</li>
<li>{link('Focus Indicator', 'accessibility#focus-indicator')}</li>
<li>{link('Right Click Support', 'accessibility#right-click-support')}</li>
<li>
{link(
'Elements that appear on hover',
'/accessibility#elements-that-appear-on-hover-over-another-element',
'accessibility#elements-that-appear-on-hover-over-another-element',
)}
</li>
</ul>
</li>
<li>
{link('Screen Readers', '/accessibility#screen-readers')}
{link('Screen Readers', 'accessibility#screen-readers')}
<ul>
<li>{link('Textual Representation', '/accessibility#textual-representation')}</li>
<li>{link('Live Regions', '/accessibility#live-regions')}</li>
<li>{link('Textual Representation', 'accessibility#textual-representation')}</li>
<li>{link('Live Regions', 'accessibility#live-regions')}</li>
</ul>
</li>
<li>{link('High Contrast', '/accessibility#high-contrast')}</li>
<li>{link('Zoom', '/accessibility#zoom')}</li>
<li>{link('High Contrast', 'accessibility#high-contrast')}</li>
<li>{link('Zoom', 'accessibility#zoom')}</li>
</ul>

<Header as="h2" content="Goals of Accessibility" />
Expand Down Expand Up @@ -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')}
</p>

<Header as="h3" content="Focus Zone" />
Expand Down Expand Up @@ -411,10 +413,18 @@ export default () => (

<p>Read more about:</p>
<ul>
<li>{link('Accessibility Behaviors', '/accessibility-behaviors')}</li>
<li>{link('FocusZone', '/focus-zone')}</li>
<li>{link('FocusTrapZone', '/focus-trap-zone')}</li>
<li>{link('AutoFocusZone', '/auto-focus-zone')}</li>
<li>
<Link to="accessibility-behaviors">Accessibility Behaviors</Link>
</li>
<li>
<Link to="focus-zone">FocusZone</Link>
</li>
<li>
<Link to="focus-trap-zone">FocusTrapZone</Link>
</li>
<li>
<Link to="auto-focus-zone">AutoFocusZone</Link>
</li>
</ul>

<GuidesNavigationFooter
Expand Down
26 changes: 17 additions & 9 deletions docs/src/views/AccessibilityBehaviors.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,15 @@ import { Header } from '@stardust-ui/react'
import DocPage from '../components/DocPage'
import CodeSnippet from '../components/CodeSnippet'
import { code, link } from '../utils/helpers'
import { Link } from 'react-router-dom'

export default () => (
<DocPage title="Accessibility Behaviors">
<Header as="h2">Content</Header>
<ul>
<li>{link('Overview', '/accessibility-behaviors#overview')}</li>
<li>{link('ARIA attributes', '/accessibility-behaviors#aria-attributes')}</li>
<li>{link('Overriding behaviors', '/accessibility-behaviors#overriding-behaviors')}</li>
<li>{link('Overview', 'accessibility-behaviors#overview')}</li>
<li>{link('ARIA attributes', 'accessibility-behaviors#aria-attributes')}</li>
<li>{link('Overriding behaviors', 'accessibility-behaviors#overriding-behaviors')}</li>
</ul>
<Header as="h2">Overview</Header>
<p>
Expand Down Expand Up @@ -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')}
<Link to="focus-zone">Read more about FocusZone.</Link>
<p>Type: {code('{ mode: FocusZoneMode, props?: FocusZoneProps }')}.</p>
</li>
<li>
<b>focusTrap</b> - {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')}
<Link to="focus-trap-zone">Read more about FocusTrapZone.</Link>
<p>Type: {code('FocusTrapZoneProps | boolean')}.</p>
</li>
<li>
<b>autoFocus</b> - {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.{' '}
<Link to="auto-focus-zone">Read more about AutoFocusZone.</Link>
<p>Type: {code('AutoFocusZoneProps | boolean')}.</p>
</li>
</ul>
Expand Down Expand Up @@ -250,9 +252,15 @@ export default () => (
<p>
Read more about:
<ul>
<li>{link('FocusZone', '/focus-zone')}</li>
<li>{link('FocusTrapZone', '/focus-trap-zone')}</li>
<li>{link('AutoFocusZone', '/auto-focus-zone')}</li>
<li>
<Link to="focus-zone">FocusZone</Link>
</li>
<li>
<Link to="focus-trap-zone">FocusTrapZone</Link>
</li>
<li>
<Link to="auto-focus-zone">AutoFocusZone</Link>
</li>
</ul>
</p>
</DocPage>
Expand Down
29 changes: 16 additions & 13 deletions docs/src/views/AutoFocusZone.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -8,13 +9,10 @@ export default () => (
<DocPage title="Auto Focus Zone">
<Header as="h2">Content</Header>
<ul>
<li>{link('Overview', '/auto-focus-zone#overview')}</li>
<li>{link('Usage', '/auto-focus-zone#usage')}</li>
<li>{link('Overview', 'auto-focus-zone#overview')}</li>
<li>{link('Usage', 'auto-focus-zone#usage')}</li>
<li>
{link(
'Override AutoFocusZone settings',
'/auto-focus-zone#override-autofocuszone-settings',
)}
{link('Override AutoFocusZone settings', 'auto-focus-zone#override-autofocuszone-settings')}
</li>
</ul>
<Header as="h2">Overview</Header>
Expand All @@ -25,7 +23,7 @@ export default () => (
</p>
<p>
If you need both - grabbing the focus and trap the focus in the component - use{' '}
{link('FocusTrapZone.', '/focus-trap-zone')}
<Link to="focus-trap-zone">FocusTrapZone</Link>.
</p>
<Header as="h2">Usage</Header>
<p>
Expand All @@ -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')}
<Link to="accessibility-behaviors">Read more about Accessibility Behaviors.</Link>
</p>
<p>
{code('AutoFocusZone')}'s props which can be applied in accessibility behavior (
Expand Down Expand Up @@ -64,8 +62,7 @@ export default () => (
<p>
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.
</p>
<CodeSnippet
value={`
Expand All @@ -88,9 +85,15 @@ export default () => (
/>
<p>Read more about:</p>
<ul>
<li>{link('Accessibility Behaviors', '/accessibility-behaviors')}</li>
<li>{link('FocusZone', '/focus-zone')}</li>
<li>{link('FocusTrapZone', '/focus-trap-zone')}</li>
<li>
<Link to="accessibility-behaviors">Accessibility Behaviors</Link>
</li>
<li>
<Link to="focus-zone">FocusZone</Link>
</li>
<li>
<Link to="focus-trap-zone">FocusTrapZone</Link>
</li>
</ul>
<p>
{code('AutoFocusZone')} code on{' '}
Expand Down
30 changes: 17 additions & 13 deletions docs/src/views/FocusTrapZone.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -9,13 +10,10 @@ export default () => (
<DocPage title="Focus Trap Zone">
<Header as="h2">Content</Header>
<ul>
<li>{link('Overview', '/focus-trap-zone#overview')}</li>
<li>{link('Usage', '/focus-trap-zone#usage')}</li>
<li>{link('Overview', 'focus-trap-zone#overview')}</li>
<li>{link('Usage', 'focus-trap-zone#usage')}</li>
<li>
{link(
'Override FocusTrapZone settings',
'/focus-trap-zone#override-focustrapzone-settings',
)}
{link('Override FocusTrapZone settings', 'focus-trap-zone#override-focustrapzone-settings')}
</li>
</ul>
<Header as="h2">Overview</Header>
Expand All @@ -36,10 +34,10 @@ export default () => (
<Header as="h2">Usage</Header>
<p>
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')}
<Link to="focus-zone">FocusZone</Link>. 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 to="accessibility-behaviors">Read more about Accessibility Behaviors.</Link>{' '}
Currently, it is used for Popup via {code('popupFocusTrapBehavior')} and Dialog via{' '}
{code('dialogBehavior')}.
</p>
Expand Down Expand Up @@ -153,9 +151,15 @@ export default () => (
/>
<p>Read more about:</p>
<ul>
<li>{link('Accessibility Behaviors', '/accessibility-behaviors')}</li>
<li>{link('FocusZone', '/focus-zone')}</li>
<li>{link('AutoFocusZone', '/auto-focus-zone')}</li>
<li>
<Link to="accessibility-behaviors">Accessibility Behaviors</Link>
</li>
<li>
<Link to="focus-zone">FocusZone</Link>
</li>
<li>
<Link to="auto-focus-zone">AutoFocusZone</Link>
</li>
</ul>
<p>
{code('FocusTrapZone')} code on{' '}
Expand Down
Loading