Skip to content

Commit

Permalink
Fix issues with StructuredList code example tab index (#3641)
Browse files Browse the repository at this point in the history 
* fix(StructuredList): remove tabindex from StructuredList

* fix(StructuredList): fix arrow selection

---------

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
  • Loading branch information
@tw15egan @kodiakhq
tw15egan and kodiakhq[bot] authored Jul 17, 2023
1 parent a0d9403 commit 282ad87
Show file tree
Hide file tree
Showing 2 changed files with 74 additions and 102 deletions.
88 changes: 37 additions & 51 deletions src/pages/components/structured-list/code.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,10 +90,7 @@ code usage documentation, see the Storybooks for each framework below.
{`
<StructuredListWrapper ariaLabel="Structured list">
<StructuredListHead>
<StructuredListRow
head
tabIndex={0}
>
<StructuredListRow head>
<StructuredListCell head>
ColumnA
</StructuredListCell>
Expand All @@ -106,7 +103,7 @@ code usage documentation, see the Storybooks for each framework below.
</StructuredListRow>
</StructuredListHead>
<StructuredListBody>
<StructuredListRow tabIndex={0}>
<StructuredListRow>
<StructuredListCell>
Row 1
</StructuredListCell>
Expand All @@ -117,7 +114,7 @@ code usage documentation, see the Storybooks for each framework below.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.
</StructuredListCell>
</StructuredListRow>
<StructuredListRow tabIndex={0}>
<StructuredListRow>
<StructuredListCell>
Row 2
</StructuredListCell>
Expand Down Expand Up @@ -147,89 +144,78 @@ code usage documentation, see the Storybooks for each framework below.
{`
<StructuredListWrapper selection ariaLabel="Structured list">
<StructuredListHead>
<StructuredListRow
head
tabIndex={0}
>
<StructuredListCell head>
ColumnA
</StructuredListCell>
<StructuredListCell head>
ColumnB
</StructuredListCell>
<StructuredListCell head>
ColumnC
</StructuredListCell>
<StructuredListCell head/>
<StructuredListRow head>
<StructuredListCell head>ColumnA</StructuredListCell>
<StructuredListCell head>ColumnB</StructuredListCell>
<StructuredListCell head>ColumnC</StructuredListCell>
</StructuredListRow>
</StructuredListHead>
<StructuredListBody>
<StructuredListRow tabIndex={0}>
<StructuredListCell>
Row 1
</StructuredListCell>
<StructuredListRow key="row-1">
<StructuredListCell>Row 1</StructuredListCell>
<StructuredListCell>Row 1</StructuredListCell>
<StructuredListCell>
Row 1
</StructuredListCell>
<StructuredListCell>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
vulputate nisl a porttitor interdum.
</StructuredListCell>
<StructuredListInput
id="row-1"
value="row-1"
title="row-1"
name="row-1"
defaultChecked
name="row-0"
onChange={() => {}}
/>
<StructuredListCell>
<StructuredListCell>
<CheckmarkFilled
className="cds--structured-list-svg"
aria-label="select an option">
<title>select an option</title>
</CheckmarkFilled>
</StructuredListCell>
</StructuredListRow>
<StructuredListRow tabIndex={0}>
<StructuredListCell>
Row 2
</StructuredListCell>
<StructuredListRow key="row-2">
<StructuredListCell>Row 2</StructuredListCell>
<StructuredListCell>Row 2</StructuredListCell>
<StructuredListCell>
Row 2
</StructuredListCell>
<StructuredListCell>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
vulputate nisl a porttitor interdum.
</StructuredListCell>
<StructuredListInput
id="row-2"
value="row-2"
title="row-2"
name="row-2"
name="row-0"
onChange={() => {}}
/>
<StructuredListCell>
<StructuredListCell>
<CheckmarkFilled
className="cds--structured-list-svg"
aria-label="select an option">
<title>select an option</title>
</CheckmarkFilled>
</StructuredListCell>
</StructuredListRow>
<StructuredListRow tabIndex={0}>
<StructuredListCell>
Row 3
</StructuredListCell>
<StructuredListRow key="row-3">
<StructuredListCell>Row 3</StructuredListCell>
<StructuredListCell>Row 3</StructuredListCell>
<StructuredListCell>
Row 3
</StructuredListCell>
<StructuredListCell>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
vulputate nisl a porttitor interdum.
</StructuredListCell>
<StructuredListInput
id="row-3"
value="row-3"
title="row-3"
name="row-3"
name="row-0"
onChange={() => {}}
/>
<StructuredListCell>
<StructuredListCell>
<CheckmarkFilled
className="cds--structured-list-svg"
aria-label="select an option">
Expand Down
88 changes: 37 additions & 51 deletions src/pages/components/structured-list/usage.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,10 +85,7 @@ import { CheckmarkFilled } from '@carbon/icons-react';
{`
<StructuredListWrapper ariaLabel="Structured list">
<StructuredListHead>
<StructuredListRow
head
tabIndex={0}
>
<StructuredListRow head>
<StructuredListCell head>
ColumnA
</StructuredListCell>
Expand All @@ -101,7 +98,7 @@ import { CheckmarkFilled } from '@carbon/icons-react';
</StructuredListRow>
</StructuredListHead>
<StructuredListBody>
<StructuredListRow tabIndex={0}>
<StructuredListRow>
<StructuredListCell>
Row 1
</StructuredListCell>
Expand All @@ -112,7 +109,7 @@ import { CheckmarkFilled } from '@carbon/icons-react';
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.
</StructuredListCell>
</StructuredListRow>
<StructuredListRow tabIndex={0}>
<StructuredListRow>
<StructuredListCell>
Row 2
</StructuredListCell>
Expand Down Expand Up @@ -142,89 +139,78 @@ import { CheckmarkFilled } from '@carbon/icons-react';
{`
<StructuredListWrapper selection ariaLabel="Structured list">
<StructuredListHead>
<StructuredListRow
head
tabIndex={0}
>
<StructuredListCell head>
ColumnA
</StructuredListCell>
<StructuredListCell head>
ColumnB
</StructuredListCell>
<StructuredListCell head>
ColumnC
</StructuredListCell>
<StructuredListCell head/>
<StructuredListRow head>
<StructuredListCell head>ColumnA</StructuredListCell>
<StructuredListCell head>ColumnB</StructuredListCell>
<StructuredListCell head>ColumnC</StructuredListCell>
</StructuredListRow>
</StructuredListHead>
<StructuredListBody>
<StructuredListRow tabIndex={0}>
<StructuredListCell>
Row 1
</StructuredListCell>
<StructuredListRow key="row-1">
<StructuredListCell>Row 1</StructuredListCell>
<StructuredListCell>Row 1</StructuredListCell>
<StructuredListCell>
Row 1
</StructuredListCell>
<StructuredListCell>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
vulputate nisl a porttitor interdum.
</StructuredListCell>
<StructuredListInput
id="row-1"
value="row-1"
title="row-1"
name="row-1"
defaultChecked
name="row-0"
onChange={() => {}}
/>
<StructuredListCell>
<StructuredListCell>
<CheckmarkFilled
className="cds--structured-list-svg"
aria-label="select an option">
<title>select an option</title>
</CheckmarkFilled>
</StructuredListCell>
</StructuredListRow>
<StructuredListRow tabIndex={0}>
<StructuredListCell>
Row 2
</StructuredListCell>
<StructuredListRow key="row-2">
<StructuredListCell>Row 2</StructuredListCell>
<StructuredListCell>Row 2</StructuredListCell>
<StructuredListCell>
Row 2
</StructuredListCell>
<StructuredListCell>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
vulputate nisl a porttitor interdum.
</StructuredListCell>
<StructuredListInput
id="row-2"
value="row-2"
title="row-2"
name="row-2"
name="row-0"
onChange={() => {}}
/>
<StructuredListCell>
<StructuredListCell>
<CheckmarkFilled
className="cds--structured-list-svg"
aria-label="select an option">
<title>select an option</title>
</CheckmarkFilled>
</StructuredListCell>
</StructuredListRow>
<StructuredListRow tabIndex={0}>
<StructuredListCell>
Row 3
</StructuredListCell>
<StructuredListRow key="row-3">
<StructuredListCell>Row 3</StructuredListCell>
<StructuredListCell>Row 3</StructuredListCell>
<StructuredListCell>
Row 3
</StructuredListCell>
<StructuredListCell>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
vulputate nisl a porttitor interdum.
</StructuredListCell>
<StructuredListInput
id="row-3"
value="row-3"
title="row-3"
name="row-3"
name="row-0"
onChange={() => {}}
/>
<StructuredListCell>
<StructuredListCell>
<CheckmarkFilled
className="cds--structured-list-svg"
aria-label="select an option">
Expand Down

1 comment on commit 282ad87

@vercel
Copy link

@vercel vercel bot commented on 282ad87 Jul 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

carbondesignsystem – ./

carbondesignsystem-carbon-design-system.vercel.app
carbondesignsystem-git-main-carbon-design-system.vercel.app
carbondesignsystem.vercel.app

Please sign in to comment.