Skip to content

Commit dbf81e6

Browse files
authored
chore(code block): update aria labels in examples (#11748)
* chore(code block): update aria labels in examples * updated toggle text * fixed casing
1 parent 87c1961 commit dbf81e6

File tree

2 files changed

+11
-4
lines changed

2 files changed

+11
-4
lines changed

packages/react-core/src/components/CodeBlock/examples/CodeBlockBasic.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
3838
<ClipboardCopyButton
3939
id="basic-copy-button"
4040
textId="code-content"
41-
aria-label="Copy to clipboard"
41+
aria-label="Copy to clipboard basic example code block"
4242
onClick={(e) => onClick(e, code)}
4343
exitDelay={copied ? 1500 : 600}
4444
maxWidth="110px"

packages/react-core/src/components/CodeBlock/examples/CodeBlockExpandable.tsx

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export const ExpandableCodeBlock: React.FunctionComponent = () => {
1717
const [isRunning, setisRunning] = useState(false);
1818
const runText: string = 'Run in web terminal';
1919
const doneRunText: string = 'Running in web terminal';
20+
const toggleId: string = 'expandable-code-toggle';
2021

2122
const onToggle = (isExpanded) => {
2223
setIsExpanded(isExpanded);
@@ -85,12 +86,18 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
8586
<CodeBlock actions={actions}>
8687
<CodeBlockCode>
8788
{code}
88-
<ExpandableSection isExpanded={isExpanded} isDetached contentId="code-block-expand">
89+
<ExpandableSection isExpanded={isExpanded} isDetached contentId="code-block-expand" toggleId={toggleId}>
8990
{expandedCode}
9091
</ExpandableSection>
9192
</CodeBlockCode>
92-
<ExpandableSectionToggle isExpanded={isExpanded} onToggle={onToggle} contentId="code-block-expand" direction="up">
93-
{isExpanded ? 'Show Less' : 'Show More'}
93+
<ExpandableSectionToggle
94+
isExpanded={isExpanded}
95+
onToggle={onToggle}
96+
contentId="code-block-expand"
97+
direction="up"
98+
toggleId={toggleId}
99+
>
100+
{isExpanded ? 'Show less expandable example content' : 'Show more expandable example content'}
94101
</ExpandableSectionToggle>
95102
</CodeBlock>
96103
);

0 commit comments

Comments
 (0)