From 30562ff7d0a3d45686fa4bb487990a7dfa38fa42 Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Fri, 1 Nov 2024 14:23:32 -0500 Subject: [PATCH 01/18] created doc for skip to main content link --- .../src/content/docs/skiptocontentlink.mdx | 17 +++++++++ examples/SkipToContentLink.main.jsx | 38 +++++++++++++++++++ examples/index.tsx | 8 ++++ 3 files changed, 63 insertions(+) create mode 100644 apps/website/src/content/docs/skiptocontentlink.mdx create mode 100644 examples/SkipToContentLink.main.jsx diff --git a/apps/website/src/content/docs/skiptocontentlink.mdx b/apps/website/src/content/docs/skiptocontentlink.mdx new file mode 100644 index 00000000000..655548ccf03 --- /dev/null +++ b/apps/website/src/content/docs/skiptocontentlink.mdx @@ -0,0 +1,17 @@ +--- +title: Skip to content link +description: A skip-to-content link can be used to navigate directly to certain desired contents. +thumbnail: #TODO +--- + +

{frontmatter.description}

+ +## Usage + +`SkipToContentLink` is for screen reader and keyboard users and will not be visible unless tabbed to. Provides a shortcut to the main content of the page without navigating through the header, etc. + + + + + +## Props diff --git a/examples/SkipToContentLink.main.jsx b/examples/SkipToContentLink.main.jsx new file mode 100644 index 00000000000..85add7cc985 --- /dev/null +++ b/examples/SkipToContentLink.main.jsx @@ -0,0 +1,38 @@ +/*--------------------------------------------------------------------------------------------- + * 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 ( + <> + + + This is not the main content. Press  + tab to see skip-to-content-link component. You might + need to click on the top of the page or the URL first. Press  + ↵ +  after focusing on skip-to-content-link to skip to the main content + below. This link will be skipped.
+ +
+ + This is the main content. Focus will be directed here from the + skip-to-content-link component.  + Tab again to focus on this link. +   + +
+ + ); +}; diff --git a/examples/index.tsx b/examples/index.tsx index 842c7dfc46f..12306db49cf 100644 --- a/examples/index.tsx +++ b/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 }; From a6b050bad585ba8b51373e604359a6813e66a3d0 Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Mon, 4 Nov 2024 15:33:10 -0600 Subject: [PATCH 02/18] added example --- .../src/content/docs/skiptocontentlink.mdx | 18 +++++++- examples/SkipToContentLink.customText.jsx | 42 +++++++++++++++++++ examples/SkipToContentLink.main.css | 6 +++ examples/SkipToContentLink.main.jsx | 23 ++++------ examples/index.tsx | 6 +++ 5 files changed, 79 insertions(+), 16 deletions(-) create mode 100644 examples/SkipToContentLink.customText.jsx create mode 100644 examples/SkipToContentLink.main.css diff --git a/apps/website/src/content/docs/skiptocontentlink.mdx b/apps/website/src/content/docs/skiptocontentlink.mdx index 655548ccf03..1e88bfc725e 100644 --- a/apps/website/src/content/docs/skiptocontentlink.mdx +++ b/apps/website/src/content/docs/skiptocontentlink.mdx @@ -6,12 +6,26 @@ thumbnail: #TODO

{frontmatter.description}

