From adbb6ce7aa0fd78241f0385d4db0d81032a83808 Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Mon, 8 Jul 2024 22:06:38 -0400 Subject: [PATCH 1/4] fix: clean up community and trainging card css --- packages/documentation-site/package.json | 2 +- .../content/get-started/about-patternfly.md | 14 +-- .../get-started/community/community-1.svg | 1 - .../get-started/community/community-2.svg | 1 - .../get-started/community/community-3.svg | 1 - .../community/community-page-header.svg | 1 - .../get-started/community/community.css | 20 ---- .../content/training/design.css | 3 - .../content/training/design.md | 107 ------------------ .../training/trainingCard/trainingCard.css | 85 -------------- .../training/trainingCard/trainingCard.js | 41 +++---- 11 files changed, 16 insertions(+), 260 deletions(-) delete mode 100644 packages/documentation-site/patternfly-docs/content/get-started/community/community-1.svg delete mode 100644 packages/documentation-site/patternfly-docs/content/get-started/community/community-2.svg delete mode 100644 packages/documentation-site/patternfly-docs/content/get-started/community/community-3.svg delete mode 100644 packages/documentation-site/patternfly-docs/content/get-started/community/community-page-header.svg delete mode 100644 packages/documentation-site/patternfly-docs/content/get-started/community/community.css delete mode 100644 packages/documentation-site/patternfly-docs/content/training/design.css delete mode 100644 packages/documentation-site/patternfly-docs/content/training/design.md delete mode 100644 packages/documentation-site/patternfly-docs/content/training/trainingCard/trainingCard.css diff --git a/packages/documentation-site/package.json b/packages/documentation-site/package.json index b6ad9dee1f..4e7568206c 100644 --- a/packages/documentation-site/package.json +++ b/packages/documentation-site/package.json @@ -17,7 +17,7 @@ "screenshots": "pf-docs-framework screenshots" }, "dependencies": { - "@patternfly/documentation-framework": "6.0.0-alpha.52", + "@patternfly/documentation-framework": "6.0.0-alpha.54", "@patternfly/react-catalog-view-extension": "6.0.0-alpha.4", "@patternfly/react-console": "6.0.0-alpha.3", "@patternfly/react-docs": "7.0.0-alpha.84", diff --git a/packages/documentation-site/patternfly-docs/content/get-started/about-patternfly.md b/packages/documentation-site/patternfly-docs/content/get-started/about-patternfly.md index be77b0f52a..8c2baf4908 100644 --- a/packages/documentation-site/patternfly-docs/content/get-started/about-patternfly.md +++ b/packages/documentation-site/patternfly-docs/content/get-started/about-patternfly.md @@ -8,18 +8,6 @@ import './get-started.css'; import { Button, Card, CardHeader, CardTitle, CardBody, CardFooter, Divider, Icon, Grid, GridItem, PageSection, Split, SplitItem, Title, Tooltip, Text, TextVariants } from '@patternfly/react-core'; import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon'; import { Link } from '@patternfly/documentation-framework/components'; -import './community/community.css'; -import { getTitle } from '@patternfly/documentation-framework/helpers/getTitle'; -import communityPageHeader from './community/community-page-header.svg'; -import community1 from './community/community-1.svg'; -import community2 from './community/community-2.svg'; -import community3 from './community/community-3.svg'; -import ChatIcon from '@patternfly/react-icons/dist/esm/icons/chat-icon'; -import QuestionIcon from '@patternfly/react-icons/dist/esm/icons/question-icon'; -import CatalogIcon from '@patternfly/react-icons/dist/esm/icons/catalog-icon'; -import MailBulkIcon from '@patternfly/react-icons/dist/esm/icons/mail-bulk-icon'; -import TwitterIcon from '@patternfly/react-icons/dist/esm/icons/twitter-icon'; -import CalendarIcon from '@patternfly/react-icons/dist/esm/icons/calendar-alt-icon'; ## What is PatternFly? @@ -346,4 +334,4 @@ PatternFly was built to be flexible and is scoped to work in tandem with other d For example, our code is written like pf-v5-c-alert alert So if you had … -Include an example --> \ No newline at end of file +Include an example --> diff --git a/packages/documentation-site/patternfly-docs/content/get-started/community/community-1.svg b/packages/documentation-site/patternfly-docs/content/get-started/community/community-1.svg deleted file mode 100644 index 71c8921f61..0000000000 --- a/packages/documentation-site/patternfly-docs/content/get-started/community/community-1.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/get-started/community/community-2.svg b/packages/documentation-site/patternfly-docs/content/get-started/community/community-2.svg deleted file mode 100644 index 83766b5d63..0000000000 --- a/packages/documentation-site/patternfly-docs/content/get-started/community/community-2.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/get-started/community/community-3.svg b/packages/documentation-site/patternfly-docs/content/get-started/community/community-3.svg deleted file mode 100644 index 5627ec6579..0000000000 --- a/packages/documentation-site/patternfly-docs/content/get-started/community/community-3.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/get-started/community/community-page-header.svg b/packages/documentation-site/patternfly-docs/content/get-started/community/community-page-header.svg deleted file mode 100644 index 90194a76f3..0000000000 --- a/packages/documentation-site/patternfly-docs/content/get-started/community/community-page-header.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/get-started/community/community.css b/packages/documentation-site/patternfly-docs/content/get-started/community/community.css deleted file mode 100644 index 3afa26c829..0000000000 --- a/packages/documentation-site/patternfly-docs/content/get-started/community/community.css +++ /dev/null @@ -1,20 +0,0 @@ -.ws-community-page .ws-building-grid .ws-mdx-p { - margin: var(--pf-v6-c-content--MarginTop) 0 var(--pf-v6-c-content--MarginBottom); -} - -.ws-community-page .ws-building-grid h4:last-child { - margin-top: auto; -} - -.ws-community-page .ws-keep-growing { - margin-top: var(--pf-t--global--spacer--2xl); -} - -.ws-community-page .ws-get-in-touch { - margin-top: var(--pf-t--global--spacer--lg); -} - -.ws-community-grid-img { - max-width: 300px; - margin: 0 auto; -} diff --git a/packages/documentation-site/patternfly-docs/content/training/design.css b/packages/documentation-site/patternfly-docs/content/training/design.css deleted file mode 100644 index 50eeb12a88..0000000000 --- a/packages/documentation-site/patternfly-docs/content/training/design.css +++ /dev/null @@ -1,3 +0,0 @@ -.ws-sketch-training-hint { - margin-bottom: var(--pf-t--global--spacer--md); -} diff --git a/packages/documentation-site/patternfly-docs/content/training/design.md b/packages/documentation-site/patternfly-docs/content/training/design.md deleted file mode 100644 index 5c1123b8fa..0000000000 --- a/packages/documentation-site/patternfly-docs/content/training/design.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -id: Design -section: training ---- - -import { Gallery, GalleryItem, Hint, HintTitle, HintBody, HintFooter,Button } from '@patternfly/react-core'; -import { TrainingCard } from './trainingCard/trainingCard'; -import './design.css' - -**Note:** We have migrated the PatternFly design system to Figma and no longer maintain or update our Sketch design kits. The following training resources may be out of date as a result. For information on how to migrate to Figma, read our ["Design with PatternFly" guide.](/get-started/design.md) - -## Sketch design training - - - Need to make a Thinkific account? - - The Sketch design training is powered with a tool called Thinkific. You will need to create a free account in order to complete this training. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/documentation-site/patternfly-docs/content/training/trainingCard/trainingCard.css b/packages/documentation-site/patternfly-docs/content/training/trainingCard/trainingCard.css deleted file mode 100644 index e22e167a85..0000000000 --- a/packages/documentation-site/patternfly-docs/content/training/trainingCard/trainingCard.css +++ /dev/null @@ -1,85 +0,0 @@ -.pf-v6-c-card:not(.pf-org__card-small).pf-org__card { - border: 2px solid #d2d2d2; - box-shadow: unset; - height: 100%; -} - -.pf-org__card .pf-v6-c-card__header { - position: relative; -} - -.pf-org__card .pf-v6-c-card__header:first-child { - padding-top: 24px !important; -} - -.pf-org__card .pf-v6-c-card__header:not(:last-child) { - padding-bottom: 24px !important; -} - -.pf-org__card .pf-org__card-small { - position: absolute; - left: 0px; - padding: 8px 18px; - background-color: #fff; -} - -.pf-org__card .pf-v6-c-card__header .pf-org__level { - margin-left: auto; - font-size: 12px; - color: #737679; -} - -.pf-org__card .pf-v6-c-card__header .pf-org__level > svg { - margin-right: 8px; -} - -.pf-org__card .pf-v6-c-card__body { - font-size: 14px; -} - -.pf-org__card .pf-v6-c-card__body .pf-org__time { - color: #737679; - font-size: 12px; - padding-bottom: 12px; -} - -.pf-org__card .pf-v6-c-card__body .pf-org__time > svg { - margin-right: 8px; -} - -.pf-org__card .pf-v6-c-card__footer .pf-v6-c-button.pf-m-link { - padding-left: 0; - font-weight: bold; -} - -.pf-org__card .pf-v6-c-card__footer .pf-v6-c-button.pf-m-link > svg { - margin-left: 8px; -} - -.pf-org__level-beginner { - color: #5ba352; -} - -.pf-org__level-intermediate { - color: #f0ab00; -} - -.pf-org__level-advanced { - color: #a30000; -} - -.pf-org__training-basics { - color: #ec7a08; -} - -.pf-org__training-components { - color: #a18fff; -} - -.pf-org__training-design { - color: #00B9E4; -} - -.pf-org__training-charts { - color: #6ec664 -} diff --git a/packages/documentation-site/patternfly-docs/content/training/trainingCard/trainingCard.js b/packages/documentation-site/patternfly-docs/content/training/trainingCard/trainingCard.js index 8074a3beb1..0baba903c1 100644 --- a/packages/documentation-site/patternfly-docs/content/training/trainingCard/trainingCard.js +++ b/packages/documentation-site/patternfly-docs/content/training/trainingCard/trainingCard.js @@ -1,15 +1,13 @@ import React from 'react'; -import { Card, CardTitle, CardHeader, CardBody, CardFooter, Button } from '@patternfly/react-core'; +import { Card, CardTitle, CardHeader, CardBody, CardFooter, Button, Text, Flex, Stack } from '@patternfly/react-core'; import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon'; import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon'; import ClockIcon from '@patternfly/react-icons/dist/esm/icons/clock-icon'; import RunningIcon from '@patternfly/react-icons/dist/esm/icons/running-icon'; import PuzzlePieceIcon from '@patternfly/react-icons/dist/esm/icons/puzzle-piece-icon'; import ChartBarIcon from '@patternfly/react-icons/dist/esm/icons/chart-bar-icon'; -import SketchIcon from '@patternfly/react-icons/dist/esm/icons/sketch-icon'; import { Link } from '@patternfly/documentation-framework/components/link/link'; import { capitalize } from '@patternfly/documentation-framework/helpers/capitalize'; -import './trainingCard.css'; const getTrainingIcon = trainingType => { if (['html-css', 'react'].includes(trainingType)) { @@ -18,9 +16,6 @@ const getTrainingIcon = trainingType => { else if (trainingType === 'react-components') { return ; } - else if (trainingType === 'design') { - return ; - } return ; } @@ -32,28 +27,28 @@ export const TrainingCard = ({ time, description, subsection, - name = null, - designUrl = null + name = null }) => ( - + - + {getTrainingIcon(trainingType)} - -
- {capitalize(level)} -
+ {title} -
- - {time} -
- {description} + + + + + {time} + + + {description} + {name && ( @@ -64,14 +59,6 @@ export const TrainingCard = ({ )} - {designUrl && ( - - - - )} ); From a51e3e4544d51d8c6dfb5818c2ab6a1c0fcd4cc0 Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Wed, 10 Jul 2024 11:46:35 -0400 Subject: [PATCH 2/4] fix: adjust white space between blocks of content --- .../documentation-framework/templates/mdx.css | 8 ++++ .../documentation-framework/templates/mdx.js | 2 +- .../components/alert/alert.md | 10 +---- .../components/empty-state/empty-state.md | 10 +---- .../content/error-messages.md | 18 ++------ .../content/product-tours.md | 3 -- .../design-guidelines/content/tooltips.md | 5 +-- .../content/writing-for-all-audiences.md | 4 +- .../colors-for-charts/colors-for-charts.md | 6 +-- .../design-guidelines/styles/icons/icons.css | 9 +--- .../about-accessibility.md | 4 +- .../accessibility-datalist.js | 41 ++++-------------- .../accessibility-design.md | 6 +-- .../accessibility-development.md | 7 +--- .../content/get-started/about-patternfly.md | 13 ------ .../content/get-started/design-with-figma.md | 14 ++----- .../content/tokens/about-tokens.md | 2 - .../content/tokens/design-with-tokens.md | 4 +- .../patternfly-docs/content/training/html.md | 42 +++++++------------ .../patternfly-docs/content/training/react.md | 22 ++++------ .../training/trainingCard/trainingCard.js | 10 +++-- 21 files changed, 67 insertions(+), 173 deletions(-) diff --git a/packages/documentation-framework/templates/mdx.css b/packages/documentation-framework/templates/mdx.css index 3a4f652473..ac41f7cb44 100644 --- a/packages/documentation-framework/templates/mdx.css +++ b/packages/documentation-framework/templates/mdx.css @@ -1,3 +1,7 @@ +p.pf-v6-c-content--p.ws-p { + margin: 0; +} + .ws-code { display: inline-block; background-color: var(--pf-t--global--background--color--secondary--default); @@ -8,6 +12,10 @@ font-family: var(--pf-t--global--font--family--mono); } +.ws-content-table > .ws-table { + margin-bottom: var(--pf-t--global--spacer--md); +} + .ws-image { text-align: center; } diff --git a/packages/documentation-framework/templates/mdx.js b/packages/documentation-framework/templates/mdx.js index d04408aea8..afb50d4a53 100644 --- a/packages/documentation-framework/templates/mdx.js +++ b/packages/documentation-framework/templates/mdx.js @@ -91,7 +91,7 @@ const MDXChildTemplate = ({ {toc.length > 1 && ( )} - + {InlineAlerts} {functionDocumentation.length > 0 && ( diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/alert.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/alert.md index bf5257e680..62d946d9b5 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/alert.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/alert.md @@ -195,8 +195,6 @@ Plain inline alerts are commonly used in the following situations: -
- - Be concise. In one-line toast alerts, use fragments instead of sentences if possible.
@@ -206,9 +204,7 @@ Plain inline alerts are commonly used in the following situations: | Message sent| Your message has been sent.|
- -
- + - In toast alerts containing links, describe how the user can navigate through the UI to perform the action. Learn more about how descriptive text supports accessibility in the next section.
@@ -217,9 +213,7 @@ Plain inline alerts are commonly used in the following situations: |:------:|:---------:| | From the **Settings** tab, click **View logs.**| **View logs**| -
- -
+ ## Accessibility diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/empty-state.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/empty-state.md index fa0ee549ee..fe7369587c 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/empty-state.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/empty-state.md @@ -34,7 +34,6 @@ Use the [extra large empty state](#extra-large-empty-state) variation for gettin | Welcome to PatternFly | Welcome to PatternFly! | -
**Body**: Explain how the product or feature delivers value to the user. State what the user can do with the product instead of what the product enables them to do. This way, you give power to the user. @@ -74,7 +73,6 @@ Use the [small empty state](#small-empty-state) variation for no results empty s | No results found | Your search did not yield any results | -
**Body**: Explain what the user should do next so that they can continue searching for what they need. @@ -112,7 +110,6 @@ Use the [large empty state](#large-empty-state) variation for required configura | Start the configuration process and follow the on-screen instructions. | You cannot continue until you complete the configuration. | -
**Button**: Give the user the ability to quickly take action on the task. @@ -139,8 +136,7 @@ Use the [large empty state](#large-empty-state) variation for no access empty st |:-------------------------------:|:--------------------------:| | Access permissions needed | Access denied | - -
+ **Body**: Explain what action the user must take to reach their goal of accessing the page. @@ -151,7 +147,6 @@ Use the [large empty state](#large-empty-state) variation for no access empty st | To access PatternFly, ask your administrator to adjust your permissions. | You don’t have access to PatternFly. | -
**Button**: Give the user the ability to easily leave the page and return to the dashboard, home page, or another main area of the product. @@ -210,7 +205,6 @@ Use the [extra large empty state](#extra-large-empty-state) variation for succes | You're all set | You have successfully registered | -
**Body**: Give the user a next step so that they can continue using the product. If an additional confirmation is needed (such as a confirmation email), include that in the body, too. @@ -221,7 +215,6 @@ Use the [extra large empty state](#extra-large-empty-state) variation for succes | We emailed you a confirmation. Ready to explore other activities? | You can now exit. | -
**Button**: Give the user the ability to easily take the next step. @@ -249,7 +242,6 @@ Use the [large empty state](#large-empty-state) variation for creation empty sta | No service accounts yet | No service accounts have been found | -
**Body**: Explain what the user needs to do next. diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/content/error-messages.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/content/error-messages.md index 5f0bc0bffe..391abbffd2 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/content/error-messages.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/content/error-messages.md @@ -36,7 +36,6 @@ A user should never feel like the error is their fault. Avoid language like “Y | You did not provide your authentication credentials. | Authentication credentials weren't provided.| -
#### Give users a next step @@ -49,7 +48,6 @@ A user should never feel stuck. If they’re hit with an error, give them the in | Your list already has the maximum number of items. You are not able to continue customizing. | Your list has the maximum number of items. To continue customizing, remove an item.| -
#### Avoid jargon @@ -62,7 +60,6 @@ Error messages are frustrating enough without technical terms that users might n | Error code 5959: Outdated version information. Task termination pending. | Your task is outdated. To keep it active, update its version.| -
#### Include the right amount of description @@ -75,7 +72,6 @@ Tell your user what is wrong. An error without an explanation can add to their f | An error occurred. The email cannot be sent. | To send this email, turn on your email permissions in user settings.| -
However, don’t include too much information. The user doesn’t need to know exactly what is going on behind the scenes. Only give them information about what went wrong and what they can do next. @@ -85,9 +81,7 @@ However, don’t include too much information. The user doesn’t need to know e |:------------:|:------------:| | Your information cannot be saved. Our system is currently designed to accommodate 1 record per user. The system memory is unable to store more at this time. | Only 1 record can be saved. To continue, remove one of your records.| - -
- + #### Lead with the benefit @@ -133,8 +127,7 @@ To create effective 404 pages, follow these best practice guidelines: |:-----------:|:-----------:| | Error 404: Not found| 404: That page no longer exists | - -
+ 1. **Avoid exclamations, colloquialisms, and excessive humor.** Write 404 headings to be informative and repeatable. When users land on a page more than once, jokes grow stale. Steer clear of extraneous words like “Uh oh!” or “Oops!”. @@ -147,7 +140,6 @@ To create effective 404 pages, follow these best practice guidelines: | Huh, that's odd... | That page no longer exists | -
1. **Avoid assigning blame to the user.** If your brand doesn’t use first-person plural (“we”) pronouns, use “that page” or “this page” as your heading's subject instead. @@ -159,7 +151,6 @@ To create effective 404 pages, follow these best practice guidelines: | The page you're trying to reach doesn't exist | That page no longer exists | -
1. **Turn error into opportunity.** Always provide a link back to your site’s home page, and include supplemental next steps below your heading to encourage users to explore options beyond just going back to where they came from. @@ -170,7 +161,6 @@ To create effective 404 pages, follow these best practice guidelines: | That page doesn't exist. | Another page might have what you need, so try searching PatternFly. | -
1. **Channel your brand voice.** Bland, impersonal error messages can be frustrating. Infuse your 404 page content with brand personality to support a more inviting site experience. @@ -181,7 +171,6 @@ To create effective 404 pages, follow these best practice guidelines: | **Error 404: Not found**
Requested URL not found on this server. Please try again. | **404: We couldn't find that page**
Another page might have what you need, so try searching PatternFly. | -
1. **Write for all audiences.** Be mindful of localization. Puns, wordplay, and cultural references may not localize for all users. Prioritize clarity over cleverness. @@ -191,5 +180,4 @@ To create effective 404 pages, follow these best practice guidelines: |:-----------:|:-----------:| | **404: Not all who wander are lost...**
But this page is. Search again or find your way back home. | **404: We lost that page**
Let's find you a better one. Try a new search or return home. | - -
\ No newline at end of file + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/content/product-tours.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/content/product-tours.md index f4f87f6697..194a6ea5d7 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/content/product-tours.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/content/product-tours.md @@ -17,7 +17,6 @@ When writing a product tour, refer to the following best practice guidelines and | We introduced a new feature for designing called Flyer Fact. Discover how it works by taking a tour to learn more.
**OK \| Cancel** | Create consistency and design faster with Flyer Fact.
**Start tour \| Not now** | -
1. **Be conversational**: Imagine that you’re sitting beside the user and walking them through the product. Avoid jargon and be casual. @@ -28,7 +27,6 @@ When writing a product tour, refer to the following best practice guidelines and | There are three major areas of Flyer Fact: components, layouts, and documentation. These are for designers to utilize in order to build user experiences that serve the needs of their users. | Create accessible and intuitive interfaces with Flyer Fact’s components, layouts, and documentation. | -
1. **Empathize with the user**: Learning new things can be scary, so don’t stuff your onboarding flow with exclamation marks, and avoid telling the user how hard you worked on the new tool or how excited you are. Instead, understand that the user might be a little intimidated and focus on giving them information and guidance in a straightforward way. @@ -39,4 +37,3 @@ When writing a product tour, refer to the following best practice guidelines and | We are so excited to announce the Flyer Fact redesign! We can’t wait to show you around. | Flyer Fact has a new look. Let’s explore what you can do. | -
\ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/content/tooltips.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/content/tooltips.md index 1c095248e3..4e2f2cfd5a 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/content/tooltips.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/content/tooltips.md @@ -25,8 +25,6 @@ A **tooltip** is a message box that is shown when a UI element, like a button or -
-
When writing tooltips, follow these general recommendations: @@ -61,7 +59,6 @@ For example: -
In PatternFly, there are commonly used icons that hold universal meanings. These should always use the same tooltip description, as shown in the following table: @@ -82,4 +79,4 @@ In PatternFly, there are commonly used icons that hold universal meanings. These | | pficon-export | Export | | | pficon-task | Tasks | -You can learn more about the usage of these icons in our [design foundations.](/design-foundations/icons) \ No newline at end of file +You can learn more about the usage of these icons in our [design foundations.](/design-foundations/icons) diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/content/writing-for-all-audiences.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/content/writing-for-all-audiences.md index 33eb635ffc..3bcbf05caa 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/content/writing-for-all-audiences.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/content/writing-for-all-audiences.md @@ -16,9 +16,9 @@ To create accessible content, refer to the following best practices: - Don't identify items by color only. Color identifiers don’t help users who are colorblind. For example: -

+
blue PatternFly primary button reading Submit form -

+
diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/colors-for-charts/colors-for-charts.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/colors-for-charts/colors-for-charts.md index ce9d9b0fc8..8ed8a5d68f 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/colors-for-charts/colors-for-charts.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/colors-for-charts/colors-for-charts.md @@ -40,7 +40,7 @@ PatternFly recommends colors to use with bar charts, donut charts and pie charts ## Color and pattern usage When selecting colors for your chart, there are a few important usage considerations to keep in mind. Within a color family, use the base color before the other, lighter or darker hues. Additionally, consider other basic guidelines: -
+ * **Green family:** Use to show success * **Red family:** Use to show failure * **Other color families:** Use for neutral purposes or categories @@ -65,8 +65,6 @@ When selecting colors for your chart, there are a few important usage considerat -
- ### Chart with nested (grouped) variables @@ -79,8 +77,6 @@ When selecting colors for your chart, there are a few important usage considerat -
- ### Chart with many variables (>7) diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/icons/icons.css b/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/icons/icons.css index b70864eeec..65d985f8f1 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/icons/icons.css +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/icons/icons.css @@ -36,13 +36,6 @@ margin-right: 8px; } -#icon-sizes, -#icon-colors, -#all-icons, -#updated-icon-recommendations { - margin-bottom: 24px; -} - #ws-icons-table td[data-label="Icon"] svg, #ws-icons-table td[data-label="Unicode"] span { cursor: pointer; @@ -53,7 +46,7 @@ } #all-icons ~ .ws-p > .ws-code { - margin-inline-start: var(--pf-t--global--spacer--sm); + margin-inline-start: var(--pf-t--global--spacer--sm); } .ws-icon-code { diff --git a/packages/documentation-site/patternfly-docs/content/developer-resources/about-accessibility.md b/packages/documentation-site/patternfly-docs/content/developer-resources/about-accessibility.md index fd2c439d32..eccf5a4565 100644 --- a/packages/documentation-site/patternfly-docs/content/developer-resources/about-accessibility.md +++ b/packages/documentation-site/patternfly-docs/content/developer-resources/about-accessibility.md @@ -76,8 +76,6 @@ Accessibility takes **all users** into account. An accessibility spectrum showing examples of the situational, temporary, and permanent situations for different impairments. -
-
## Experience parity We believe that all abilities should be treated equally. There should be parity in the experience of all users—one user group shouldn't be prioritized over the other. @@ -94,4 +92,4 @@ To help you achieve this, consider these guidelines: - There should be parity between hover and focus events. Any information that’s available on hover for the mouse user should be available on keyboard focus. - Make content that appears on hover available to a screen reader by using `aria-describedby` (refer to [Tooltips & Toggletips example from Inclusive Components](https://inclusive-components.design/tooltips-toggletips/)). -When building accessible user experiences, solving for one can extend to many. Humans are diverse and unique, and designing for accessibility takes that into consideration to create truly inclusive products. \ No newline at end of file +When building accessible user experiences, solving for one can extend to many. Humans are diverse and unique, and designing for accessibility takes that into consideration to create truly inclusive products. diff --git a/packages/documentation-site/patternfly-docs/content/developer-resources/accessibility-datalist.js b/packages/documentation-site/patternfly-docs/content/developer-resources/accessibility-datalist.js index e8e6354dd2..6e626c1336 100644 --- a/packages/documentation-site/patternfly-docs/content/developer-resources/accessibility-datalist.js +++ b/packages/documentation-site/patternfly-docs/content/developer-resources/accessibility-datalist.js @@ -96,32 +96,7 @@ export class AccessibilityDatalist extends React.Component { }; return ( -
- -
-
- - - - Guideline - , - - Link - , - - Category - - ]} - /> - -

- A mechanism should be available to bypass blocks of content that are repeated on multiple web pages. + A mechanism should be available to bypass blocks of content that are repeated on multiple web pages.

When keyboard-only users interact with your site, they use the tab key to jump from link to link. If your UI has many links in your page header or in a menu, they must tab through those every time they come to a new page just to get to the main content. Providing a "skip to main content" link allows them to easily bypass this hassle. @@ -190,7 +165,7 @@ export class AccessibilityDatalist extends React.Component { isHidden={!this.state.expanded.includes('ex-toggle2')} >

- Use descriptive titles to help users find content, orient themselves within it, and navigate through it. + Use descriptive titles to help users find content, orient themselves within it, and navigate through it.

Users can more quickly identify the content they need when accurate, descriptive titles appear in site maps or lists of search results. The title of each web page should: @@ -199,7 +174,7 @@ export class AccessibilityDatalist extends React.Component {
- Make sense when read out of context. For example, when read by a screen reader, in a site map, or in a list of search results.
- - Be concise. + - Be concise.

@@ -233,7 +208,7 @@ export class AccessibilityDatalist extends React.Component { isHidden={!this.state.expanded.includes('ex-toggle3')} >

- If more than one link has the same label, it should also have the same URL. + If more than one link has the same label, it should also have the same URL.

Screen reader users can access the list of links that are on a page, which pulls the links out of context. If you have links with different URLs but the same label, then add additional text to provide context to screen reader users. @@ -270,7 +245,7 @@ export class AccessibilityDatalist extends React.Component { isHidden={!this.state.expanded.includes('ex-toggle4')} >

- Use landmark roles to clearly identify regions that communicate page structure. + Use landmark roles to clearly identify regions that communicate page structure.

Landmark roles programmatically identify sections of a page. If more than one landmark role occurs in the page, use aria-label to differentiate the landmark elements. @@ -311,7 +286,7 @@ export class AccessibilityDatalist extends React.Component { isHidden={!this.state.expanded.includes('ex-toggle5')} >

- Heading text should be descriptive. + Heading text should be descriptive.

Appropriate heading levels should be used to communicate the outline and structure of the page. For example, a common practice is to use a single h1 for the primary headline or logo on a page, h2s to designate major sections, and h3's for supporting subsections. @@ -347,7 +322,7 @@ export class AccessibilityDatalist extends React.Component { isHidden={!this.state.expanded.includes('ex-toggle6')} >

- Content should be meaningful, clear, and concise. + Content should be meaningful, clear, and concise.

Use simple language and formatting, as appropriate for the context. @@ -358,4 +333,4 @@ export class AccessibilityDatalist extends React.Component { ); } -} \ No newline at end of file +} diff --git a/packages/documentation-site/patternfly-docs/content/developer-resources/accessibility-design.md b/packages/documentation-site/patternfly-docs/content/developer-resources/accessibility-design.md index 0c064d3d41..c9bf515783 100644 --- a/packages/documentation-site/patternfly-docs/content/developer-resources/accessibility-design.md +++ b/packages/documentation-site/patternfly-docs/content/developer-resources/accessibility-design.md @@ -19,14 +19,10 @@ PatternFly components use [our color palettes](/design-foundations/colors) to pa It's important not to solely rely on color for conveying information. Even though PatternFly components pass color contrast tests, they also use icons to further help with identification, which can be especially helpful for users with a form of color blindness. -
Two sets of alert components being compared, one displayed as normal and the other displayed with red-green color blindness emulated. -
-
If you go beyond our recommendations to combine PatternFly colors in other ways, please be sure to check your color contrast with a contrast checker. When you alter the colors and/or icons used in PatternFly components, know that they may no longer be accessible for all users. -
A set of alert components displayed with red-green color blindness emulated. These alert components are not clear or distinguishable, because they use poor color contrast and irrelevant icons. ## Content @@ -48,4 +44,4 @@ There are 4 types of limitations as a result of low vision. 1. **Color perception**: How people see colors. Some of your users may have deficiencies in color perception that affects their ability to see certain colors. This is commonly called "color blindness", but many people with color perception deficiencies can still see most colors. 1. **Contrast and light sensitivity**: The way that people perceive luminance (the contrast of foreground and background). -We do our best to make PatternFly accessible for low-vision users by default, but it is important that you consciously design with these needs in mind to ensure that your final design has proper color, contrast, and content accessibility. \ No newline at end of file +We do our best to make PatternFly accessible for low-vision users by default, but it is important that you consciously design with these needs in mind to ensure that your final design has proper color, contrast, and content accessibility. diff --git a/packages/documentation-site/patternfly-docs/content/developer-resources/accessibility-development.md b/packages/documentation-site/patternfly-docs/content/developer-resources/accessibility-development.md index ef03e1ab64..44ff9543b5 100644 --- a/packages/documentation-site/patternfly-docs/content/developer-resources/accessibility-development.md +++ b/packages/documentation-site/patternfly-docs/content/developer-resources/accessibility-development.md @@ -22,8 +22,6 @@ These are some of the items outside the scope of PatternFly that you should prio -
- ### UI element accessibility techniques The [WCAG 2.0 techniques](https://www.w3.org/TR/WCAG20-TECHS/Overview.html#contents) provide examples on how to meet accessibility guidelines. The following techniques are standard across PatternFly for specific patterns. @@ -34,9 +32,6 @@ For sighted users, the context and visual appearance of an element can help user Popover example of close button -
-
- ARIA supplements HTML so that common application interactions and features can be passed to assistive technologies when there is not a native mechanism. This is typically done by including an `aria-label` that provides descriptive context to assistive technologies. **Only use labels when they are necessary to make an element accessible.** ARIA is meant to add context when there *isn’t* visible text, not to override or reiterate what’s already there. Make sure that your labels are useful and not redundant. Note that ARIA can only affect the semantics of an element; it has no effect on its behavior. For example, while you can make an element hidden to screen readers with `aria-hidden=”true”`, that does not hide the element from focus. @@ -153,4 +148,4 @@ There are a few aspects that can affect how screen readers communicate informati - **Dynamic content**: One of the biggest accessibility concerns with dynamic content is the need to notify users that the content has changed. Sighted users benefit from highlighting or drawing visual attention to the changes. Non-sighted users need to be notified in another way, such as loading a new page, sending the focus to the new content, or using ARIA live announcements. -- **Unrelated notifications**: Notifications from the operating system outside of the web app can interrupt a user while interacting with a page (for example, "You received a new chat message."). Consider this possibility when designing and developing for screen readers, and keep any notification messaging concise to limit the interruption. \ No newline at end of file +- **Unrelated notifications**: Notifications from the operating system outside of the web app can interrupt a user while interacting with a page (for example, "You received a new chat message."). Consider this possibility when designing and developing for screen readers, and keep any notification messaging concise to limit the interruption. diff --git a/packages/documentation-site/patternfly-docs/content/get-started/about-patternfly.md b/packages/documentation-site/patternfly-docs/content/get-started/about-patternfly.md index 8c2baf4908..6c9eede7ad 100644 --- a/packages/documentation-site/patternfly-docs/content/get-started/about-patternfly.md +++ b/packages/documentation-site/patternfly-docs/content/get-started/about-patternfly.md @@ -53,8 +53,6 @@ PatternFly's foundations create a strong base for the rest of the design system -
- ### Elements PatternFly’s core elements are what you will work directly with when building a UI. @@ -117,8 +115,6 @@ PatternFly’s core elements are what you will work directly with when building -
- ### Guidance We provide extensive guidelines to help you create UIs following best practices. @@ -168,8 +164,6 @@ We provide extensive guidelines to help you create UIs following best practices. -
- ### Additional developer resources We offer more complex resources to assist with the development process. @@ -205,8 +199,6 @@ We offer more complex resources to assist with the development process. -
- ## Join the community At the core of PatternFly is our global community of designers, developers, and other UX professionals with a passion for open source—in other words, our Flyers. Whether we're contributing to PatternFly or just staying up to date on new releases, we work together to make PatternFly a vibrant community of passionate people. Together, we celebrate creativity and foster a sense of teamwork and unity. @@ -276,9 +268,6 @@ The PatternFly community is never finished growing, and we want to keep it that -
-
- #### New communities Sometimes Flyers branch out and build groups of their own, creating new communities. While these communities are separate from PatternFly and not supported as part of our design system, we still love seeing our Flyers turning their visions into actions. @@ -294,13 +283,11 @@ Sometimes Flyers branch out and build groups of their own, creating new communit Now that you've been introduced to PatternFly, you're ready to start designing or start developing your product. Looking to get involved in the behind-the-scenes work? Check out our contribution guidelines for more instruction. -
-
## Release cadence diff --git a/packages/documentation-site/patternfly-docs/content/get-started/design-with-figma.md b/packages/documentation-site/patternfly-docs/content/get-started/design-with-figma.md index 824a6264ac..eb6811e8a8 100755 --- a/packages/documentation-site/patternfly-docs/content/get-started/design-with-figma.md +++ b/packages/documentation-site/patternfly-docs/content/get-started/design-with-figma.md @@ -14,11 +14,9 @@ import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-i To start designing with PatternFly, you will need to install our PatternFly 6 design kit. This kit gives you access to PatternFly's visual design system — including design tokens — so that you can create consistent and usable product experiences. -
- -
-
-
+

+ +
In order to use PatternFly 6, your product *must* be using the PatternFly 6 design kit. If you haven't yet, you can [follow our upgrade guide](/get-started/upgrade) to complete your upgrade. Doing so also ensures that you'll have access to the most current PatternFly features, resources, and guidance going forward! @@ -51,12 +49,8 @@ If you're completely new to PatternFly, you should also first [read this overvie We plan to regularly release design kit updates to address any bugs and to evolve our design solutions. If you're a Red Hat employee, then you will automatically receive updates as they are released. If you are not a Red Hat employee, then you will have to manually check our Figma community page to find and install updates. [Read more about Figma access levels here.](#1.-how-do-i-get-figma-access) -
- -
- ## Get help ### 1. How do I get Figma access? @@ -82,4 +76,4 @@ Before PatternFly 5, the PatternFly design kit was available within Sketch. We m To migrate to Figma, just begin to create all new design work within Figma. If you have existing designs in another design tool that you want to bring into Figma, you will need to manually recreate each UI mockup using the PatternFly 6 component library. ### 4. What if I haven't upgraded to PatternFly 6? -If your product hasn't been upgraded to PatternFly 6, you cannot use the PatternFly 6 design kit nor design tokens. Previous PatternFly libraries will no longer be maintained after the release of PatternFly 6. \ No newline at end of file +If your product hasn't been upgraded to PatternFly 6, you cannot use the PatternFly 6 design kit nor design tokens. Previous PatternFly libraries will no longer be maintained after the release of PatternFly 6. diff --git a/packages/documentation-site/patternfly-docs/content/tokens/about-tokens.md b/packages/documentation-site/patternfly-docs/content/tokens/about-tokens.md index f46bebd939..f3589ecb65 100644 --- a/packages/documentation-site/patternfly-docs/content/tokens/about-tokens.md +++ b/packages/documentation-site/patternfly-docs/content/tokens/about-tokens.md @@ -46,7 +46,6 @@ Each token segment represents a different type of style information: | Variant | The variant of a component or concept, such as *link*, *plain*, *warning*, or *success*. | State | The state that the component is in, such as *default*, *hover*, or *active*. -
If a segment isn't relevant for a particular token then it will be skipped in the token's name: @@ -56,5 +55,4 @@ If a segment isn't relevant for a particular token then it will be skipped in th | [scope]--[component]--[property]--[variant]--[state] | `--pf-t--global--background--color--backdrop--default` | | [scope]--[component]--[property]--[variant] | `--pf-t--global--border--width--regular` | -
diff --git a/packages/documentation-site/patternfly-docs/content/tokens/design-with-tokens.md b/packages/documentation-site/patternfly-docs/content/tokens/design-with-tokens.md index 75b074e1b8..bb5286f944 100644 --- a/packages/documentation-site/patternfly-docs/content/tokens/design-with-tokens.md +++ b/packages/documentation-site/patternfly-docs/content/tokens/design-with-tokens.md @@ -20,7 +20,7 @@ Because tokens are set up behind the scenes, they enable you to customize compon This allows you to quickly swap between different variants and enable/disable component enhancements. For example: ![PatternFly alert components built with Figma tokens.](./img/component-instance.png) -
+ Once you've inserted a component into your workspace, you can continue to customize its appearance in [Figma's design sidebar](https://help.figma.com/hc/en-us/articles/360039832014-Design-prototype-and-explore-layer-properties-in-the-right-sidebar). When choosing colors, styles, and effects, you will see a list of tokens to choose from. @@ -28,4 +28,4 @@ Once you've inserted a component into your workspace, you can continue to custom If you're working on a custom design, you may need to adjust a component beyond the predefined options. For example, you may need to add text or custom spacing where it isn't already present. When you create custom designs, use tokens appropriately to achieve the style and structure you need. Choose the semantic token that is the best fit for your needs. -Our tokens are intentionally scoped so that they can only be used to modify relevant visual attributes. For example, a token may have its color scope limited so that it can only be used as a fill color or a stroke color. This means that, while you can use tokens to customize a design, you will only be able to use certain tokens in certain situations. This helps ensure that you're using tokens that are conceptually relevant to the design element that you're working on. \ No newline at end of file +Our tokens are intentionally scoped so that they can only be used to modify relevant visual attributes. For example, a token may have its color scope limited so that it can only be used as a fill color or a stroke color. This means that, while you can use tokens to customize a design, you will only be able to use certain tokens in certain situations. This helps ensure that you're using tokens that are conceptually relevant to the design element that you're working on. diff --git a/packages/documentation-site/patternfly-docs/content/training/html.md b/packages/documentation-site/patternfly-docs/content/training/html.md index 94dd9a9e33..edb138088f 100644 --- a/packages/documentation-site/patternfly-docs/content/training/html.md +++ b/packages/documentation-site/patternfly-docs/content/training/html.md @@ -7,31 +7,21 @@ import { Gallery, GalleryItem } from '@patternfly/react-core'; import { TrainingCard } from './trainingCard/trainingCard'; ## Fundamentals - - - - - - + ## CSS Overrides - - - - - - + diff --git a/packages/documentation-site/patternfly-docs/content/training/react.md b/packages/documentation-site/patternfly-docs/content/training/react.md index de41efde61..497ad17e84 100644 --- a/packages/documentation-site/patternfly-docs/content/training/react.md +++ b/packages/documentation-site/patternfly-docs/content/training/react.md @@ -3,21 +3,15 @@ id: React section: training --- -import { Gallery, GalleryItem } from '@patternfly/react-core'; import { TrainingCard } from './trainingCard/trainingCard'; ## Fundamentals - - - - - - + diff --git a/packages/documentation-site/patternfly-docs/content/training/trainingCard/trainingCard.js b/packages/documentation-site/patternfly-docs/content/training/trainingCard/trainingCard.js index 0baba903c1..c9d8558dbc 100644 --- a/packages/documentation-site/patternfly-docs/content/training/trainingCard/trainingCard.js +++ b/packages/documentation-site/patternfly-docs/content/training/trainingCard/trainingCard.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Card, CardTitle, CardHeader, CardBody, CardFooter, Button, Text, Flex, Stack } from '@patternfly/react-core'; +import { Card, CardTitle, CardHeader, CardBody, CardFooter, Button, Text, Flex, FlexItem, Stack } from '@patternfly/react-core'; import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon'; import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon'; import ClockIcon from '@patternfly/react-icons/dist/esm/icons/clock-icon'; @@ -53,9 +53,11 @@ export const TrainingCard = ({ {name && ( - )} From a336c1b08836ce1ae22deb54e29d0c224671beca Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Wed, 10 Jul 2024 11:53:41 -0400 Subject: [PATCH 3/4] update button size in training cards --- .../content/training/trainingCard/trainingCard.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/documentation-site/patternfly-docs/content/training/trainingCard/trainingCard.js b/packages/documentation-site/patternfly-docs/content/training/trainingCard/trainingCard.js index c9d8558dbc..5d761802ac 100644 --- a/packages/documentation-site/patternfly-docs/content/training/trainingCard/trainingCard.js +++ b/packages/documentation-site/patternfly-docs/content/training/trainingCard/trainingCard.js @@ -53,11 +53,8 @@ export const TrainingCard = ({ {name && ( - )} From 298b63561870bed2874e8252e00460d8ad5e35fd Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Wed, 10 Jul 2024 12:48:11 -0400 Subject: [PATCH 4/4] tidy up after rebase --- packages/documentation-site/package.json | 2 +- .../content/design-guidelines/styles/spacers/spacers.md | 7 ------- .../content/developer-resources/accessibility-testing.md | 2 +- 3 files changed, 2 insertions(+), 9 deletions(-) diff --git a/packages/documentation-site/package.json b/packages/documentation-site/package.json index 4e7568206c..06ae87ed3f 100644 --- a/packages/documentation-site/package.json +++ b/packages/documentation-site/package.json @@ -17,7 +17,7 @@ "screenshots": "pf-docs-framework screenshots" }, "dependencies": { - "@patternfly/documentation-framework": "6.0.0-alpha.54", + "@patternfly/documentation-framework": "6.0.0-alpha.55", "@patternfly/react-catalog-view-extension": "6.0.0-alpha.4", "@patternfly/react-console": "6.0.0-alpha.3", "@patternfly/react-docs": "7.0.0-alpha.84", diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/spacers/spacers.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/spacers/spacers.md index 42033d24e1..6a27d72914 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/spacers/spacers.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/spacers/spacers.md @@ -111,9 +111,6 @@ Some components like icons, buttons, and input fields, have a fixed amount of pa Spacers example -
-
- ### Using spacers with text When using spacers with text-based content, you should consider line height to ensure that you’re leaving the right amount of vertical space between each line of text. @@ -129,8 +126,6 @@ When using spacers with text-based content, you should consider line height to e

-
- You also need to use different spacer sizes depending on the type of text you’re using. For example, you’ll need to provide a 16px spacer between a title and body copy, but only an 8px spacer between items in a bulleted or numbered list.
@@ -174,7 +169,5 @@ You also need to use different spacer sizes depending on the type of text you’

-
- For more information about line height and typography, read our [typography guidelines.](/design-foundations/typography) diff --git a/packages/documentation-site/patternfly-docs/content/developer-resources/accessibility-testing.md b/packages/documentation-site/patternfly-docs/content/developer-resources/accessibility-testing.md index 5d73636b1e..0264f63a84 100644 --- a/packages/documentation-site/patternfly-docs/content/developer-resources/accessibility-testing.md +++ b/packages/documentation-site/patternfly-docs/content/developer-resources/accessibility-testing.md @@ -77,7 +77,7 @@ This checklist includes some of the main areas that the PatternFly team checks f Keyboard navigation via the tab key can discover all information.} description={If content should be hidden from other assistive technology like a screen reader, aria-hidden="true" should be passed instead.} id="general-criteria-4" /> } id="general-criteria-5" />
+" id="general-criteria-5b" />} id="general-criteria-5" /> ### Structural accessibility criteria