Created documentation for SkipToContentLink

apps/website/src/content/docs/skiptocontentlink.mdx

@@ -0,0 +1,58 @@
+---
+title: SkipToContentLink
+description: A skip-to-content link helps keyboard users quickly navigate to the main content.
+thumbnail: #TODO
+---
+
+<p>{frontmatter.description}</p>
+
+<LiveExample src='SkipToContentLink.main.jsx' truncate={true}>
+  <AllExamples.SkipToContentLinkMainExample client:load />
+</LiveExample>
+
+In large applications, numerous navigation links and other focusable elements can require a lot of keyboard presses before users reach their desired content. What is more, if users navigate to another page with the same structure, they might need to tab through the same list of non-essential links again.
+
+While this may not be an issue for sighted mouse users, it can be cumbersome for those who rely on keyboard navigation. Therefore, a skip link is crucial to improve accessibility and streamline navigation for keyboard users.
+
+## Usage
+
+The `SkipToContentLink` component setup requires two elements:
+
+- The target element to skip to.
+- The link pointing to that target element.
+
+```jsx
+<SkipToContentLink href='#main-id' />
+```
+
+The `href` prop should be used to direct focus to the target element. This prop must be set to the `id` of the main content section, including the `"#"` prefix.
+
+```jsx {2}
+<div className='App'>
+  <SkipToContentLink href='#main-id' />
+  {/* Other elements such as header, navigation, etc. */}
+
+  <main id='main-id'>{/* Main content that will be skipped to */}</main>
+</div>
+```
+
+As the skip link is visually hidden from view until focused, users typically access the link by pressing <kbd>Tab</kbd> at the start of the page. The skip link component should appear on top of the page to make sure it is one of the first items that keyboard users are able to navigate to using the keyboard.
+
+### Custom Text
+
+The skip link component accepts custom text through its `children` prop, which is especially useful for providing a localized message.
+
+If no `children` is passed, the default text displayed is "Skip to main content".
+
+```jsx {2}
+<div className='App'>
+  <SkipToContentLink href='#main-id'>Skip main navigation</SkipToContentLink>
+  {/* Other elements such as header, navigation, etc. */}
+
+  <main id='main-id'>{/* Main content that will be skipped to */}</main>
+</div>
+```
+
+## Props
+
+<PropsTable path='@itwin/itwinui-react/esm/core/SkipToContentLink/SkipToContentLink.d.ts' />

examples/SkipToContentLink.main.css

@@ -0,0 +1,8 @@
+.demo-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 300px;
+  width: 100%;
+  transform: translateX(0); /* creates containing block for position: fixed */
+}

examples/SkipToContentLink.main.jsx

@@ -0,0 +1,20 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import { SkipToContentLink } from '@itwin/itwinui-react';
+
+export default () => {
+  return (
+    <div className='demo-container'>
+      <div>
+        <button>Click here</button> then press <kbd>Tab</kbd> to see the skip
+        link.
+      </div>
+      {/* The SkipToContentLink component should normally be placed at the
+          beginning of the page and point to the main content. This is a
+          contrived example for visual demonstration. */}
+      <SkipToContentLink href='#' />
+    </div>
+  );
+};

examples/index.tsx

@@ -1074,6 +1074,14 @@ export { SideNavigationSubmenuExample };
 
 // ----------------------------------------------------------------------------
 
+import { default as SkipToContentLinkMainExampleRaw } from './SkipToContentLink.main';
+const SkipToContentLinkMainExample = withThemeProvider(
+  SkipToContentLinkMainExampleRaw,
+);
+export { SkipToContentLinkMainExample };
+
+// ----------------------------------------------------------------------------
+
 import { default as SliderMainExampleRaw } from './Slider.main';
 const SliderMainExample = withThemeProvider(SliderMainExampleRaw);
 export { SliderMainExample };