+ + ## Usage -`SkipToContentLink` is for screen reader and keyboard users and will not be visible unless tabbed to. Provides a shortcut to the main content of the page without navigating through the header, etc. +`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. - + + + +**Note**: `SkipToContentLink` must be placed inside a ``. + +### 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". + + + ## Props + + diff --git a/examples/SkipToContentLink.customText.jsx b/examples/SkipToContentLink.customText.jsx new file mode 100644 index 00000000000..4a5e8007192 --- /dev/null +++ b/examples/SkipToContentLink.customText.jsx @@ -0,0 +1,42 @@ +/*--------------------------------------------------------------------------------------------- + * 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 ( + <> + Go to main section + + This is not the main content. Press  + tab to see skip-to-content-link component. You might + need to click on the top of the page or the URL first. Press  + ↵ +  after focusing on skip-to-content-link to skip to the main content + below.{' '} + + This link will be skipped. + {' '} +
+ +
+ + This is the main content. Focus will be directed here from the + skip-to-content-link component.  + Tab again to focus on this link. +   + +
+ + ); +}; diff --git a/examples/SkipToContentLink.main.css b/examples/SkipToContentLink.main.css new file mode 100644 index 00000000000..2828e4f8856 --- /dev/null +++ b/examples/SkipToContentLink.main.css @@ -0,0 +1,6 @@ +.main-content { + border: solid 1px var(--iui-color-border); + height: 300px; + margin-top: 10px; + padding: 12px; +} diff --git a/examples/SkipToContentLink.main.jsx b/examples/SkipToContentLink.main.jsx index 85add7cc985..519d0f01574 100644 --- a/examples/SkipToContentLink.main.jsx +++ b/examples/SkipToContentLink.main.jsx @@ -7,26 +7,21 @@ import { SkipToContentLink, Text, Kbd, Anchor } from '@itwin/itwinui-react'; export default () => { return ( <> - - + + This is not the main content. Press  tab to see skip-to-content-link component. You might need to click on the top of the page or the URL first. Press  ↵  after focusing on skip-to-content-link to skip to the main content - below. This link will be skipped.
+ below.{' '} + + This link will be skipped. + +
-
- +
+ This is the main content. Focus will be directed here from the skip-to-content-link component.  Tab again to focus on this link. diff --git a/examples/index.tsx b/examples/index.tsx index 12306db49cf..791d12626cc 100644 --- a/examples/index.tsx +++ b/examples/index.tsx @@ -1080,6 +1080,12 @@ const SkipToContentLinkMainExample = withThemeProvider( ); export { SkipToContentLinkMainExample }; +import { default as SkipToContentLinkCustomTextExampleRaw } from './SkipToContentLink.customText'; +const SkipToContentLinkCustomTextExample = withThemeProvider( + SkipToContentLinkCustomTextExampleRaw, +); +export { SkipToContentLinkCustomTextExample }; + // ---------------------------------------------------------------------------- import { default as SliderMainExampleRaw } from './Slider.main'; From 488a7d3a3f3b60115bc7c670aedb293903aacb38 Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Tue, 5 Nov 2024 09:42:31 -0600 Subject: [PATCH 03/18] attempted to fix a11y error --- examples/SkipToContentLink.customText.jsx | 26 +++-------------------- examples/SkipToContentLink.main.css | 6 ------ examples/SkipToContentLink.main.jsx | 17 +++------------ 3 files changed, 6 insertions(+), 43 deletions(-) delete mode 100644 examples/SkipToContentLink.main.css diff --git a/examples/SkipToContentLink.customText.jsx b/examples/SkipToContentLink.customText.jsx index 4a5e8007192..a8efca5e6c1 100644 --- a/examples/SkipToContentLink.customText.jsx +++ b/examples/SkipToContentLink.customText.jsx @@ -7,36 +7,16 @@ import { SkipToContentLink, Text, Kbd, Anchor } from '@itwin/itwinui-react'; export default () => { return ( <> - Go to main section + Go to Props This is not the main content. Press  tab to see skip-to-content-link component. You might need to click on the top of the page or the URL first. Press  ↵ -  after focusing on skip-to-content-link to skip to the main content - below.{' '} - - This link will be skipped. - {' '} +  after focusing on skip-to-content-link to skip to the Props + section.
-
- - This is the main content. Focus will be directed here from the - skip-to-content-link component.  - Tab again to focus on this link. -   - -
); }; diff --git a/examples/SkipToContentLink.main.css b/examples/SkipToContentLink.main.css deleted file mode 100644 index 2828e4f8856..00000000000 --- a/examples/SkipToContentLink.main.css +++ /dev/null @@ -1,6 +0,0 @@ -.main-content { - border: solid 1px var(--iui-color-border); - height: 300px; - margin-top: 10px; - padding: 12px; -} diff --git a/examples/SkipToContentLink.main.jsx b/examples/SkipToContentLink.main.jsx index 519d0f01574..82ba5844e8d 100644 --- a/examples/SkipToContentLink.main.jsx +++ b/examples/SkipToContentLink.main.jsx @@ -7,27 +7,16 @@ import { SkipToContentLink, Text, Kbd, Anchor } from '@itwin/itwinui-react'; export default () => { return ( <> - + This is not the main content. Press  tab to see skip-to-content-link component. You might need to click on the top of the page or the URL first. Press  ↵ -  after focusing on skip-to-content-link to skip to the main content - below.{' '} - - This link will be skipped. - +  after focusing on skip-to-content-link to skip to the Custom Text + section.
-
- - This is the main content. Focus will be directed here from the - skip-to-content-link component.  - Tab again to focus on this link. -   - -
); }; From 4df97dffefecb440af35923df348faf0d399695f Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Tue, 5 Nov 2024 10:05:52 -0600 Subject: [PATCH 04/18] revert example changes --- examples/SkipToContentLink.customText.jsx | 24 +++++++++++++++++++---- examples/SkipToContentLink.main.jsx | 22 +++++++++++++++++---- 2 files changed, 38 insertions(+), 8 deletions(-) diff --git a/examples/SkipToContentLink.customText.jsx b/examples/SkipToContentLink.customText.jsx index a8efca5e6c1..499a779ef8e 100644 --- a/examples/SkipToContentLink.customText.jsx +++ b/examples/SkipToContentLink.customText.jsx @@ -7,16 +7,32 @@ import { SkipToContentLink, Text, Kbd, Anchor } from '@itwin/itwinui-react'; export default () => { return ( <> - Go to Props + + Go to main content + This is not the main content. Press  tab to see skip-to-content-link component. You might need to click on the top of the page or the URL first. Press  ↵ -  after focusing on skip-to-content-link to skip to the Props - section. -
+  after focusing on skip-to-content-link to skip to the main content + below. This link will be skipped.
+
+ + This is the main content. Focus will be directed here from the + skip-to-content-link component.  + Tab again to focus on this link. +   + +
); }; diff --git a/examples/SkipToContentLink.main.jsx b/examples/SkipToContentLink.main.jsx index 82ba5844e8d..92f38c17ff5 100644 --- a/examples/SkipToContentLink.main.jsx +++ b/examples/SkipToContentLink.main.jsx @@ -7,16 +7,30 @@ import { SkipToContentLink, Text, Kbd, Anchor } from '@itwin/itwinui-react'; export default () => { return ( <> - + This is not the main content. Press  tab to see skip-to-content-link component. You might need to click on the top of the page or the URL first. Press  ↵ -  after focusing on skip-to-content-link to skip to the Custom Text - section. -
+  after focusing on skip-to-content-link to skip to the main content + below. This link will be skipped.
+
+ + This is the main content. Focus will be directed here from the + skip-to-content-link component.  + Tab again to focus on this link. +   + +
); }; From 602b8d88537314baebea68eaf1624ac75fd13b93 Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Tue, 5 Nov 2024 10:19:31 -0600 Subject: [PATCH 05/18] revert example changes --- examples/SkipToContentLink.customText.css | 6 ++++++ examples/SkipToContentLink.customText.jsx | 9 +-------- examples/SkipToContentLink.main.css | 6 ++++++ examples/SkipToContentLink.main.jsx | 9 +-------- 4 files changed, 14 insertions(+), 16 deletions(-) create mode 100644 examples/SkipToContentLink.customText.css create mode 100644 examples/SkipToContentLink.main.css diff --git a/examples/SkipToContentLink.customText.css b/examples/SkipToContentLink.customText.css new file mode 100644 index 00000000000..2197b7c35e4 --- /dev/null +++ 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 index 499a779ef8e..2c52427ce0d 100644 --- a/examples/SkipToContentLink.customText.jsx +++ b/examples/SkipToContentLink.customText.jsx @@ -18,14 +18,7 @@ export default () => {  after focusing on skip-to-content-link to skip to the main content below. This link will be skipped.
-
+
This is the main content. Focus will be directed here from the skip-to-content-link component.  diff --git a/examples/SkipToContentLink.main.css b/examples/SkipToContentLink.main.css new file mode 100644 index 00000000000..9ad189e04a5 --- /dev/null +++ b/examples/SkipToContentLink.main.css @@ -0,0 +1,6 @@ +.main-content { + border: solid 1px var(--iui-color-border); + height: 300px; + padding: 11px 12px; + margin: 10px; +} diff --git a/examples/SkipToContentLink.main.jsx b/examples/SkipToContentLink.main.jsx index 92f38c17ff5..b2b8e9c0fd4 100644 --- a/examples/SkipToContentLink.main.jsx +++ b/examples/SkipToContentLink.main.jsx @@ -16,14 +16,7 @@ export default () => {  after focusing on skip-to-content-link to skip to the main content below. This link will be skipped.
-
+
This is the main content. Focus will be directed here from the skip-to-content-link component.  From c054d95e148406f179aa588d7041cf0a634177de Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Wed, 6 Nov 2024 15:13:19 -0600 Subject: [PATCH 06/18] modified examples --- .../src/content/docs/skiptocontentlink.mdx | 22 +++++++--- examples/SkipToContentLink.customText.css | 7 +--- examples/SkipToContentLink.customText.jsx | 42 +++++++++++-------- examples/SkipToContentLink.main.css | 7 +--- examples/SkipToContentLink.main.jsx | 40 ++++++++++-------- 5 files changed, 67 insertions(+), 51 deletions(-) diff --git a/apps/website/src/content/docs/skiptocontentlink.mdx b/apps/website/src/content/docs/skiptocontentlink.mdx index 1e88bfc725e..814f8086edd 100644 --- a/apps/website/src/content/docs/skiptocontentlink.mdx +++ b/apps/website/src/content/docs/skiptocontentlink.mdx @@ -1,23 +1,33 @@ --- -title: Skip to content link +title: SkipToContentLink description: A skip-to-content link can be used to navigate directly to certain desired contents. thumbnail: #TODO --- -

{frontmatter.description}

+The skip-to-content link 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. - +```jsx +
+ +
{/* Some page headers and introduction */}
+ +
+ Main Content + {/* Some main content that needs to be focused */} +
+ +
{/* Some page footer */}
+
+``` ## 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. +The `href` prop should be set to the `id` of the main content section, and the value must include the `"#"` prefix. In order to see skip-to-content-link component, end users might click on top of the page or the URL first then press `Tab` for the component to appear from the top. The main content can then be navigated to after the end users click on the component or hit `Enter`. -**Note**: `SkipToContentLink` must be placed inside a ``. - ### 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". diff --git a/examples/SkipToContentLink.customText.css b/examples/SkipToContentLink.customText.css index 2197b7c35e4..947f2c32142 100644 --- a/examples/SkipToContentLink.customText.css +++ b/examples/SkipToContentLink.customText.css @@ -1,6 +1,3 @@ -.main-content { - border: solid 1px var(--iui-color-border); - height: 300px; - padding: 11px 12px; - margin-top: 10px; +.demo-section { + width: 100%; } diff --git a/examples/SkipToContentLink.customText.jsx b/examples/SkipToContentLink.customText.jsx index 2c52427ce0d..78f5f8acc2e 100644 --- a/examples/SkipToContentLink.customText.jsx +++ b/examples/SkipToContentLink.customText.jsx @@ -2,30 +2,36 @@ * 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'; +import { Flex, SkipToContentLink, Text } from '@itwin/itwinui-react'; export default () => { return ( - <> + - Go to main content + Go to Main Section - - This is not the main content. Press  - tab to see skip-to-content-link component. You might - need to click on the top of the page or the URL first. Press  - ↵ -  after focusing on skip-to-content-link to skip to the main content - below. This link will be skipped.
- -
+ Page Header + + + Introduction + + Some introduction text that explains what this page is about. + + + + Main Section + + Some main content that the user is interested in, which should be + focused on when the skip link is clicked. + + + + Conclusion - This is the main content. Focus will be directed here from the - skip-to-content-link component.  - Tab again to focus on this link. -   + Some conclusion text that summarizes what the user has learned from + this page. -
- + + ); }; diff --git a/examples/SkipToContentLink.main.css b/examples/SkipToContentLink.main.css index 9ad189e04a5..947f2c32142 100644 --- a/examples/SkipToContentLink.main.css +++ b/examples/SkipToContentLink.main.css @@ -1,6 +1,3 @@ -.main-content { - border: solid 1px var(--iui-color-border); - height: 300px; - padding: 11px 12px; - margin: 10px; +.demo-section { + width: 100%; } diff --git a/examples/SkipToContentLink.main.jsx b/examples/SkipToContentLink.main.jsx index b2b8e9c0fd4..43e2853e8d6 100644 --- a/examples/SkipToContentLink.main.jsx +++ b/examples/SkipToContentLink.main.jsx @@ -2,28 +2,34 @@ * 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'; +import { Flex, SkipToContentLink, Text } from '@itwin/itwinui-react'; export default () => { return ( - <> + - - This is not the main content. Press  - tab to see skip-to-content-link component. You might - need to click on the top of the page or the URL first. Press  - ↵ -  after focusing on skip-to-content-link to skip to the main content - below. This link will be skipped.
- -
+ Page Header + + + Introduction + + Some introduction text that explains what this page is about. + + + + Main Content + + Some main content that the user is interested in, which should be + focused on when the skip link is clicked. + + + + Conclusion - This is the main content. Focus will be directed here from the - skip-to-content-link component.  - Tab again to focus on this link. -   + Some conclusion text that summarizes what the user has learned from + this page. -
- + + ); }; From a800e8211ab2977707836361632a3f2a5d66cce4 Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Wed, 6 Nov 2024 16:46:24 -0600 Subject: [PATCH 07/18] description wording --- apps/website/src/content/docs/skiptocontentlink.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/src/content/docs/skiptocontentlink.mdx b/apps/website/src/content/docs/skiptocontentlink.mdx index 814f8086edd..8cf22983578 100644 --- a/apps/website/src/content/docs/skiptocontentlink.mdx +++ b/apps/website/src/content/docs/skiptocontentlink.mdx @@ -1,6 +1,6 @@ --- title: SkipToContentLink -description: A skip-to-content link can be used to navigate directly to certain desired contents. +description: A skip-to-content link helps keyboard users quickly navigate to the main content. thumbnail: #TODO --- From c5f60651d900a0e7db0c9451a55276018e5db45d Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Thu, 7 Nov 2024 11:47:11 -0600 Subject: [PATCH 08/18] changed examples and wording --- .../src/content/docs/skiptocontentlink.mdx | 31 +++++++++++------ examples/SkipToContentLink.customText.jsx | 34 +++++-------------- examples/SkipToContentLink.main.jsx | 32 ++++------------- 3 files changed, 36 insertions(+), 61 deletions(-) diff --git a/apps/website/src/content/docs/skiptocontentlink.mdx b/apps/website/src/content/docs/skiptocontentlink.mdx index 8cf22983578..9e8de6fd92c 100644 --- a/apps/website/src/content/docs/skiptocontentlink.mdx +++ b/apps/website/src/content/docs/skiptocontentlink.mdx @@ -6,23 +6,34 @@ thumbnail: #TODO The skip-to-content link 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. +## Usage + +The skip link setup requires two elements: + +- The target element to skip to. +- The link pointing to the target. + ```jsx
- -
{/* Some page headers and introduction */}
- -
- Main Content - {/* Some main content that needs to be focused */} -
+ + {/* Other elements such as header, navigation, etc. */} -
{/* Some page footer */}
+
{/* Some main content that will be skipped to */}
``` -## Usage +The `href` prop can 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 {5} +
+ + {/* Other elements such as header, navigation, etc. */} + +
{/* Some main content that will be skipped to */}
+
+``` -The `href` prop should be set to the `id` of the main content section, and the value must include the `"#"` prefix. In order to see skip-to-content-link component, end users might click on top of the page or the URL first then press `Tab` for the component to appear from the top. The main content can then be navigated to after the end users click on the component or hit `Enter`. +The skip link is visually hidden from view end users focus to it. Users typically access the link by pressing `Tab` at the start of the page, making it visible to those navigating through the page via keyboard. diff --git a/examples/SkipToContentLink.customText.jsx b/examples/SkipToContentLink.customText.jsx index 78f5f8acc2e..1c0c5eb50f9 100644 --- a/examples/SkipToContentLink.customText.jsx +++ b/examples/SkipToContentLink.customText.jsx @@ -2,36 +2,18 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import { Flex, SkipToContentLink, Text } from '@itwin/itwinui-react'; +import { Kbd, SkipToContentLink } from '@itwin/itwinui-react'; export default () => { return ( - + <> - Go to Main Section + Go to main section - Page Header - - - Introduction - - Some introduction text that explains what this page is about. - - - - Main Section - - Some main content that the user is interested in, which should be - focused on when the skip link is clicked. - - - - Conclusion - - Some conclusion text that summarizes what the user has learned from - this page. - - - +
+ To view the skip link, click inside this box then press Enter + . +
+ ); }; diff --git a/examples/SkipToContentLink.main.jsx b/examples/SkipToContentLink.main.jsx index 43e2853e8d6..fbc65a92e4d 100644 --- a/examples/SkipToContentLink.main.jsx +++ b/examples/SkipToContentLink.main.jsx @@ -2,34 +2,16 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import { Flex, SkipToContentLink, Text } from '@itwin/itwinui-react'; +import { Kbd, SkipToContentLink } from '@itwin/itwinui-react'; export default () => { return ( - + <> - Page Header - - - Introduction - - Some introduction text that explains what this page is about. - - - - Main Content - - Some main content that the user is interested in, which should be - focused on when the skip link is clicked. - - - - Conclusion - - Some conclusion text that summarizes what the user has learned from - this page. - - - +
+ To view the skip link, click inside this box then press Enter + . +
+ ); }; From aa63244c2f456bd2f4c157ee4a471d6fed8b4368 Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Thu, 7 Nov 2024 11:51:23 -0600 Subject: [PATCH 09/18] typo --- examples/SkipToContentLink.customText.jsx | 3 +-- examples/SkipToContentLink.main.jsx | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/examples/SkipToContentLink.customText.jsx b/examples/SkipToContentLink.customText.jsx index 1c0c5eb50f9..3dd57261827 100644 --- a/examples/SkipToContentLink.customText.jsx +++ b/examples/SkipToContentLink.customText.jsx @@ -11,8 +11,7 @@ export default () => { Go to main section
- To view the skip link, click inside this box then press Enter - . + To view the skip link, click inside this box then press Tab.
); diff --git a/examples/SkipToContentLink.main.jsx b/examples/SkipToContentLink.main.jsx index fbc65a92e4d..298a264b525 100644 --- a/examples/SkipToContentLink.main.jsx +++ b/examples/SkipToContentLink.main.jsx @@ -9,8 +9,7 @@ export default () => { <>
- To view the skip link, click inside this box then press Enter - . + To view the skip link, click inside this box then press Tab.
); From ccf8a97f0191c090fa31303f74a817c2ded28579 Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Thu, 7 Nov 2024 12:26:56 -0600 Subject: [PATCH 10/18] more wording --- .../src/content/docs/skiptocontentlink.mdx | 19 ++++++++----------- examples/SkipToContentLink.customText.jsx | 2 +- 2 files changed, 9 insertions(+), 12 deletions(-) diff --git a/apps/website/src/content/docs/skiptocontentlink.mdx b/apps/website/src/content/docs/skiptocontentlink.mdx index 9e8de6fd92c..fb6187adcf7 100644 --- a/apps/website/src/content/docs/skiptocontentlink.mdx +++ b/apps/website/src/content/docs/skiptocontentlink.mdx @@ -4,6 +4,12 @@ description: A skip-to-content link helps keyboard users quickly navigate to the thumbnail: #TODO --- +

