iTwin · smmr-dn · Nov 12, 2024 · Nov 1, 2024 · Nov 4, 2024 · Nov 5, 2024
@@ -0,0 +1,31 @@
+---
+title: Skip to content link
+description: A skip-to-content link can be used to navigate directly to certain desired contents.
+thumbnail: #TODO
+---
+
+<p>{frontmatter.description}</p>
+
+<Placeholder componentPageName='table--basic' />
+
+## Usage
+
+`SkipToContentLink` is designed for screen reader and keyboard users and will only become visible when focused. It provides a shortcut to the main content of the page, bypassing the header and other navigation elements. The `href` prop should be set to the `id` of the main content section, and the value must include the '#' prefix.
+
+<LiveExample src='SkipToContentLink.main.jsx' truncate={true}>
+  <AllExamples.SkipToContentLinkMainExample client:load />
+</LiveExample>
+
+**Note**: `SkipToContentLink` must be placed inside a `<body>`.
+
+### Custom Text
+
+The link component accepts custom text through its `children` prop, allowing for localization. If no custom text is provided, the default text displayed is "Skip to main content".
+
+<LiveExample src='SkipToContentLink.customText.jsx' truncate={true}>
+  <AllExamples.SkipToContentLinkCustomTextExample client:load />
+</LiveExample>
+
+## Props
+
+<PropsTable path='@itwin/itwinui-react/esm/core/SkipToContentLink/SkipToContentLink.d.ts' />
diff --git a/examples/SkipToContentLink.customText.css b/examples/SkipToContentLink.customText.css
@@ -0,0 +1,6 @@
+.main-content {
+  border: solid 1px var(--iui-color-border);
+  height: 300px;
+  padding: 11px 12px;
+  margin-top: 10px;
+}
diff --git a/examples/SkipToContentLink.customText.jsx b/examples/SkipToContentLink.customText.jsx
@@ -0,0 +1,31 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import { SkipToContentLink, Text, Kbd, Anchor } from '@itwin/itwinui-react';
+
+export default () => {
+  return (
+    <>
+      <SkipToContentLink href='#main-content'>
+        Go to main content
+      </SkipToContentLink>
+      <Text variant='body'>
+        This is not the main content. Press&nbsp;
+        <Kbd>tab</Kbd>&nbsp;to see skip-to-content-link component. You might
+        need to click on the top of the page or the URL first. Press&nbsp;
+        <Kbd>&crarr;</Kbd>
+        &nbsp;after focusing on skip-to-content-link to skip to the main content
+        below. <Anchor href='#'>This link will be skipped.</Anchor> <br />
+      </Text>
+      <div className='main-content' id='main-content'>
+        <Text variant='body'>
+          This is the main content. Focus will be directed here from the
+          skip-to-content-link component.&nbsp;
+          <Anchor href='#'>Tab again to focus on this link.</Anchor>
+          &nbsp;
+        </Text>
+      </div>
+    </>
+  );
+};
@@ -0,0 +1,6 @@
+.main-content {
+  border: solid 1px var(--iui-color-border);
+  height: 300px;
+  padding: 11px 12px;
+  margin: 10px;
+}
@@ -0,0 +1,29 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import { SkipToContentLink, Text, Kbd, Anchor } from '@itwin/itwinui-react';
+
+export default () => {
+  return (
+    <>
+      <SkipToContentLink href='#main-content' />
+      <Text variant='body'>
+        This is not the main content. Press&nbsp;
+        <Kbd>tab</Kbd>&nbsp;to see skip-to-content-link component. You might
+        need to click on the top of the page or the URL first. Press&nbsp;
+        <Kbd>&crarr;</Kbd>
+        &nbsp;after focusing on skip-to-content-link to skip to the main content
+        below. <Anchor href='#'>This link will be skipped.</Anchor> <br />
+      </Text>
+      <div className='main-content' id='main-content'>
+        <Text variant='body'>
+          This is the main content. Focus will be directed here from the
+          skip-to-content-link component.&nbsp;
+          <Anchor href='#'>Tab again to focus on this link.</Anchor>
+          &nbsp;
+        </Text>
+      </div>
+    </>
+  );
+};
@@ -1074,6 +1074,20 @@ export { SideNavigationSubmenuExample };
 
 // ----------------------------------------------------------------------------
 
+import { default as SkipToContentLinkMainExampleRaw } from './SkipToContentLink.main';
+const SkipToContentLinkMainExample = withThemeProvider(
+  SkipToContentLinkMainExampleRaw,
+);
+export { SkipToContentLinkMainExample };
+
+import { default as SkipToContentLinkCustomTextExampleRaw } from './SkipToContentLink.customText';
+const SkipToContentLinkCustomTextExample = withThemeProvider(
+  SkipToContentLinkCustomTextExampleRaw,
+);
+export { SkipToContentLinkCustomTextExample };
+
+// ----------------------------------------------------------------------------
+
 import { default as SliderMainExampleRaw } from './Slider.main';
 const SliderMainExample = withThemeProvider(SliderMainExampleRaw);
 export { SliderMainExample };