Skip to content

chore(Card): update a11y card docs #3384

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

Merged
nicolethoen merged 3 commits into from
Mar 1, 2023
Merged

chore(Card): update a11y card docs #3384

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bbfd682
update a11y card docs
jenny-s51 Jan 27, 2023
5f8004e
PR feedback
jenny-s51 Feb 23, 2023
6636b86
format
jenny-s51 Feb 23, 2023
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
10 changes: 5 additions & 5 deletions packages/v4/patternfly-docs/content/accessibility/card/card.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,10 +42,10 @@ At a minimum, a card should meet the following criteria:

The following React props have been provided for more fine-tuned control over accessibility.

| Prop | Applied to | Reason |
| Prop | Applied to | Reason |
|---|---|---|
| `aria-label="[text describing the card]"` or `aria-labelledby="[id of the element that labels the card]"` | `Card` | Adds an accessible name to the card. If the card has a `CardTitle`, the `aria-labelledby` prop should be passed in with a value of the `CardTitle`'s `id` prop. Otherwise the `aria-label` prop should be passed in to act as a title for the card. |
| `component="[element tag]"` | `Card` | Sets the base element for the sub-component (`article` element by default). <br/><br/> If you primarily want to use a card for styling or layout purposes, it's recommended to pass in a value of "div" to this prop. When doing so, the `aria-label` or `aria-labelledby` prop should be omitted as these props are not well supported on `div` elements without a `role`. |
| `component="[element tag]"` | `Card` | Sets the base element for the sub-component (`div` element by default). <br/><br/> When using `div` as the component, the `aria-label` and `aria-labelledby` props should be omitted as these props are not well supported on `div` elements without a `role`. |
| `hasSelectableInput` | `Card` | Adds a visually hidden input that notifies users navigating via assistive technologies that a card is selectable. This prop should only be passed in when only one card within a set of cards should be selectable at a time, such as for a [primary-detail view](/demos/primary-detail). <br/><br/> When this prop is passed in, either a `CardTitle` sub-component must exist in the card, or the `selectableInputAriaLabel` prop must be passed in. The hidden input will automatically be given an accessible name when a `CardTitle` exists within the card, otherwise the value given to the `selectableInputAriaLabel` prop will add an accessible name to the input. |
| `isDisabledRaised` | `Card` | Adds styling to visually indicate that a selectable card is disabled. When the `hasSelectableInput` prop is passed in, this prop will also set the selectable input's `disabled` attribute. |
| `isExpanded` | `Card` | Adds styling to a card toggle to visually indicate whether the expandable content is expanded or collapsed. When this prop is passed in, `onExpand` and `toggleButtonsProps` must be passed into the `CardHeader` sub-component. |
Expand All @@ -69,7 +69,7 @@ When a card has expandable content, `toggleButtonProps` must be passed into the
)}
```

The `aria-label` property gives the toggle an accessible name for assistive technologies to announce to users, e.g. "Toggle label, button".
The `aria-label` property gives the toggle an accessible name for assistive technologies to announce to users, e.g. "Toggle label, button".

The `aria-labelledby` should include the `id` of a `CardTitle` sub-component if one exists or the `id` of the card itself, as well as the `id` of the toggle. This will combine the accessible name of both the `CardTitle` or `Card` and toggle, e.g. "Card title Toggle label, button". The order in which the ID's are passed in will determine this combined accessible name.

Expand All @@ -81,7 +81,7 @@ The `aria-label` and `id` attributes can be omitted from the `toggleButtonProps`

The following HTML attributes and PatternFly classes can be used for more fine-tuned control over accessibility.

| Attribute or class | Applied to | Reason |
| Attribute or class | Applied to | Reason |
|---|---|---|
| `aria-label="[text describing the card]"` or `aria-labelledby="[id of the element that labels the card]"` | `.pf-c-card` | Adds an accessible name to the card. If the card has a `.pf-c-card__title`, the `aria-labelledby` attribute should be passed in with a value of the card title's `id` attribute. Otherwise the `aria-label` attribute should be passed in to act as a title for the card. |
| `tabindex="0"` | `.pf-c-card.pf-m-selectable-raised` or `.pf-c-card.pf-m-selectable` | Inserts the card into the tab order of the page so that it can be navigated to with standard keyboard navigation. **Required** when a card is selectable. |
Expand All @@ -103,4 +103,4 @@ You should generally ensure a card does not have an excessive amount of function

For both the React and HTML/CSS library, several sub-components have a default element that is used as a wrapper. For example, the `Card`/`.pf-c-card` sub-component uses the `article` element as its default wrapper.

While this wrapper element can be customized in both libraries, you must ensure doing so does not create invalid markup nor makes the card as a whole less accessible.
While this wrapper element can be customized in both libraries, you must ensure doing so does not create invalid markup nor makes the card as a whole less accessible.