{frontmatter.description}

+ +```jsx + +``` + The skip-to-content link 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. ## Usage @@ -13,15 +19,6 @@ The skip link setup requires two elements: - The target element to skip to. - The link pointing to the target. -```jsx -
- - {/* Other elements such as header, navigation, etc. */} - -
{/* Some main content that will be skipped to */}
-
-``` - The `href` prop can 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 {5} @@ -33,7 +30,7 @@ The `href` prop can be used to direct focus to the target element. This prop mus
``` -The skip link is visually hidden from view end users focus to it. Users typically access the link by pressing `Tab` at the start of the page, making it visible to those navigating through the page via keyboard. +As the skip link is visually hidden from view until focused, users typically access the link by pressing `Tab` 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 screen readers get to and that keyboard users are able to navigate to using the keyboard. @@ -41,7 +38,7 @@ The skip link is visually hidden from view end users focus to it. Users typicall ### 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". +As the link is designed for screen reader users, localization is crucial for making the application accessible and understandable. The skip link component accepts custom text through its `children` prop, allowing end users to provide a localized message. If no custom text is provided, the default text displayed is "Skip to main content". This flexibility helps create a more inclusive and user-friendly experience for a global audience. diff --git a/examples/SkipToContentLink.customText.jsx b/examples/SkipToContentLink.customText.jsx index 3dd57261827..12619117714 100644 --- a/examples/SkipToContentLink.customText.jsx +++ b/examples/SkipToContentLink.customText.jsx @@ -8,7 +8,7 @@ export default () => { return ( <> - Go to main section + Skip main navigation
To view the skip link, click inside this box then press Tab. From 2e9164e750b17cf96d546e9f230a2beda73de25f Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Thu, 7 Nov 2024 12:37:32 -0600 Subject: [PATCH 11/18] more wording --- apps/website/src/content/docs/skiptocontentlink.mdx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/apps/website/src/content/docs/skiptocontentlink.mdx b/apps/website/src/content/docs/skiptocontentlink.mdx index fb6187adcf7..af7a7b5aaa0 100644 --- a/apps/website/src/content/docs/skiptocontentlink.mdx +++ b/apps/website/src/content/docs/skiptocontentlink.mdx @@ -17,7 +17,7 @@ The skip-to-content link is designed for screen reader and keyboard users and wi The skip link setup requires two elements: - The target element to skip to. -- The link pointing to the target. +- The link pointing to that target element. The `href` prop can 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. @@ -30,7 +30,7 @@ The `href` prop can be used to direct focus to the target element. This prop mus
``` -As the skip link is visually hidden from view until focused, users typically access the link by pressing `Tab` 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 screen readers get to and that keyboard users are able to navigate to using the keyboard. +As the skip link is visually hidden from view until focused, users typically access the link by pressing `Tab` 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 the screen readers get to and that keyboard users are able to navigate to using the keyboard. @@ -38,7 +38,9 @@ As the skip link is visually hidden from view until focused, users typically acc ### Custom Text -As the link is designed for screen reader users, localization is crucial for making the application accessible and understandable. The skip link component accepts custom text through its `children` prop, allowing end users to provide a localized message. If no custom text is provided, the default text displayed is "Skip to main content". This flexibility helps create a more inclusive and user-friendly experience for a global audience. +As the link is designed for screen reader users, localization is crucial for making the application accessible and understandable. The skip link component accepts custom text through its `children` prop, allowing end users to provide a localized message. + +If no custom text is provided, the default text displayed is "Skip to main content". This flexibility helps create a more inclusive and user-friendly experience for a global audience. From 0105931d87a56f91e4f78e13c8f26bab0622a8db Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Thu, 7 Nov 2024 13:02:43 -0600 Subject: [PATCH 12/18] more explanation in intro --- apps/website/src/content/docs/skiptocontentlink.mdx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/apps/website/src/content/docs/skiptocontentlink.mdx b/apps/website/src/content/docs/skiptocontentlink.mdx index af7a7b5aaa0..07a2e45c65d 100644 --- a/apps/website/src/content/docs/skiptocontentlink.mdx +++ b/apps/website/src/content/docs/skiptocontentlink.mdx @@ -10,11 +10,13 @@ thumbnail: #TODO ``` -The skip-to-content link 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. +In some applications, there are many navigation links and other focusable elements that might require a lot of keyboard presses before users reach their desired content. What is more, if users tab into a link that leads to another page with the same structure, they must tab through the same list of non-essential links again. + +While this may not be an issue for sighted or 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, designed for screen-reader and keyboard users. ## Usage -The skip link setup requires two elements: +The `SkipToContentLink` component setup requires two elements: - The target element to skip to. - The link pointing to that target element. From da92a8c84d7992efa0760aabe9cb49eb207314f7 Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Thu, 7 Nov 2024 13:04:42 -0600 Subject: [PATCH 13/18] more explanation in intro --- apps/website/src/content/docs/skiptocontentlink.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/src/content/docs/skiptocontentlink.mdx b/apps/website/src/content/docs/skiptocontentlink.mdx index 07a2e45c65d..ddcc54e6aa3 100644 --- a/apps/website/src/content/docs/skiptocontentlink.mdx +++ b/apps/website/src/content/docs/skiptocontentlink.mdx @@ -10,7 +10,7 @@ thumbnail: #TODO ``` -In some applications, there are many navigation links and other focusable elements that might require a lot of keyboard presses before users reach their desired content. What is more, if users tab into a link that leads to another page with the same structure, they must tab through the same list of non-essential links again. +In some 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 tab into a link that leads to another page with the same structure, they must tab through the same list of non-essential links again. While this may not be an issue for sighted or 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, designed for screen-reader and keyboard users. From e05ab6b0bbf404b4353e1cf4627b766151e49a8b Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Thu, 7 Nov 2024 13:17:40 -0600 Subject: [PATCH 14/18] removed redundancies --- apps/website/src/content/docs/skiptocontentlink.mdx | 8 ++++---- examples/SkipToContentLink.customText.css | 3 --- examples/SkipToContentLink.main.css | 3 --- 3 files changed, 4 insertions(+), 10 deletions(-) delete mode 100644 examples/SkipToContentLink.customText.css delete mode 100644 examples/SkipToContentLink.main.css diff --git a/apps/website/src/content/docs/skiptocontentlink.mdx b/apps/website/src/content/docs/skiptocontentlink.mdx index ddcc54e6aa3..cdad21ca13f 100644 --- a/apps/website/src/content/docs/skiptocontentlink.mdx +++ b/apps/website/src/content/docs/skiptocontentlink.mdx @@ -6,14 +6,14 @@ thumbnail: #TODO

