Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix axe bugs #3982

Draft
wants to merge 5 commits into
base: main
Choose a base branch
from
Draft

Fix axe bugs #3982

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
eecef8d
fix testing accessibility list items
evwilkin Apr 23, 2024
0fcbf32
Merge remote-tracking branch 'upstream/main' into fix/3979-a11y-bugs
evwilkin May 2, 2024
eeb257f
fix(docs): fix HTML training a11y
evwilkin May 2, 2024
48b1339
fix html training ids
evwilkin May 9, 2024
862c83c
Merge remote-tracking branch 'upstream/main' into fix/3979-a11y-bugs
evwilkin May 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions ...ation-site/patternfly-docs/content/developer-resources/accessibility-testing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,10 +90,10 @@ This checklist includes some of the main areas that the PatternFly team checks f
<br/>
<Checkbox label={<span> <b> Labels: </b> </span>} body={<><Checkbox label=<span><b>Link</b> labels are descriptive, informative, and unique (unless they have the same URL).</span> id="accessibility-points-8a"/>

<Checkbox label={<span><b>Buttons and form controls:</b></span>} description={ <span>
<Checkbox label={<span><b>Buttons and form controls:</b></span>} description={ <ul>
<li> All form controls have clear and descriptive labels. </li>
<li> Expandable buttons display the expandable control and utilize <code className="ws-code">aria-expanded</code> to indicate that a button is expandable. <code className="ws-code">aria-expanded</code> should always have a boolean value if a button is meant to be expandable. </li>
</span>
</ul>
}
id="general-criteria-8b" />

Expand Down
18 changes: 10 additions & 8 deletions packages/documentation-site/patternfly-docs/content/training/copyCodeBlock/copyCodeBlock.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
import React from 'react';
import { CodeBlock, CodeBlockAction, CodeBlockCode, ClipboardCopyButton } from '@patternfly/react-core';
import {
CodeBlock,
CodeBlockAction,
CodeBlockCode,
ClipboardCopyButton,
} from '@patternfly/react-core';

export const CopyCodeBlock = ({
children
}) => {
export const CopyCodeBlock = ({ id, children }) => {
const [copied, setCopied] = React.useState(false);

const clipboardCopyFunc = (event, text) => {
Expand All @@ -19,10 +22,10 @@ export const CopyCodeBlock = ({
<React.Fragment>
<CodeBlockAction>
<ClipboardCopyButton
id="basic-copy-button"
id={`copy-${id}`}
textId="code-content"
aria-label="Copy to clipboard"
onClick={e => onClick(e, children)}
onClick={(e) => onClick(e, children)}
exitDelay={copied ? 1500 : 600}
maxWidth="110px"
variant="plain"
Expand All @@ -34,10 +37,9 @@ export const CopyCodeBlock = ({
</React.Fragment>
);


return (
<CodeBlock actions={actions}>
<CodeBlockCode id="code-content">{children}</CodeBlockCode>
<CodeBlockCode id={`${id}-content`}>{children}</CodeBlockCode>
</CodeBlock>
);
};
12 changes: 6 additions & 6 deletions ...es/documentation-site/patternfly-docs/content/training/html-css/fundamentals.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,13 +27,13 @@ In PatternFly, components are the basic building blocks of user interfaces. They
### Step 1. Add a button component.
Add a button element to the `<body>` of the `index.html` file. To apply PatternFly styling to the button, add the class `pf-v5-c-button`. To also apply ‘primary’ styling to the button and make it a bright blue color, add the `pf-m-primary` class.

<CopyCodeBlock>
<CopyCodeBlock id="button-code">
{`<button class="pf-v5-c-button pf-m-primary" type="button">\n Primary\n</button>`}
</CopyCodeBlock>

**Note:** A simple component can be reused multiple times.

<CopyCodeBlock>
<CopyCodeBlock id="buttons-code">
{`<button class="pf-v5-c-button pf-m-primary" type="button">
Primary\n</button>\n<button class="pf-v5-c-button pf-m-primary" type="button">
Primary\n</button>`}
Expand All @@ -47,7 +47,7 @@ In this step, add a badge component to the chip component.
#### Step 2.1
To build a chip component, replace the contents of the `<body>` in the index.html file with the following code snippet.

<CopyCodeBlock>
<CopyCodeBlock id="chip-code">
{`<div class="pf-v5-c-chip">
<span class="pf-v5-c-chip__text">
Chip
Expand All @@ -62,7 +62,7 @@ This is the default chip component that already has another component in it: the
#### Step 2.2
Add the badge inside the chip. To do this, add this block of code between `pf-v5-c-chip__text` and `pf-v5-c-button`.

<CopyCodeBlock>
<CopyCodeBlock id="badge-code">
{`<span class="pf-v5-c-badge pf-m-read">
7\n</span>`}
</CopyCodeBlock>
Expand All @@ -82,7 +82,7 @@ In PatternFly, layouts allow for organizing and grouping elements. This tutorial
### Step 1
Copy code into the `<body>` of the `index.html` file.

<CopyCodeBlock>
<CopyCodeBlock id="card-code">
{`<div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__title">
Expand Down Expand Up @@ -114,7 +114,7 @@ Create a form demo using components and layouts.
### Step 1. Add five form components
Copy and paste this block of code 5 times in the index.html file.

<CopyCodeBlock>
<CopyCodeBlock id="form-code">
{`<form class="pf-v5-c-form">
<div class="pf-v5-c-form__group">
<div class="pf-v5-c-form__group-label">
Expand Down