a11y-panel 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +114 -0
- package/dist/a11y-panel.es.js +2618 -0
- package/dist/a11y-panel.umd.cjs +333 -0
- package/dist/components/AccessibilityWidget.d.ts +18 -0
- package/dist/components/ConfigComponents/ColorsSelect.d.ts +7 -0
- package/dist/components/ConfigComponents/Counter.d.ts +9 -0
- package/dist/components/ConfigComponents/FontButtons.d.ts +1 -0
- package/dist/components/ConfigComponents/FontColor.d.ts +1 -0
- package/dist/components/ConfigComponents/FontSize.d.ts +1 -0
- package/dist/components/ConfigComponents/HideImages.d.ts +1 -0
- package/dist/components/ConfigComponents/HighContrast.d.ts +1 -0
- package/dist/components/ConfigComponents/HighlightLinks.d.ts +1 -0
- package/dist/components/ConfigComponents/HighlightTitles.d.ts +1 -0
- package/dist/components/ConfigComponents/LetterSpacing.d.ts +1 -0
- package/dist/components/ConfigComponents/LineHeight.d.ts +1 -0
- package/dist/components/ConfigComponents/LowContrast.d.ts +1 -0
- package/dist/components/ConfigComponents/Monochrome.d.ts +1 -0
- package/dist/components/ConfigComponents/SettingsBox.d.ts +8 -0
- package/dist/components/ConfigComponents/TextCase.d.ts +2 -0
- package/dist/components/ConfigComponents/TitleBackgroundColor.d.ts +1 -0
- package/dist/components/ConfigComponents/TitleColor.d.ts +1 -0
- package/dist/components/ConfigComponents/Toggle.d.ts +6 -0
- package/dist/components/Context/Store.d.ts +14 -0
- package/dist/components/Context/initialState.d.ts +21 -0
- package/dist/components/Context/reducer.d.ts +66 -0
- package/dist/components/Footer.d.ts +1 -0
- package/dist/components/Header.d.ts +1 -0
- package/dist/components/StyleSettings.d.ts +1 -0
- package/dist/components/TextContent/SectionTitle.d.ts +5 -0
- package/dist/components/TextContent/SubSectionTitle.d.ts +5 -0
- package/dist/components/Widget.d.ts +11 -0
- package/dist/components/assets/AccessibilityIcon.d.ts +3 -0
- package/dist/components/assets/BoldIcon.d.ts +2 -0
- package/dist/components/assets/CloseIcon.d.ts +4 -0
- package/dist/components/assets/ItalicIcon.d.ts +2 -0
- package/dist/components/assets/MinusIcon.d.ts +2 -0
- package/dist/components/assets/PlusIcon.d.ts +4 -0
- package/dist/components/assets/TextAlignCenterIcon.d.ts +2 -0
- package/dist/components/assets/TextAlignLeftIcon.d.ts +2 -0
- package/dist/components/assets/TextAlignRightIcon.d.ts +2 -0
- package/dist/components/helpers/createStyles.d.ts +4 -0
- package/dist/components/variables/initialStyleSettings.d.ts +13 -0
- package/dist/favicon.ico +0 -0
- package/dist/index.d.ts +4 -0
- package/dist/logo192.png +0 -0
- package/dist/logo512.png +0 -0
- package/dist/manifest.json +25 -0
- package/dist/robots.txt +3 -0
- package/dist/style.css +1 -0
- package/package.json +62 -0
package/README.md
ADDED
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
# React Accessibility Widget
|
|
2
|
+
|
|
3
|
+
A customizable embedded widget that allows users to adjust the visual appearance of React applications to meet their accessibility needs.
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
## Features
|
|
8
|
+
|
|
9
|
+
- **Font Styling**: Adjust font size, color, family, and case.
|
|
10
|
+
- **Layout Adjustments**: Modify line height, letter spacing, and text alignment.
|
|
11
|
+
- **Visual Assistance**: Highlight links and titles, or hide non-essential images.
|
|
12
|
+
- **Contrast Modes**: Toggle high contrast, low contrast, or monochrome themes.
|
|
13
|
+
|
|
14
|
+
## Installation
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
npm install a11y-panel styled-components
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
yarn add a11y-panel styled-components
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
_Note: `styled-components` is required as a peer dependency._
|
|
25
|
+
|
|
26
|
+
## Usage
|
|
27
|
+
|
|
28
|
+
### 1. Basic Integration
|
|
29
|
+
|
|
30
|
+
Mount the `<AccessibilityWidget />` near the root of your application. The widget uses absolute positioning to float above your interface.
|
|
31
|
+
|
|
32
|
+
```tsx
|
|
33
|
+
import React from "react";
|
|
34
|
+
import { AccessibilityWidget } from "a11y-panel";
|
|
35
|
+
|
|
36
|
+
export default function App() {
|
|
37
|
+
return (
|
|
38
|
+
<div>
|
|
39
|
+
<AccessibilityWidget />
|
|
40
|
+
<main>
|
|
41
|
+
<h1>Welcome</h1>
|
|
42
|
+
<p>Your accessible application content goes here.</p>
|
|
43
|
+
</main>
|
|
44
|
+
</div>
|
|
45
|
+
);
|
|
46
|
+
}
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
### 2. Custom Theming
|
|
50
|
+
|
|
51
|
+
Override the widget's internal colors using the `theme` prop to match your brand identity.
|
|
52
|
+
|
|
53
|
+
```tsx
|
|
54
|
+
import React from "react";
|
|
55
|
+
import { AccessibilityWidget, WidgetTheme } from "a11y-panel";
|
|
56
|
+
|
|
57
|
+
const customTheme: WidgetTheme = {
|
|
58
|
+
primary: "#005f73",
|
|
59
|
+
background: "#ffffff",
|
|
60
|
+
widgetBackground: "#1a1a1a",
|
|
61
|
+
text: "#eaeaea",
|
|
62
|
+
iconColor: "#005f73",
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
export default function App() {
|
|
66
|
+
return (
|
|
67
|
+
<>
|
|
68
|
+
<AccessibilityWidget theme={customTheme} />
|
|
69
|
+
<main>...</main>
|
|
70
|
+
</>
|
|
71
|
+
);
|
|
72
|
+
}
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
### 3. Positioning and Custom Icons
|
|
76
|
+
|
|
77
|
+
Control where the widget spawns on the screen or replace the default trigger icon.
|
|
78
|
+
|
|
79
|
+
```tsx
|
|
80
|
+
import React from "react";
|
|
81
|
+
import { AccessibilityWidget } from "a11y-panel";
|
|
82
|
+
|
|
83
|
+
const EyeIcon = () => (
|
|
84
|
+
<svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
|
|
85
|
+
<path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" />
|
|
86
|
+
</svg>
|
|
87
|
+
);
|
|
88
|
+
|
|
89
|
+
export default function App() {
|
|
90
|
+
return (
|
|
91
|
+
<>
|
|
92
|
+
<AccessibilityWidget
|
|
93
|
+
initialPosition={{ x: 20, y: 80 }}
|
|
94
|
+
customIcon={<EyeIcon />}
|
|
95
|
+
/>
|
|
96
|
+
<main>...</main>
|
|
97
|
+
</>
|
|
98
|
+
);
|
|
99
|
+
}
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
## Props Reference
|
|
103
|
+
|
|
104
|
+
| Prop | Type | Description |
|
|
105
|
+
| ----------------- | -------------------------- | ----------------------------------------------------------------- |
|
|
106
|
+
| `theme` | `WidgetTheme` | A partial theme object to override the widget's default colors. |
|
|
107
|
+
| `initialPosition` | `{ x: number; y: number }` | The starting coordinates for the draggable widget trigger. |
|
|
108
|
+
| `customIcon` | `React.ReactNode` | A custom React element to replace the default accessibility icon. |
|
|
109
|
+
|
|
110
|
+
## Use Cases
|
|
111
|
+
|
|
112
|
+
- **Healthcare & Government Portals**: Ensure strict compliance with WCAG guidelines by giving users direct control over text sizes and contrast parameters.
|
|
113
|
+
- **E-Learning Platforms**: Allow neurodivergent students or those with visual impairments to modify line height and typography for better readability.
|
|
114
|
+
- **E-Commerce Web Apps**: Assist users who are color blind by providing a monochrome mode or by highlighting essential actionable links across the site.
|