{frontmatter.description}

-```jsx - -``` - In some 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 tab into a link that leads to another page with the same structure, they must tab through the same list of non-essential links again. While this may not be an issue for sighted or 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, designed for screen-reader and keyboard users. +```jsx + +``` + ## Usage The `SkipToContentLink` component setup requires two elements: diff --git a/examples/SkipToContentLink.customText.css b/examples/SkipToContentLink.customText.css deleted file mode 100644 index 947f2c32142..00000000000 --- a/examples/SkipToContentLink.customText.css +++ /dev/null @@ -1,3 +0,0 @@ -.demo-section { - width: 100%; -} diff --git a/examples/SkipToContentLink.main.css b/examples/SkipToContentLink.main.css deleted file mode 100644 index 947f2c32142..00000000000 --- a/examples/SkipToContentLink.main.css +++ /dev/null @@ -1,3 +0,0 @@ -.demo-section { - width: 100%; -} From 4a13cc0b7c2f0d21ea17904b1e24f3ea25d5318b Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Mon, 11 Nov 2024 16:29:36 -0600 Subject: [PATCH 15/18] make skip link appear from the top --- .../src/content/docs/skiptocontentlink.mdx | 24 +++++++++---------- examples/SkipToContentLink.customText.css | 10 ++++++++ examples/SkipToContentLink.customText.jsx | 6 ++--- examples/SkipToContentLink.main.css | 10 ++++++++ examples/SkipToContentLink.main.jsx | 6 ++--- 5 files changed, 38 insertions(+), 18 deletions(-) create mode 100644 examples/SkipToContentLink.customText.css create mode 100644 examples/SkipToContentLink.main.css diff --git a/apps/website/src/content/docs/skiptocontentlink.mdx b/apps/website/src/content/docs/skiptocontentlink.mdx index cdad21ca13f..f0c416958ba 100644 --- a/apps/website/src/content/docs/skiptocontentlink.mdx +++ b/apps/website/src/content/docs/skiptocontentlink.mdx @@ -6,13 +6,9 @@ thumbnail: #TODO

