diff --git a/packages/react/src/components/UIShell/SkipToContent.js b/packages/react/src/components/UIShell/SkipToContent.js index 3696ea336b57..7b2fb3e49e83 100644 --- a/packages/react/src/components/UIShell/SkipToContent.js +++ b/packages/react/src/components/UIShell/SkipToContent.js @@ -29,7 +29,7 @@ const SkipToContent = ({ SkipToContent.propTypes = { /** - * Provide an optional class to be applied to the containing node + * Provide text to display in the SkipToContent `a` tag */ children: PropTypes.string.isRequired, @@ -42,7 +42,7 @@ SkipToContent.propTypes = { /** * Optionally override the default tabindex of 0 */ - tabIndex: PropTypes.string.isRequired, + tabIndex: PropTypes.string, }; SkipToContent.defaultProps = { diff --git a/packages/react/src/components/UIShell/UIShell-story.js b/packages/react/src/components/UIShell/UIShell-story.js index edbd4c1c941a..7739ffd0c18d 100644 --- a/packages/react/src/components/UIShell/UIShell-story.js +++ b/packages/react/src/components/UIShell/UIShell-story.js @@ -66,11 +66,12 @@ const StoryContent = () => {

The shell is perhaps the most crucial piece of any UI built with - Carbon. It contains the shared navigation framework for the entire - design system and ties the products in IBM’s portfolio together in a - cohesive and elegant way. The shell is the home of the topmost - navigation, where users can quickly and dependably gain their - bearings and move between pages. + Carbon. It contains the + shared navigation framework for the entire design system and ties + the products in IBM’s portfolio together in a cohesive and elegant + way. The shell is the home of the topmost navigation, where users + can quickly and dependably gain their bearings and move between + pages.

The shell was designed with maximum flexibility built in, to serve @@ -218,6 +219,37 @@ storiesOf('UI Shell', module) )) ) + .add( + 'Header Base w/ SkipToContent', + withReadme(readme, () => ( + <> +

+ + + [Platform] + + + + + + + + + + + + +
+ + + )) + ) .add( 'Header Base w/ Navigation and Actions', withReadme(readme, () => (