-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
7ec9542
commit 0c4b76a
Showing
5 changed files
with
96 additions
and
34 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,29 +1,92 @@ | ||
| # Breadcrumb | ||
|
|
||
| `Breadcrumb` component is used for the page navigation and it provides the | ||
| required aria attributes for it's links. It follows the | ||
| [WAI-ARIA Breadcrumb Pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#breadcrumb) | ||
| required aria attributes for it's links and the current link. It follows the | ||
| [WAI-ARIA Breadcrumb Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/) | ||
| for its | ||
| [accessibility properties](https://www.w3.org/TR/wai-aria-practices-1.2/#wai-aria-roles-states-and-properties-2). | ||
| [accessibility properties](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/#:~:text=Not%20applicable.-,WAI%2DARIA%20Roles%2C%20States%2C%20and%20Properties,-Breadcrumb%20trail%20is). | ||
|
|
||
| <!-- INJECT_TOC --> | ||
| ## Table of Contents | ||
|
|
||
| - [Usage](#usage) | ||
| - [Composition](#composition) | ||
| - [Props](#props) | ||
| - [`BreadcrumbLinkOptions`](#breadcrumblinkoptions) | ||
| - [`BreadcrumbsOptions`](#breadcrumbsoptions) | ||
|
|
||
| ## Usage | ||
|
|
||
| <!-- IMPORT_EXAMPLE src/breadcrumbs/stories/templates/BreadcrumbsBasicJsx.ts --> | ||
| ```js | ||
| import * as React from "react"; | ||
|
|
||
| import { BreadcrumbLink, Breadcrumbs } from "@adaptui/react"; | ||
|
|
||
| export const BreadcrumbsBasic = props => { | ||
| return ( | ||
| <Breadcrumbs className="breadcrumb"> | ||
| <ol> | ||
| <li> | ||
| <BreadcrumbLink href="https://www.w3.org/WAI/ARIA/apg/"> | ||
| ARIA Authoring Practices Guide | ||
| </BreadcrumbLink> | ||
| </li> | ||
| <li> | ||
| <BreadcrumbLink href="https://www.w3.org/WAI/ARIA/apg/patterns/"> | ||
| APG Patterns | ||
| </BreadcrumbLink> | ||
| </li> | ||
| <li> | ||
| <BreadcrumbLink | ||
| isCurrentPage | ||
| href="https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/" | ||
| > | ||
| Breadcrumb Pattern | ||
| </BreadcrumbLink> | ||
| </li> | ||
| <li> | ||
| <BreadcrumbLink href="https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/"> | ||
| Breadcrumb Example | ||
| </BreadcrumbLink> | ||
| </li> | ||
| </ol> | ||
| </Breadcrumbs> | ||
| ); | ||
| }; | ||
|
|
||
| <!-- CODESANDBOX | ||
| link_title: Breadcrumbs | ||
| js: src/breadcrumbs/stories/templates/BreadcrumbsBasicJsx.ts | ||
| css: src/breadcrumbs/stories/templates/BreadcrumbsBasicCss.ts | ||
| --> | ||
| export default BreadcrumbsBasic; | ||
| ``` | ||
|
|
||
| ## Accessibility Requirement | ||
| [](https://codesandbox.io/s/edse1g) | ||
| [](https://codesandbox.io/s/0jfmlo) | ||
|
|
||
| - `Breadcrumbs` should have `aria-label` or `aria-labelledby` attribute. | ||
| - `BreadcrumbLink` should have `aria-current` set to `page` if the currenct page | ||
| is loaded. | ||
| ## Composition | ||
|
|
||
| <!-- INJECT_COMPOSITION src/breadcrumbs --> | ||
| - BreadcrumbLink uses `CommandOptions` | ||
| - Breadcrumbs uses `Role` | ||
|
|
||
| ## Props | ||
|
|
||
| ### `BreadcrumbLinkOptions` | ||
|
|
||
| | Name | Type | Description | | ||
| | :------------------ | :-------------------------------- | :----------------------------------- | | ||
| | **`isCurrentPage`** | <code>boolean \| undefined</code> | If true, sets `aria-current: "page"` | | ||
|
|
||
| <details><summary>CommandOptions props</summary> | ||
| > These props are returned by the other props You can also provide these props. | ||
| | Name | Type | Description | | ||
| | :--------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | **`disabled`** | <code>boolean \| undefined</code> | Determines whether the focusable element is disabled. If the focusableelement doesn't support the native `disabled` attribute, the`aria-disabled` attribute will be used instead. | | ||
| | **`autoFocus`** | <code>boolean \| undefined</code> | Automatically focus the element when it is mounted. It works similarly tothe native `autoFocus` prop, but solves an issue where the element isgiven focus before React effects can run. | | ||
| | **`focusable`** | <code>boolean \| undefined</code> | Whether the element should be focusable. | | ||
| | **`accessibleWhenDisabled`** | <code>boolean \| undefined</code> | Determines whether the element should be focusable even when it isdisabled.This is important when discoverability is a concern. For example:> A toolbar in an editor contains a set of special smart paste functionsthat are disabled when the clipboard is empty or when the function is notapplicable to the current content of the clipboard. It could be helpful tokeep the disabled buttons focusable if the ability to discover theirfunctionality is primarily via their presence on the toolbar.Learn more on [Focusability of disabledcontrols](https://www.w3.org/TR/wai-aria-practices-1.2/#kbd_disabled_controls). | | ||
| | **`onFocusVisible`** | <code title="((event: SyntheticEvent<Element, Event>) => void) \| undefined">((event: SyntheticEvent<Element, Event>) => voi...</code> | Custom event handler that is called when the element is focused via thekeyboard or when a key is pressed while the element is focused. | | ||
| | **`clickOnEnter`** | <code>boolean \| undefined</code> | If true, pressing the enter key will trigger a click on the button. | | ||
| | **`clickOnSpace`** | <code>boolean \| undefined</code> | If true, pressing the space key will trigger a click on the button. | | ||
|
|
||
| </details> | ||
|
|
||
| ### `BreadcrumbsOptions` | ||
|
|
||
| No props to show |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters