19 |
33 |
34 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
32 |
27 |
28 |
29 |
30 |
31 | {children}
35 | 18 | 19 | ### Props 20 | 21 | #### Level 22 | 23 |
15 | 16 | Visually hidden is a common technique used in web accessibility to hide content from the visual client, but keep it readable for screen readers. 17 | This component renders html `` as a proxy. 18 | 19 |
18 | 19 | :::note How to 20 | 21 | - Press the `tab` key 22 | - A skip link will be shown on the top of the demo. 23 | - Press `enter` 24 | - Focus will be set on the area of that `SkipLink`. 25 | 26 | ::: 27 | 28 |
28 |
29 |
30 |
33 |
34 | );
35 | };
36 |
--------------------------------------------------------------------------------
/src/components/semantic-headings/helpers.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Please refer to the terms of the license agreement.
3 | *
4 | * (c) 2021 Feedzai, Rights Reserved.
5 | */
6 |
7 | /**
8 | * helpers.ts
9 | *
10 | * @author João Dias Button content:
31 |"{buttonText}"
32 || Name | 16 |Type | 17 |Default Value | 18 |Required | 19 |Description | 20 |
|---|---|---|---|---|
27 | {key}
28 | |
29 |
30 | {props[key].type?.name}
31 | |
32 |
33 | {props[key].defaultValue ? (
34 | {props[key].defaultValue.value}
35 | ) : (
36 | -
37 | )}
38 | |
39 | {props[key].required ? "Yes" : "No"} | 40 |{props[key].description} | 41 |
55 | {list}
56 |
57 | );
58 | }
59 |
60 | return renderLinks();
61 | };
62 |
63 | SkipLinks.defaultProps = SKIP_LINK_ITEMS_DEFAULT_PROPS;
64 |
--------------------------------------------------------------------------------
/src/components/focus-manager/helpers/index.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Please refer to the terms of the license
3 | * agreement.
4 | *
5 | * (c) 2024 Feedzai, Rights Reserved.
6 | */
7 | import { FocusManagerProps } from "../types";
8 | import { Options } from "focus-trap";
9 |
10 | /**
11 | * Sets the initial focus element.
12 | */
13 | export function getInitialFocus(
14 | autoFocus: FocusManagerProps["autoFocus"],
15 | initialFocus: Options["initialFocus"],
16 | ) {
17 | // If true, resumes the normal behaviour
18 | if (autoFocus === true) {
19 | return undefined;
20 | }
21 |
22 | // If false, prevents the autoFocus from happening
23 | else if (autoFocus === false) {
24 | return false;
25 | }
26 |
27 | // If is nil, uses the value defined in the `initialFocus` param,
28 | // which if also nil, resumes the normal behaviour
29 | return initialFocus;
30 | }
31 |
32 | /**
33 | * Sets the fallback focus element to a:
34 | * 1. Defined option as prop
35 | * 2. A fallback ref element
36 | */
37 | export function getFallbackFocus15 | 16 | :::note How to 17 | 18 | - Click on the `Disable Mouse` button 19 | - Check if this demo is accessible. (Spoiler alert: It's not 😀) 20 | - Can you press `tab` and navigate through the interface? 21 | - Can you navigate to landmark areas? 22 | ::: 23 | 24 | ### Rationale 25 | 26 | Suppose you - or a colleague of yours - is working on a component and with accessibility in mind (as you should). 27 | Then, hiding the mouse pointer might be an excellent way to test out possible regressions. 28 | 29 | By not showing any mouse pointer on the screen, this little helper will "force" you to leave your pointing devices aside and think about all the possible ways your component needs to work like: 30 | 31 | - "Does this component/page work the same with the keyboard and a mouse"? 32 | - "Can I do the same things or, at least, achieve the same outcome"? 33 | - "Is the focus is visible"? 34 | - "Is it perceivable and operable with the keyboard"? 35 | 36 | It might also point you towards learning how to operate an interface using a screen-reader, like VoiceOver, NVDA, Narrator or JAWS. 37 | 38 | Of course, a component being operable with the keyboard is not the same as being accessible, but it's a good starting point. 39 | 40 | :::info 💡 Tip 41 | 42 | For instance, while developing, you can wrap all your content with the `KeyboardOnly` component, or place it as hight as you can on your tree. 43 | This helps you test if your content works as expected. 44 | 45 | Of course, before committing or releasing to production, remove the component from the DOM. 46 | ::: 47 | -------------------------------------------------------------------------------- /src/global.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/no-empty-interface */ 2 | /* 3 | * Please refer to the terms of the license 4 | * agreement. 5 | * 6 | * (c) 2021 Feedzai, Rights Reserved. 7 | */ 8 | 9 | /** 10 | * modules.d.ts 11 | * 12 | * @author João Dias
16 |
17 |
67 | {isOpen ? (
68 |
77 | );
78 | }
79 |
--------------------------------------------------------------------------------
/src/components/announcer/messages/provider.tsx:
--------------------------------------------------------------------------------
1 | /*
2 | * Please refer to the terms of the license
3 | * agreement.
4 | *
5 | * (c) 2021 Feedzai, Rights Reserved.
6 | */
7 |
8 | /**
9 | * provider.tsx
10 | *
11 | * @author João Dias | Company | 19 |Contact | 20 |Country | 21 |
|---|---|---|
| Alfreds Futterkiste | 24 |Maria Anders | 25 |26 | 27 | | 28 |
| Centro comercial Moctezuma | 31 |Francisco Chang | 32 |33 | 34 | | 35 |
| Ernst Handel | 38 |Roland Mendel | 39 |40 | 41 | | 42 |
| Island Trading | 45 |Helen Bennett | 46 |47 | 50 | | 51 |
| Laughing Bacchus Winecellars | 54 |Yoshi Tannamuri | 55 |56 | 57 | | 58 |
| Magazzini Alimentari Riuniti | 61 |Giovanni Rovelli | 62 |63 | 64 | | 65 |
69 |
70 |
73 |
74 |
75 | ) : null}
76 | 21 | 22 | :::note How to 23 | 24 | 1. Press `tab` to focus on the first button ("Enabled"). 25 | 2. Press `tab` again and check that the second button ("Disabled") won't receive focus, but the third ("Disabled, but Tabbable") will. 26 | - VoiceOver output: `"Disabled, but Tabbable, dimmed, button"`. 27 | 3. Press `tab`again and the focus will move to the first input. 28 | 4. Press `tab` again and the disabled input will receive focus 29 | - VoiceOver output: `"36 characters content selected, password, dimmable clickable, secure text"`. 30 | ::: 31 | 32 | ### Usage 33 | 34 | ```jsx 35 | import { useTabbable } from "@feedzai/react-a11y-tools"; 36 | 37 | ... 38 | 39 | const htmlProps = useTabbable({ 40 | ...props, 41 | disabled, 42 | focusable: true, 43 | }); 44 | 45 | (or) 46 | 47 | const htmlProps = useTabbable({ 48 | ...props, 49 | disabled, 50 | focusable, 51 | }); 52 | 53 | ... 54 | 55 | return ( 56 | 57 | ); 58 | ``` 59 | 60 | React will render the `aria-disabled` attribute instead of `disabled`, which means that it will be able to receive focus, but any click, keypress or change events will be supressed. 61 | 62 | ### Extra resources 63 | 64 | - [Making disabled buttons more inclusive](https://css-tricks.com/making-disabled-buttons-more-inclusive/), by [Sandrina Pereira](https://www.sandrina-p.net/). 65 | -------------------------------------------------------------------------------- /cypress/test/components/announcer/messages-announcer.spec.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Please refer to the terms of the license 3 | * agreement. 4 | * 5 | * (c) 2021 Feedzai, Rights Reserved. 6 | */ 7 | 8 | /** 9 | * messages-announcer.spec.tsx 10 | * 11 | * @author João Dias
41 |
44 | {children}
45 |
46 | );
47 | };
48 |
49 | describe("
43 | *
44 | *
45 | *
46 | *
47 | *
48 | *
49 | *
50 | * );
51 | * }
52 | * ```
53 | */
54 | export function FocusManager({
55 | children,
56 | contain = true,
57 | restoreFocus = true,
58 | autoFocus = true,
59 | options,
60 | }: FocusManagerProps): JSX.Element {
61 | const { fallbackRef, ...props } = useFocusManager({
62 | contain,
63 | restoreFocus,
64 | autoFocus,
65 | options,
66 | });
67 |
68 | return (
69 |
71 | {children}
72 |
73 |
33 |
36 |
37 | );
38 | };
39 |
40 | describe("{message}
; 81 | } 82 | 83 | console.log; 84 | 85 | return ( 86 |
94 | {renderText()}
95 |
96 | );
97 | };
98 |
--------------------------------------------------------------------------------
/documentation/docs/content-and-navigation/demos/semantic-headings.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Heading, Level } from "../../../../src/components/semantic-headings";
3 | import styles from "./styles.module.scss";
4 |
5 | export const DemoSemanticHeadings = () => {
6 | return (
7 | 
16 |
18 | A title
29 | Another title
36 |
43 | And finally, another title
44 |
50 |
51 | 19 | Holy grail funding non-disclosure agreement advisor ramen bootstrapping ecosystem. 20 | Beta crowdfunding iteration assets business plan paradigm shift stealth mass market 21 | seed money rockstar niche market marketing buzz market. 22 |
23 |24 | Burn rate release facebook termsheet equity technology. Interaction design rockstar 25 | network effects handshake creative startup direct mailing. Technology influencer 26 | direct mailing deployment return on investment seed round. 27 |
28 |30 | Termsheet business model canvas user experience churn rate low hanging fruit backing 31 | iteration buyer seed money. Virality release launch party channels validation learning 32 | curve paradigm shift hypotheses conversion. Stealth leverage freemium venture startup 33 | business-to-business accelerator market. 34 |
35 |37 | Gen-z strategy long tail churn rate seed money channels user experience incubator 38 | startup partner network low hanging fruit direct mailing. Client backing success 39 | startup assets responsive web design burn rate A/B testing metrics first mover 40 | advantage conversion. 41 |42 |
45 | Freemium non-disclosure agreement lean startup bootstrapping holy grail ramen MVP 46 | iteration accelerator. Strategy market ramen leverage paradigm shift seed round 47 | entrepreneur crowdfunding social proof angel investor partner network virality. 48 |
49 | to receive focus if the popover's content includes no tabbable elements.
58 | * Make sure the fallback element has a negative tabindex so it can be programmatically focused.
59 | */
60 | fallbackRef: RefObject;
61 |
62 | /**
63 | * Pause an active focus trap's event listening without deactivating the trap.
64 | * If the focus trap has not been activated, nothing happens.
65 | * Returns the trap.
66 | *
67 | * Any `onDeactivate` callback will not be called, and focus will not return to the element that was focused before the trap's activation.
68 | * But the trap's behavior will be paused.
69 | * This is useful in various cases, one of which is when you want one focus trap within another.
70 | */
71 | paused: boolean;
72 |
73 | /**
74 | * Props for the `FocusTrap` component
75 | */
76 | focusTrapOptions: FocusTrapProps["focusTrapOptions"];
77 | }
78 |
--------------------------------------------------------------------------------
/documentation/docusaurus.config.ts:
--------------------------------------------------------------------------------
1 | import {themes as prismThemes} from 'prism-react-renderer';
2 | import type {Config} from '@docusaurus/types';
3 | import type * as Preset from '@docusaurus/preset-classic';
4 | import { join, resolve } from 'path';
5 | import packageJSON from "../package.json";
6 |
7 | const config: Config = {
8 | title: "react-a11y-tools",
9 | tagline: "Focus on Accessible Web experiences",
10 | favicon: "img/favicon.svg",
11 | url: "https://feedzai.github.io",
12 | baseUrl: "/react-a11y-tools/",
13 | organizationName: "@feedzai",
14 | projectName: "react-a11y-tools",
15 | onBrokenLinks: 'throw',
16 | onBrokenMarkdownLinks: 'warn',
17 | i18n: {
18 | defaultLocale: 'en',
19 | locales: ['en'],
20 | },
21 | customFields: {
22 | version: packageJSON.version,
23 | },
24 | presets: [
25 | [
26 | 'classic',
27 | {
28 | docs: {
29 | sidebarPath: './sidebars.ts',
30 | editUrl: "https://github.com/feedzai/react-a11y-tools/",
31 | },
32 | theme: {
33 | customCss: './src/css/custom.css',
34 | },
35 | } satisfies Preset.Options,
36 | ],
37 | ],
38 | plugins: [
39 | () => ({
40 | name: "resolve-react",
41 | configureWebpack() {
42 | const NODE_MODULES = join(__dirname, "../node_modules");
43 | const REACT = `${NODE_MODULES}/react`;
44 | const REACT_DOM = `${NODE_MODULES}/react-dom`;
45 |
46 | return {
47 | resolve: {
48 | alias: {
49 | react: resolve(REACT),
50 | "react-dom": resolve(REACT_DOM),
51 | },
52 | },
53 | };
54 | },
55 | }),
56 | "docusaurus-plugin-sass",
57 | [
58 | "docusaurus-plugin-react-docgen-typescript",
59 | {
60 | src: ["../src/**/*.tsx"],
61 | global: true,
62 | parserOptions: {
63 | propFilter: (prop, component) => {
64 | if (prop.parent) {
65 | return !prop.parent.fileName.includes("@types/react");
66 | }
67 |
68 | return true;
69 | },
70 | },
71 | },
72 | ],
73 | ],
74 | themeConfig: {
75 | // Replace with your project's social card
76 | image: 'img/docusaurus-social-card.jpg',
77 | navbar: {
78 | title: "React a11y tools",
79 | logo: {
80 | alt: "",
81 | src: "img/favicon.svg",
82 | },
83 | items: [
84 | {
85 | href: "https://www.npmjs.com/package/@feedzai/react-a11y-tools",
86 | label: "NPM",
87 | position: "right",
88 | },
89 | {
90 | href: "https://github.com/feedzai/react-a11y-tools",
91 | label: "GitHub",
92 | position: "right",
93 | },
94 | ],
95 | },
96 | prism: {
97 | theme: prismThemes.github,
98 | darkTheme: prismThemes.dracula,
99 | },
100 | } satisfies Preset.ThemeConfig,
101 | };
102 |
103 | export default config;
104 |
--------------------------------------------------------------------------------
/cypress/support/commands.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/no-namespace */
2 | /*
3 | * Please refer to the terms of the license
4 | * agreement.
5 | *
6 | * (c) 2021 Feedzai, Rights Reserved.
7 | */
8 |
9 | /**
10 | * commands.ts
11 | *
12 | * @author João Dias
13 | * @since 1.0.0
14 | */
15 | import "@testing-library/cypress/add-commands";
16 | import "cypress-real-events/support";
17 | import "./a11y";
18 | import { isAriaDisabled } from "./a11y/assertions/isAriaDisabled";
19 | import { recurse } from "cypress-recurse";
20 | import { mount, unmount } from "cypress/react";
21 |
22 | chai.use(isAriaDisabled);
23 |
24 | declare global {
25 | namespace Cypress {
26 | interface Chainable {
27 | tab(options?: Partial<{ shift: boolean }>): Chainable;
28 |
29 | /**
30 | * Presses the tab key until a predicate element is true.
31 | * It accepts a callback for finding the target element, and an optional shift element to tab backwards.
32 | * This commmand is specially useful to avoid chaining `.realPress("Tab")` multiple times before reaching an element.
33 | *
34 | * @requires `cypress-real-events` needs to be installed
35 | *
36 | * @example
37 | *
38 | * // Press tab until cypress finds the tab with the name "Transaction History"
39 | * cy.tabUntil(() => cy.getTab("Transaction History"));
40 | *
41 | * // Press tab until cypress finds the tab with the name "Transaction History",
42 | * // BUT travel backwards, using the `Shift+Tab` key combo
43 | * cy.tabUntil(() => cy.getTab("Transaction History", true));
44 | */
45 | tabUntil>>(
46 | element: () => GenericCallback,
47 | shift?: boolean,
48 | ): Cypress.Chainable>;
49 |
50 | mount: typeof mount;
51 | unmount: typeof unmount;
52 | }
53 | }
54 | }
55 |
56 | function tab(
57 | prevSubject: GenericSubject,
58 | options: Partial<{ shift: boolean }> = { shift: false },
59 | ) {
60 | return cy.wrap(prevSubject).realPress(options.shift ? ["Shift", "Tab"] : "Tab");
61 | }
62 |
63 | function tabUntil>>(
64 | getElement: () => GenericCallback,
65 | shift = false,
66 | ) {
67 | return recurse(
68 | () => getElement(),
69 | /**
70 | * Element assertion.
71 | *
72 | * @param {JQuery} $el
73 | * @returns {boolean}
74 | */
75 | ($el: JQuery): boolean => $el.is(":focus"),
76 | {
77 | log: "Found the element!",
78 | post() {
79 | cy.focused().realPress(shift ? ["Shift", "Tab"] : "Tab");
80 | },
81 | },
82 | ).should("have.focus");
83 | }
84 |
85 | Cypress.Commands.add("tab", { prevSubject: ["element"] }, tab);
86 |
87 | Cypress.Commands.add("tabUntil", tabUntil);
88 |
--------------------------------------------------------------------------------
/documentation/docs/getting-started.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar_position: 1
3 | title: Getting Started
4 | ---
5 |
6 | ## About
7 |
8 | ### The Problem
9 |
10 | We are in the era of design systems. Every company - from the smallest to the largest - has one or has thought about making one. These are great, and they provide the tools for building quick, fast and consistent user interfaces.
11 |
12 | However, accessibility is still far from an easy task, especially when using libraries like React. Whether we developers use others' design systems or build our own from scratch, accessibility is still considered a "last-minute-addition". And, sometimes, companies don't even have the resources or time to make it a priority.
13 |
14 | ### The Solution
15 |
16 | Our goal is to make some parts of the accessibility process easier. Topics like focus management, navigation and announcements are all subjects we think can provide a helping hand.
17 |
18 | This library provides accessibility and behaviour following the WAI-ARIA Authoring Practices, including screen-reader and keyboard navigation support.
19 |
20 | We do not force any styling methodology or design-specific details. Instead, the little package provides the behaviour and interactions so that you can focus on your design.
21 |
22 | We also provide a simple testing tool so that you can emulate a no-mouse environment.
23 |
24 | ## Install
25 |
26 | Inside your React project directory, install `@feedzai/react-a11y-tools` by running either of the following:
27 |
28 | ```sh
29 | $ npm install @feedzai/react-a11y-tools
30 |
31 | # or if you use Yarn
32 |
33 | $ yarn add @feedzai/react-a11y-tools
34 | ```
35 |
36 | ## Roadmap
37 |
38 | Here is a table of the components, custom hooks and their status.
39 |
40 | ✅ - Released
41 | 🛠 - Building
42 | 43 | | Status | Name | type | 44 | | ------------------- | ------------------------------------------------------------------- | ------------------------ | 45 | |✅ | [Route Announcer ](/docs/feedback/route-announcer) | `feedback` |
46 | | ✅ | [Messages Announcer](/docs/feedback/messages-announcer) | `feedback` |
47 | | ✅ | [Focus Manager](/docs/manage-focus/focus-manager) | `focus` |
48 | | ✅ | [Rover Provider](/docs/manage-focus/rover-provider) | `focus` |
49 | | ✅ | [Keyboard Only](/docs/testing/keyboard-only) | `testing utilities` |
50 | | ✅ | [Skip Links](/docs/content-and-navigation/skip-links) | `content and navigation` |
51 | | ✅ | [Semantic Headings](/docs/content-and-navigation/semantic-headings) | `content and navigation` |
52 | | ✅ | [useTabbable](/docs/hooks/use-tabbable) | `hooks` |
53 |
--------------------------------------------------------------------------------
/cypress/test/components/focus-manager/demos/MultipleManagers.tsx:
--------------------------------------------------------------------------------
1 | /*
2 | * Please refer to the terms of the license
3 | * agreement.
4 | *
5 | * (c) 2024 Feedzai, Rights Reserved.
6 | */
7 | import React from "react";
8 | import { useState } from "react";
9 | import { FocusManager } from "src/components";
10 | import styles from "./MultipleManagers.module.scss";
11 |
12 | export function MultipleManagers() {
13 | const [isOpen, setIsOpen] = useState(false);
14 | const [isSecondOpen, setIsSecondOpen] = useState(false);
15 | return (
16 | (
36 | props: Omit,
37 | ref: RefObject | MutableRefObject,
38 | ): UseFocusManagerWithRef;
39 | export function useFocusManager(
40 | props: Omit,
41 | ref?: never,
42 | ): UseFocusManagerAsProps;
43 | export function useFocusManager(
44 | props: Omit,
45 | ref?: RefObject | MutableRefObject,
46 | ): UseFocusManagerWithRef | UseFocusManagerAsProps {
47 | const fallbackRef = useRef(null);
48 |
49 | /**
50 | * Returns the correct prop value for the return focus functionality.
51 | */
52 | const returnFocusOptions = useMemo(() => {
53 | if (!props.restoreFocus) {
54 | return {
55 | returnFocusOnDeactivate: true,
56 | };
57 | }
58 |
59 | return getReturnFocusProps(props.restoreFocus);
60 | }, [props.restoreFocus]);
61 |
62 | /**
63 | * Sets the fallback focus element to a:
64 | * 1. Defined option as prop
65 | * 2. A fallback ref element
66 | */
67 | const fallbackFocus = useMemo(() => {
68 | return getFallbackFocus(fallbackRef.current, props.options?.fallbackFocus);
69 | }, [props.options?.fallbackFocus]);
70 |
71 | /**
72 | * Sets the initial focus element.
73 | */
74 | const initialFocus = useMemo(() => {
75 | return getInitialFocus(props.autoFocus, props.options?.initialFocus);
76 | }, [props]);
77 |
78 | const FOCUS_TRAP_OPTIONS: FocusManagerProps["options"] = {
79 | ...props.options,
80 | ...returnFocusOptions,
81 | fallbackFocus,
82 | initialFocus,
83 | };
84 |
85 | if (ref?.current) {
86 | return createFocusTrap(ref.current, FOCUS_TRAP_OPTIONS);
87 | }
88 |
89 | return {
90 | fallbackRef,
91 | paused: !!(props.contain === "paused" || props.contain === false),
92 | focusTrapOptions: FOCUS_TRAP_OPTIONS,
93 | } as UseFocusManagerAsProps;
94 | }
95 |
--------------------------------------------------------------------------------
/cypress/support/a11y/checkA11y.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * The copyright of this file belongs to Feedzai. The file cannot be
3 | * reproduced in whole or in part, stored in a retrieval system, transmitted
4 | * in any form, or by any means electronic, mechanical, or otherwise, without
5 | * the prior permission of the owner. Please refer to the terms of the license
6 | * agreement.
7 | *
8 | * (c) 2022 Feedzai, Rights Reserved.
9 | */
10 |
11 | /**
12 | * checkA11y.ts
13 | *
14 | * @author João Dias
15 | * @since ```feedzai.next.release```
16 | */
17 | import * as axe from "axe-core";
18 |
19 | export interface Options extends axe.RunOptions {
20 | includedImpacts?: string[];
21 | }
22 |
23 | function isEmptyObjectorNull(value: any) {
24 | if (value == null) {
25 | return true;
26 | }
27 | return Object.entries(value).length === 0 && value.constructor === Object;
28 | }
29 |
30 | const checkA11y = (
31 | context?: axe.ElementContext,
32 | options?: Options,
33 | violationCallback?: (violations: axe.Result[]) => void,
34 | skipFailures = false,
35 | ) => {
36 | cy.window({ log: false })
37 | .then((win) => {
38 | if (isEmptyObjectorNull(context)) {
39 | context = undefined;
40 | }
41 |
42 | if (isEmptyObjectorNull(options)) {
43 | options = undefined;
44 | }
45 |
46 | if (isEmptyObjectorNull(violationCallback)) {
47 | violationCallback = undefined;
48 | }
49 |
50 | const { includedImpacts, ...axeOptions } = options || {};
51 |
52 | return win.axe.run(context || win.document, axeOptions).then(({ violations }) => {
53 | return includedImpacts && Array.isArray(includedImpacts) && Boolean(includedImpacts.length)
54 | ? violations.filter((v) => v.impact && includedImpacts.includes(v.impact))
55 | : violations;
56 | });
57 | })
58 | .then((violations) => {
59 | if (violations.length) {
60 | if (violationCallback) {
61 | violationCallback(violations);
62 | }
63 |
64 | violations.forEach((v) => {
65 | const selectors = v.nodes.reduce((acc, node) => acc.concat(node.target), []).join(", ");
66 |
67 | Cypress.log({
68 | $el: Cypress.$(selectors),
69 | name: "a11y error!",
70 | consoleProps: () => v,
71 | message: `${v.id} on ${v.nodes.length} Node${v.nodes.length === 1 ? "" : "s"}`,
72 | });
73 | });
74 | }
75 |
76 | return cy.wrap(violations, { log: false });
77 | })
78 | .then((violations) => {
79 | if (!skipFailures) {
80 | assert.equal(
81 | violations.length,
82 | 0,
83 | `${violations.length} accessibility violation${violations.length === 1 ? "" : "s"} ${violations.length === 1 ? "was" : "were"
84 | } detected`,
85 | );
86 | } else if (violations.length) {
87 | Cypress.log({
88 | name: "a11y violation summary",
89 | message: `${violations.length} accessibility violation${violations.length === 1 ? "" : "s"} ${violations.length === 1 ? "was" : "were"
90 | } detected`,
91 | });
92 | }
93 | });
94 | };
95 |
96 | export default checkA11y;
97 |
--------------------------------------------------------------------------------
/documentation/docs/hooks/demos/useTabbable/index.tsx:
--------------------------------------------------------------------------------
1 | /*
2 | * The copyright of this file belongs to Feedzai. The file cannot be
3 | * reproduced in whole or in part, stored in a retrieval system, transmitted
4 | * in any form, or by any means electronic, mechanical, or otherwise, without
5 | * the prior permission of the owner. Please refer to the terms of the license
6 | * agreement.
7 | *
8 | * (c) 2021 Feedzai, Rights Reserved.
9 | */
10 |
11 | /**
12 | * index.tsx
13 | *
14 | * @author João Dias
15 | * @since ```feedzai.next.release```
16 | */
17 | import React, { useRef, useState, HTMLAttributes, InputHTMLAttributes } from "react";
18 | import { useTabbable } from "../../../../../src/index";
19 | import { makeId } from "@feedzai/js-utilities";
20 | import { useAutoId } from "@feedzai/js-utilities/hooks";
21 | import styles from "./index.modules.scss";
22 |
23 | type Tabbable = {
24 | focusable?: boolean;
25 | disabled?: boolean;
26 | };
27 |
28 | type Button = HTMLAttributes & Tabbable;
29 | type Input = InputHTMLAttributes &
30 | Tabbable & {
31 | label: string;
32 | };
33 |
34 | const Button = ({ id, disabled, ...props }: Button) => {
35 | const autoId = useAutoId(id);
36 | const { current: generatedId } = useRef(makeId("fdz-js-tabbable-button-", autoId));
37 | const { focusable, ...htmlProps } = useTabbable
41 | 🛠 - Building
42 | 43 | | Status | Name | type | 44 | | ------------------- | ------------------------------------------------------------------- | ------------------------ | 45 | |
17 |
18 |
19 |
71 | {isOpen ? (
72 |
99 | );
100 | }
101 |
--------------------------------------------------------------------------------
/src/components/focus-manager/useFocusManager.tsx:
--------------------------------------------------------------------------------
1 | /*
2 | * Please refer to the terms of the license
3 | * agreement.
4 | *
5 | * (c) 2021 Feedzai, Rights Reserved.
6 | */
7 | import { MutableRefObject, RefObject, useMemo, useRef } from "react";
8 | import { createFocusTrap } from "focus-trap";
9 | import { FocusManagerProps, UseFocusManagerAsProps, UseFocusManagerWithRef } from "./types";
10 | import { getFallbackFocus, getInitialFocus, getReturnFocusProps } from "./helpers";
11 |
12 | /**
13 | * Returns an FocusManager interface for the parent FocusManager.
14 | * A FocusManager can be used to programmatically move focus within
15 | * a FocusManager, e.g. in response to user events like keyboard navigation.
16 | *
17 | * @example
18 | * ```tsx
19 | * import { useFocusManager } from "@feedzai/react-a11y-tools";
20 | * ...
21 | * const elementRef = useRef(null);
22 | *
23 | * useFocusManager(elementRef)
24 | *
25 | * return (
26 | * | Company | 21 |Contact | 22 |Country | 23 |
|---|---|---|
| Alfreds Futterkiste | 26 |Maria Anders | 27 |28 | 29 | | 30 |
| Centro comercial Moctezuma | 33 |Francisco Chang | 34 |35 | 36 | | 37 |
| Ernst Handel | 40 |Roland Mendel | 41 |42 | 43 | | 44 |
| Island Trading | 47 |Helen Bennett | 48 |49 | 52 | | 53 |
| Laughing Bacchus Winecellars | 56 |Yoshi Tannamuri | 57 |58 | {" "} 59 | 60 | | 61 |
| Magazzini Alimentari Riuniti | 64 |Giovanni Rovelli | 65 |66 | {" "} 67 | 68 | | 69 |
73 |
74 |
77 |
78 |
79 |
80 |
83 |
84 |
85 | ) : null}
86 | {isSecondOpen ? (
87 |
88 |
89 |
92 |
93 |
94 |
95 |
96 |
97 | ) : null}
98 |
27 | *
28 | *
29 | *
30 | *
31 | * )
32 | * ```
33 | *
34 | */
35 | export function useFocusManager