{frontmatter.description}

-In some 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 tab into a link that leads to another page with the same structure, they must tab through the same list of non-essential links again. +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 or 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, designed for screen-reader and keyboard users. - -```jsx - -``` +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 @@ -21,18 +17,22 @@ The `SkipToContentLink` component setup requires two elements: - The target element to skip to. - The link pointing to that target element. -The `href` prop can 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 + +``` + +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 {5} +```jsx {2}
{/* Other elements such as header, navigation, etc. */} -
{/* Some main content that will be skipped to */}
+
{/* Main content that will be skipped to */}
``` -As the skip link is visually hidden from view until focused, users typically access the link by pressing `Tab` 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 the screen readers get to and that keyboard users are able to navigate to using the keyboard. +As the skip link is visually hidden from view until focused, users typically access the link by pressing Tab 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. @@ -40,9 +40,9 @@ As the skip link is visually hidden from view until focused, users typically acc ### Custom Text -As the link is designed for screen reader users, localization is crucial for making the application accessible and understandable. The skip link component accepts custom text through its `children` prop, allowing end users to provide a localized message. +The skip link component accepts custom text through its `children` prop, which is especially useful for providing a localized message. -If no custom text is provided, the default text displayed is "Skip to main content". This flexibility helps create a more inclusive and user-friendly experience for a global audience. +If no `children` is passed, the default text displayed is "Skip to main content". diff --git a/examples/SkipToContentLink.customText.css b/examples/SkipToContentLink.customText.css new file mode 100644 index 00000000000..5e27404b0e2 --- /dev/null +++ b/examples/SkipToContentLink.customText.css @@ -0,0 +1,10 @@ +.demo-container { + min-height: 300px; + position: relative; + display: flex; + align-items: center; +} + +.skip-link { + position: absolute; +} diff --git a/examples/SkipToContentLink.customText.jsx b/examples/SkipToContentLink.customText.jsx index 12619117714..9342eb0036c 100644 --- a/examples/SkipToContentLink.customText.jsx +++ b/examples/SkipToContentLink.customText.jsx @@ -6,13 +6,13 @@ import { Kbd, SkipToContentLink } from '@itwin/itwinui-react'; export default () => { return ( - <> - +
+ Skip main navigation
To view the skip link, click inside this box then press Tab.
- +
); }; diff --git a/examples/SkipToContentLink.main.css b/examples/SkipToContentLink.main.css new file mode 100644 index 00000000000..5e27404b0e2 --- /dev/null +++ b/examples/SkipToContentLink.main.css @@ -0,0 +1,10 @@ +.demo-container { + min-height: 300px; + position: relative; + display: flex; + align-items: center; +} + +.skip-link { + position: absolute; +} diff --git a/examples/SkipToContentLink.main.jsx b/examples/SkipToContentLink.main.jsx index 298a264b525..e4dda3db45b 100644 --- a/examples/SkipToContentLink.main.jsx +++ b/examples/SkipToContentLink.main.jsx @@ -6,11 +6,11 @@ import { Kbd, SkipToContentLink } from '@itwin/itwinui-react'; export default () => { return ( - <> - +
+
To view the skip link, click inside this box then press Tab.
- +
); }; From 07c4193ca78b9024db444574701f114b1dcbd59e Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Tue, 12 Nov 2024 13:36:06 -0600 Subject: [PATCH 16/18] modified demo --- .../src/content/docs/skiptocontentlink.mdx | 19 ++++++++++++------- examples/SkipToContentLink.customText.css | 10 ---------- examples/SkipToContentLink.customText.jsx | 18 ------------------ examples/SkipToContentLink.main.css | 8 ++------ examples/SkipToContentLink.main.jsx | 12 ++++++++---- examples/index.tsx | 6 ------ 6 files changed, 22 insertions(+), 51 deletions(-) delete mode 100644 examples/SkipToContentLink.customText.css delete mode 100644 examples/SkipToContentLink.customText.jsx diff --git a/apps/website/src/content/docs/skiptocontentlink.mdx b/apps/website/src/content/docs/skiptocontentlink.mdx index f0c416958ba..b7d4e2353cc 100644 --- a/apps/website/src/content/docs/skiptocontentlink.mdx +++ b/apps/website/src/content/docs/skiptocontentlink.mdx @@ -6,6 +6,10 @@ thumbnail: #TODO

{frontmatter.description}

+ + + + 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. @@ -34,19 +38,20 @@ The `href` prop should be used to direct focus to the target element. This prop As the skip link is visually hidden from view until focused, users typically access the link by pressing Tab 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} +
+ Skip main navigation + {/* Other elements such as header, navigation, etc. */} + +
{/* Main content that will be skipped to */}
+
+``` ## Props diff --git a/examples/SkipToContentLink.customText.css b/examples/SkipToContentLink.customText.css deleted file mode 100644 index 5e27404b0e2..00000000000 --- a/examples/SkipToContentLink.customText.css +++ /dev/null @@ -1,10 +0,0 @@ -.demo-container { - min-height: 300px; - position: relative; - display: flex; - align-items: center; -} - -.skip-link { - position: absolute; -} diff --git a/examples/SkipToContentLink.customText.jsx b/examples/SkipToContentLink.customText.jsx deleted file mode 100644 index 9342eb0036c..00000000000 --- a/examples/SkipToContentLink.customText.jsx +++ /dev/null @@ -1,18 +0,0 @@ -/*--------------------------------------------------------------------------------------------- - * Copyright (c) Bentley Systems, Incorporated. All rights reserved. - * See LICENSE.md in the project root for license terms and full copyright notice. - *--------------------------------------------------------------------------------------------*/ -import { Kbd, SkipToContentLink } from '@itwin/itwinui-react'; - -export default () => { - return ( -
- - Skip main navigation - -
- To view the skip link, click inside this box then press Tab. -
-
- ); -}; diff --git a/examples/SkipToContentLink.main.css b/examples/SkipToContentLink.main.css index 5e27404b0e2..92ff2008a11 100644 --- a/examples/SkipToContentLink.main.css +++ b/examples/SkipToContentLink.main.css @@ -1,10 +1,6 @@ .demo-container { - min-height: 300px; - position: relative; display: flex; align-items: center; -} - -.skip-link { - position: absolute; + min-height: 300px; + transform: translateX(0); } diff --git a/examples/SkipToContentLink.main.jsx b/examples/SkipToContentLink.main.jsx index e4dda3db45b..6ad406f695e 100644 --- a/examples/SkipToContentLink.main.jsx +++ b/examples/SkipToContentLink.main.jsx @@ -2,15 +2,19 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import { Kbd, SkipToContentLink } from '@itwin/itwinui-react'; +import { Button, Kbd, SkipToContentLink } from '@itwin/itwinui-react'; export default () => { return (
- -
- To view the skip link, click inside this box then press Tab. +
+ then press Tab to see the skip + link.
+ {/* 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. */} +
); }; diff --git a/examples/index.tsx b/examples/index.tsx index 791d12626cc..12306db49cf 100644 --- a/examples/index.tsx +++ b/examples/index.tsx @@ -1080,12 +1080,6 @@ const SkipToContentLinkMainExample = withThemeProvider( ); export { SkipToContentLinkMainExample }; -import { default as SkipToContentLinkCustomTextExampleRaw } from './SkipToContentLink.customText'; -const SkipToContentLinkCustomTextExample = withThemeProvider( - SkipToContentLinkCustomTextExampleRaw, -); -export { SkipToContentLinkCustomTextExample }; - // ---------------------------------------------------------------------------- import { default as SliderMainExampleRaw } from './Slider.main'; From 4dc7f2bd764a9953d1e23bf570e3b36e5d7aad13 Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Tue, 12 Nov 2024 13:38:01 -0600 Subject: [PATCH 17/18] renamed id --- apps/website/src/content/docs/skiptocontentlink.mdx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/website/src/content/docs/skiptocontentlink.mdx b/apps/website/src/content/docs/skiptocontentlink.mdx index b7d4e2353cc..46bc7f7b4db 100644 --- a/apps/website/src/content/docs/skiptocontentlink.mdx +++ b/apps/website/src/content/docs/skiptocontentlink.mdx @@ -22,17 +22,17 @@ The `SkipToContentLink` component setup requires two elements: - The link pointing to that target element. ```jsx - + ``` 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}
- + {/* Other elements such as header, navigation, etc. */} -
{/* Main content that will be skipped to */}
+
{/* Main content that will be skipped to */}
``` @@ -46,10 +46,10 @@ If no `children` is passed, the default text displayed is "Skip to main content" ```jsx {2}
- Skip main navigation + Skip main navigation {/* Other elements such as header, navigation, etc. */} -
{/* Main content that will be skipped to */}
+
{/* Main content that will be skipped to */}
``` From 693f5264413046f883b30d338d7b74a1e9f8d2b7 Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Tue, 12 Nov 2024 14:20:41 -0600 Subject: [PATCH 18/18] added css comment and used normal button and kbd --- examples/SkipToContentLink.main.css | 4 +++- examples/SkipToContentLink.main.jsx | 4 ++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/examples/SkipToContentLink.main.css b/examples/SkipToContentLink.main.css index 92ff2008a11..47d046ace69 100644 --- a/examples/SkipToContentLink.main.css +++ b/examples/SkipToContentLink.main.css @@ -1,6 +1,8 @@ .demo-container { display: flex; align-items: center; + justify-content: center; min-height: 300px; - transform: translateX(0); + width: 100%; + transform: translateX(0); /* creates containing block for position: fixed */ } diff --git a/examples/SkipToContentLink.main.jsx b/examples/SkipToContentLink.main.jsx index 6ad406f695e..2cf068c1c15 100644 --- a/examples/SkipToContentLink.main.jsx +++ b/examples/SkipToContentLink.main.jsx @@ -2,13 +2,13 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import { Button, Kbd, SkipToContentLink } from '@itwin/itwinui-react'; +import { SkipToContentLink } from '@itwin/itwinui-react'; export default () => { return (
- then press Tab to see the skip + then press Tab to see the skip link.
{/* The SkipToContentLink component should normally be placed at the