Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,8 @@ To facilitate building a compass layout, there are several useful variants and p
- `isNav` on [Tabs](/components/tabs#tabs-used-for-site-navigation). This flag enables a new styling of `Tabs` to be used as a top site navigation.
- `isCircle` on [Button](/components/button#circle-buttons) and [MenuToggle](/components/menus/menu-toggle#plain-circle-toggle). This flag sets a border radius on the `Button` and `MenuToggle`, allowing buttons and plain icon menu toggles to be circular and typical menu toggles to be a pill shape.
- `isPill` on [Drawer](/components/drawer#pill). This flag sets a border radius and inset on the `Drawer`, giving it a more floating look.
- `isThinking` or `pf-v6-m-thinking` on `CompassPanel` and [MessageBar](/AI/chatbot/ui/#message-bar-with-ai-indicator-styles). This prop, or class name, may be set to turn on a pulsing color animation around the component.
- `hasAiIndicator` or `pf-v6-m-ai-indicator` on [MessageBar](/AI/chatbot/ui/#message-bar-with-ai-indicator-styles). This prop, or class name, may be set to enable a gradient border around the component.
- `isThinking` or `pf-v6-m-thinking` on `CompassPanel` and [MessageBar](/extensions/chatbot/ui/#message-bar-with-ai-indicator-styles). This prop, or class name, may be set to turn on a pulsing color animation around the component.
- `hasAiIndicator` or `pf-v6-m-ai-indicator` on [MessageBar](/extensions/chatbot/ui/#message-bar-with-ai-indicator-styles). This prop, or class name, may be set to enable a gradient border around the component.

### Card and data view layout

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-i

Good conversation design combines content strategy, writing, and design to ensure that the development and use of chatbots is centered on real user needs. This includes making sure that all text related to the conversational UI supports easy engagement with chatbots, while staying aligned with brand standards.

When designing AI conversations alongside PatternFly-based projects, it is important to align with our established [brand voice and tone](/content-design/brand-voice-and-tone), as well as our [ethical guidelines for AI.](/AI/ai-guidelines)
When designing AI conversations alongside PatternFly-based projects, it is important to align with our established [brand voice and tone](/content-design/brand-voice-and-tone), as well as our [ethical guidelines for AI.](/ai/overview)

## Best practices

Expand All @@ -29,11 +29,11 @@ Following these best practices to help ensure that your users can complete their

When chatbots are designed to meet the needs of your users, they can improve the overall UX of your product. They are convenient, efficient, and persistent.

[Our chatbot extension](/AI/chatbot/about-chatbot) utilizes PatternFly components to create a foundation for an AI-based chatbot, with additional customization options.
[Our chatbot extension](/extensions/chatbot/about-chatbot) utilizes PatternFly components to create a foundation for an AI-based chatbot, with additional customization options.

<Flex>
<FlexItem>
<Button component="a" href="/AI/chatbot/about-chatbot" target="_blank" variant="primary" size="lg">Use the chatbot extension <ArrowRightIcon /></Button>
<Button component="a" href="/extensions/chatbot/about-chatbot" target="_blank" variant="primary" size="lg">Use the chatbot extension <ArrowRightIcon /></Button>
</FlexItem>
</Flex>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ sortValue: 2

This guide provides instructions for integrating AI-assisted PatternFly development tools into your existing codebase.

Before you get started, review [best practices for AI-assisted prototyping](/AI/rapid-prototyping/rapid-prototyping#best-practices-for-ai-assisted-prototyping) and learn about [vibe coding principles](/AI/rapid-prototyping/rapid-prototyping#what-is-vibe-coding) for effective AI-assisted development.
Before you get started, review [best practices for AI-assisted prototyping](/ai/rapid-prototyping/#best-practices-for-ai-assisted-prototyping) and learn about [vibe coding principles](/ai/rapid-prototyping/#what-is-vibe-coding) for effective AI-assisted development.

If you need to start a new project, follow our guidelines for [starting a new prototype](/AI/rapid-prototyping/new-prototypes).
If you need to start a new project, follow our guidelines for [starting a new prototype](/ai/rapid-prototyping/new-prototypes).

## Why enhance existing projects?

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ For example, you could use AI to migrate a simple Angular feature like this tabl

![Before migration - Angular Products page](./img/products-before.png)

During the development phase, you could take a couple of different approaches to migrate code. You might be able to simply change the code within the same file or you might want to start fresh, using the patternfly-react-seed and following [our rapid prototyping guide.](https://www.patternfly.org/AI/rapid-prototyping/new-prototypes)
During the development phase, you could take a couple of different approaches to migrate code. You might be able to simply change the code within the same file or you might want to start fresh, using the patternfly-react-seed and following [our rapid prototyping guide.](https://www.patternfly.org/ai/rapid-prototyping/new-prototypes)

In this example, we created a placeholder page (PF6placeholder.js) and asked AI to replicate the Angular component on the new page, using PatternFly.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ sortValue: 2

This guide provides instructions for setting up new PatternFly prototypes using AI-assisted development tools.

Before you get started, review [best practices for AI-assisted prototyping](/AI/rapid-prototyping/rapid-prototyping#best-practices-for-ai-assisted-prototyping).
Before you get started, review [best practices for AI-assisted prototyping](/ai/rapid-prototyping/#best-practices-for-ai-assisted-prototyping).

If you need to add AI tools to existing codebases instead, follow our guidelines for [enhancing existing projects](/AI/rapid-prototyping/enhancing-existing-projects).
If you need to add AI tools to existing codebases instead, follow our guidelines for [enhancing existing projects](/ai/rapid-prototyping/enhancing-existing-projects).

## Project setup

Expand All @@ -35,7 +35,7 @@ The patternfly-react-seed ai_enabled branch comes pre-configured with:

Once you've installed and set up the patternfly-react-seed ai_enabled branch, with the [patternfly-ai-coding tool](https://github.com/patternfly/patternfly-ai-coding), follow these steps to begin prototyping:

1. **Define your scope**: Clearly articulate what you want to build using [vibe coding principles](/AI/rapid-prototyping/rapid-prototyping#effective-prompting-with-vibe-coding). Describe the experience, not the technical implementation.
1. **Define your scope**: Clearly articulate what you want to build using [vibe coding principles](/ai/rapid-prototyping/#effective-prompting-with-vibe-coding). Describe the experience, not the technical implementation.
2. **Leverage AI assistance**: Use AI tools to generate PatternFly components based on your requirements, communicating through natural language descriptions of user needs and design intent.
3. **Iterate and refine**: Review generated code and make adjustments as needed, continuing to use vibe coding to guide refinements.
4. **Test and validate**: Ensure your prototype meets design and functional requirements.
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@ Rapid prototyping with PatternFly code offers several key benefits:

Choose your path based on your current situation:

- **[Starting a new prototype](/AI/rapid-prototyping/new-prototypes):** Use the [patternfly-react-seed (ai_enabled branch)](https://github.com/patternfly/patternfly-react-seed/tree/ai_enabled) application for optimal setup.
- **[Enhancing existing projects](/AI/rapid-prototyping/enhancing-existing-projects):** Integrate AI tools into your current codebase.
- **[Starting a new prototype](/ai/rapid-prototyping/new-prototypes):** Use the [patternfly-react-seed (ai_enabled branch)](https://github.com/patternfly/patternfly-react-seed/tree/ai_enabled) application for optimal setup.
- **[Enhancing existing projects](/ai/rapid-prototyping/enhancing-existing-projects):** Integrate AI tools into your current codebase.

## Best practices for AI-assisted prototyping

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ section: accessibility

import { Card, CardBody, Grid, GridItem } from '@patternfly/react-core';

As described in our [accessibility guidelines](/accessibility/overview), users may interact with your product through a variety of assistive technologies. In addition to [developing for accessibility](/accessibility/develop-for-accessibility), you must also incorporate it into your product's visual design.
As described in our [accessibility guidelines](/accessibility/overview), users may interact with your product through a variety of assistive technologies. In addition to [developing for accessibility](/accessibility/develop), you must also incorporate it into your product's visual design.

## Color and contrast

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ For keyboard-only users who use the tab key to navigate the interface, trapped f

For screen reader users, the other contents on the page should be hidden from the screen reader.

Based on the [screen reader / browser combinations](/accessibility/testing-your-accessibility) we use for testing, we recommend applying `aria-hidden="true"` to the parent wrapping element of the page contents. The modal element of the component must not be a descendent of this element, and should be included as a sibling to this element.
Based on the [screen reader / browser combinations](/accessibility/test-your-product) we use for testing, we recommend applying `aria-hidden="true"` to the parent wrapping element of the page contents. The modal element of the component must not be a descendent of this element, and should be included as a sibling to this element.

#### Scrollable elements

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ To support the proper assessment of accessibility measures, we've created a scor

Scoring your accessibility shouldn't be a one-time thing. It's something that you should do routinely to assess your product as it evolves.

An accessibility scorecard offers a higher-level overview of the current state of your product's accessibility, but it is **not intended to replace a full accessibility audit**, as described by our [accessibility testing guide](/accessibility/testing-your-accessibility). An accessibility audit is a vital part of creating your accessibility scorecard.
An accessibility scorecard offers a higher-level overview of the current state of your product's accessibility, but it is **not intended to replace a full accessibility audit**, as described by our [accessibility testing guide](/accessibility/test-your-product). An accessibility audit is a vital part of creating your accessibility scorecard.

## PatternFly.org accessibility scorecard

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ At a minimum, a modal should meet the following criteria:

<List isPlain>
<ListItem>
<Checkbox id="modal-a11y-checkbox-1" label="Any content that is on the page, but outside of the modal, cannot be interacted with or navigated to while the modal is open." description={<span>Learn more about trapping focus in our <Link href="/accessibility/develop-for-accessibility/#trapping-focus">accessibility development guide</Link> for accessibility.</span>} />
<Checkbox id="modal-a11y-checkbox-1" label="Any content that is on the page, but outside of the modal, cannot be interacted with or navigated to while the modal is open." description={<span>Learn more about trapping focus in our <Link href="/accessibility/develop/#trapping-focus">accessibility development guide</Link> for accessibility.</span>} />
</ListItem>
<ListItem>
<Checkbox id="modal-a11y-checkbox-2" label="Standard keyboard navigation can be used to navigate between the contents of a modal." description={<span><kbd>Tab</kbd> navigates to the next focusable element inside a modal, and <kbd>Shift</kbd> + <kbd>Tab</kbd> navigates to the previous focusable element.</span>} />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ The following React props have been provided for more fine-tuned control over ac
| `mainTabIndex={-1 or null}` | `Page` | Set the tabindex for the main content container. This must be passed a value of `-1` when a skip to content is also passed to the page, as some browsers require it in order for skip links to work correctly. |
| `role="[role of the main content element]"` | `Page` | Sets the `role` attribute of the main content element. This should only be passed in if the `mainComponent` property has a value of "div". You should also avoid passing `role="main"` and instead use the default `mainComponent` value of "main". |
| `hasOverflowScroll` | `PageBreadcrumb`, `PageGroup`, `PageNavigation`, `PageSection` | Indicates that the component's content causes an overflow scrollbar to render. Passing this property will also set the tabindex of the component to `0` so that it can be focused and scrolled via keyboard. **Required** and should only be passed in when the content's height exceeds the component height, and when there is no other focusable content before the primary content of the component. |
| `aria-label="[text that labels the component]"` | `PageBreadcrumb`, `PageGroup`, `PageNavigation`, `PageSection` | Adds an accessible name to the component. **Required** when the component has the `hasOverflowScroll` property passed in. See our content on [scrollable elements](/accessibility/develop-for-accessibility#scrollable-elements) for further information. |
| `aria-label="[text that labels the component]"` | `PageBreadcrumb`, `PageGroup`, `PageNavigation`, `PageSection` | Adds an accessible name to the component. **Required** when the component has the `hasOverflowScroll` property passed in. See our content on [scrollable elements](/accessibility/develop#scrollable-elements) for further information. |
| `component="[an HTML tag]"` | `PageSection` | Sets the wrapper element of the page section. By default this is the HTML `section` element. Customizing this property may require you to take additional considerations that are dependent on your particular use case. |
| `aria-label="[text that labels the page toggle button]"` | `PageToggleButton` | Adds an accessible name to the page toggle button that controls the sidebar expansion. This should only be passed if the page toggle button contains no text content, such as an icon. |

Expand All @@ -61,7 +61,7 @@ The following HTML attributes and PatternFly classes can be used for more fine-t
| `id="[id for the main content container]"` | `.pf-v6-c-page__main` | Sets the `id` of the main content container. This must be passed in when a skip to content is present within the page, with the value being linked to the skip to content's `href` attribute, e.g. `href="#container-id`. |
| `role="[role of the main content element]"` | `.pf-v6-c-page__main` | Sets the `role` attribute of the main content element. This should only be passed in if the `.pf-v6-c-page__main` class is applied to a `div` element. You should also avoid passing `role="main"` and instead use a `main` element. |
| `tabindex="-1"` | `.pf-v6-c-page__main` | Set the tabindex for the main content container. This should only be passed in when a skip to content is also present within the page, as some browsers require it in order for skip links to work correctly. |
| `aria-label="[text that labels the component]"` | `.pf-v6-c-page__main-breadcrumb`, `.pf-v6-c-page__main-group`, `.pf-v6-c-page__main-nav`, `.pf-v6-c-page__main-section`, `.pf-v6-c-page__main-subnav`, `.pf-v6-c-page__main-tabs`, `.pf-v6-c-page__main-wizard` | Adds an accessible name to the component. **Required** and should only be passed in when the component has the `.pf-m-overflow-scroll` class has caused an overflow scrollbar to render, and when there is no other focusable content before the primary content of the component.<br/>See our content on [scrollable elements](/accessibility/develop-for-accessibility#scrollable-elements) for further information. |
| `aria-label="[text that labels the component]"` | `.pf-v6-c-page__main-breadcrumb`, `.pf-v6-c-page__main-group`, `.pf-v6-c-page__main-nav`, `.pf-v6-c-page__main-section`, `.pf-v6-c-page__main-subnav`, `.pf-v6-c-page__main-tabs`, `.pf-v6-c-page__main-wizard` | Adds an accessible name to the component. **Required** and should only be passed in when the component has the `.pf-m-overflow-scroll` class has caused an overflow scrollbar to render, and when there is no other focusable content before the primary content of the component.<br/>See our content on [scrollable elements](/accessibility/develop#scrollable-elements) for further information. |
| `tabindex="0"` | `.pf-v6-c-page__main-breadcrumb`, `.pf-v6-c-page__main-group`, `.pf-v6-c-page__main-nav`, `.pf-v6-c-page__main-section`, `.pf-v6-c-page__main-subnav`, `.pf-v6-c-page__main-tabs`, `.pf-v6-c-page__main-wizard` | Allows keyboard focus to be placed on the component. **Required** and should only be passed in when the component has the `.pf-m-overflow-scroll` class has caused an overflow scrollbar to render, and when there is no other focusable content before the primary content of the component. |
| `aria-label="[text that labels the page toggle button]"` | `.pf-v6-c-button.pf-m-plain` | Adds an accessible name to the page toggle button that controls the sidebar expansion. This should only be passed if the page toggle button contains no text content, such as an icon. |

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { Link } from '@patternfly/documentation-framework/components/link/link';

To implement an accessible PatternFly **sidebar**:

- Ensure the sidebar panel follows our documentation on [accessible scrollable elements](/accessibility/develop-for-accessibility#scrollable-elements) if its content creates a scrollable container
- Ensure the sidebar panel follows our documentation on [accessible scrollable elements](/accessibility/develop#scrollable-elements) if its content creates a scrollable container

## Testing

Expand All @@ -21,7 +21,7 @@ At a minimum, a sidebar should meet the following criteria:
<Checkbox id="sidebar-a11y-checkbox-1" label="Standard keyboard navigation can be used to navigate between focusable elements within the sidebar panel." description={<span><kbd>Tab</kbd> navigates to the next focusable element, and <kbd>Shift</kbd> + <kbd>Tab</kbd> navigates to the previous focusable element.</span>} />
</ListItem>
<ListItem>
<Checkbox id="sidebar-a11y-checkbox-2" label={<span>If the sidebar panel content creates a scrollbale container, it follows our documentation on <Link href="/accessibility/develop-for-accessibility#scrollable-elements">accessible scrollable elements</Link>.</span>} />
<Checkbox id="sidebar-a11y-checkbox-2" label={<span>If the sidebar panel content creates a scrollbale container, it follows our documentation on <Link href="/accessibility/develop#scrollable-elements">accessible scrollable elements</Link>.</span>} />
</ListItem>
</List>

Expand Down
Loading