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, () => (
+ <>
+