Skip to content

Commit 904f3b6

Browse files
AnyRoadAnyRoad
committed
properties for aria-label of the collapse/expand toggle. #46 
1 parent 1ace6ff commit 904f3b6

File tree

4 files changed

+48
-24
lines changed

4 files changed

+48
-24
lines changed

‎README.md‎

Lines changed: 26 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,12 @@ https://anyroad.github.io/react-json-view-lite/
110110
| field | string? | Field name |
111111
| newExpandValue | boolean | if node is about to be expanded (`true`) or collapsed (`false`) |
112112

113+
## interface AriaLabels
114+
115+
| Field Name | Type | Description |
116+
| collapseJson | string | `aria-label` property for the "collapse" node button. Default value is "collapse JSON". |
117+
| expandJson | string | `aria-label` property for the "expand" node button. Default value is "expand JSON". |
118+
113119
### Extra exported
114120

115121
| Name | Type | Description |
@@ -121,25 +127,26 @@ https://anyroad.github.io/react-json-view-lite/
121127

122128
### StyleProps
123129

124-
| Name | Type | Description |
125-
| ----------------------- | ------- | ----------------------------------------------------------------------------------------------------------------- |
126-
| container | string | CSS class name for rendering parent block |
127-
| childFieldsContainer | string | CSS class name for rendering parent block of array or object |
128-
| basicChildStyle | string | CSS class name for property block containing property name and value |
129-
| collapseIcon | string | CSS class name for rendering button collapsing Object and Array nodes. Default content is `▾`. |
130-
| expandIcon | string | CSS class name for rendering button expanding Object and Array nodes. Default content is `▸`. |
131-
| collapsedContent | string | CSS class name for rendering placeholder when Object and Array nodes are collapsed. Default contents is `...`. |
132-
| label | string | CSS class name for rendering property names |
133-
| clickableLabel | string | CSS class name for rendering clickable property names (requires the `clickToExpandNode` prop to be true) |
134-
| nullValue | string | CSS class name for rendering null values |
135-
| undefinedValue | string | CSS class name for rendering undefined values |
136-
| numberValue | string | CSS class name for rendering numeric values |
137-
| stringValue | string | CSS class name for rendering string values |
138-
| booleanValue | string | CSS class name for rendering boolean values |
139-
| otherValue | string | CSS class name for rendering all other values except Object, Arrray, null, undefined, numeric, boolean and string |
140-
| punctuation | string | CSS class name for rendering `,`, `[`, `]`, `{`, `}` |
141-
| noQuotesForStringValues | boolean | whether or not to add double quotes when rendering string values, default value is `false` |
142-
| quotesForFieldNames | boolean | whether or not to add double quotes when rendering field names, default value is `false` |
130+
| Name | Type | Description |
131+
| ----------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------- |
132+
| container | string | CSS class name for rendering parent block |
133+
| childFieldsContainer | string | CSS class name for rendering parent block of array or object |
134+
| basicChildStyle | string | CSS class name for property block containing property name and value |
135+
| collapseIcon | string | CSS class name for rendering button collapsing Object and Array nodes. Default content is `▾`. |
136+
| expandIcon | string | CSS class name for rendering button expanding Object and Array nodes. Default content is `▸`. |
137+
| collapsedContent | string | CSS class name for rendering placeholder when Object and Array nodes are collapsed. Default contents is `...`. |
138+
| label | string | CSS class name for rendering property names |
139+
| clickableLabel | string | CSS class name for rendering clickable property names (requires the `clickToExpandNode` prop to be true) |
140+
| nullValue | string | CSS class name for rendering null values |
141+
| undefinedValue | string | CSS class name for rendering undefined values |
142+
| numberValue | string | CSS class name for rendering numeric values |
143+
| stringValue | string | CSS class name for rendering string values |
144+
| booleanValue | string | CSS class name for rendering boolean values |
145+
| otherValue | string | CSS class name for rendering all other values except Object, Arrray, null, undefined, numeric, boolean and string |
146+
| punctuation | string | CSS class name for rendering `,`, `[`, `]`, `{`, `}` |
147+
| noQuotesForStringValues | boolean | whether or not to add double quotes when rendering string values, default value is `false` |
148+
| quotesForFieldNames | boolean | whether or not to add double quotes when rendering field names, default value is `false` |
149+
| ariaLables | AriaLables | Text to use for the `aria-label` properties |
143150

144151
## Comparison with other libraries
145152

‎src/DataRenderer.test.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,11 @@ const commonProps: Omit<JsonRenderProps<any>, 'outerRef'> = {
2323
expandIcon: defaultStyles.expandIcon,
2424
collapseIcon: defaultStyles.collapseIcon,
2525
collapsedContent: defaultStyles.collapsedContent,
26-
noQuotesForStringValues: false
26+
noQuotesForStringValues: false,
27+
ariaLables: {
28+
expandJson: 'expand',
29+
collapseJson: 'collapse'
30+
}
2731
},
2832
shouldExpandNode: allExpanded,
2933
clickToExpandNode: false,

‎src/DataRenderer.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react';
22
import * as DataTypeDetection from './DataTypeDetection';
3-
import { NodeExpandingEvent } from '.';
3+
import { AriaLabels, NodeExpandingEvent } from '.';
44

55
export interface StyleProps {
66
container: string;
@@ -20,6 +20,7 @@ export interface StyleProps {
2020
childFieldsContainer: string;
2121
noQuotesForStringValues?: boolean;
2222
quotesForFieldNames?: boolean;
23+
ariaLables: AriaLabels;
2324
}
2425

2526
interface CommonRenderProps {
@@ -96,7 +97,7 @@ function ExpandableObject({
9697
}, [shouldExpandNode]);
9798

9899
const expanderIconStyle = expanded ? style.collapseIcon : style.expandIcon;
99-
const ariaLabel = expanded ? 'collapse JSON' : 'expand JSON';
100+
const ariaLabel = expanded ? style.ariaLables.collapseJson : style.ariaLables.expandJson;
100101
const contentsId = React.useId();
101102
const childLevel = level + 1;
102103
const lastIndex = data.length - 1;

‎src/index.tsx‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,16 @@ export interface NodeExpandingEvent {
99
newExpandValue: boolean;
1010
}
1111

12+
export interface AriaLabels {
13+
collapseJson: string;
14+
expandJson: string;
15+
}
16+
17+
const defaultAriaLables: AriaLabels = {
18+
collapseJson: 'collapse JSON',
19+
expandJson: 'expand JSON'
20+
};
21+
1222
export interface Props extends React.AriaAttributes {
1323
data: Object | Array<any>;
1424
style?: Partial<StyleProps>;
@@ -34,7 +44,8 @@ export const defaultStyles: StyleProps = {
3444
expandIcon: styles['expand-icon-light'],
3545
collapsedContent: styles['collapsed-content-light'],
3646
noQuotesForStringValues: false,
37-
quotesForFieldNames: false
47+
quotesForFieldNames: false,
48+
ariaLables: defaultAriaLables
3849
};
3950

4051
export const darkStyles: StyleProps = {
@@ -54,7 +65,8 @@ export const darkStyles: StyleProps = {
5465
expandIcon: styles['expand-icon-dark'],
5566
collapsedContent: styles['collapsed-content-dark'],
5667
noQuotesForStringValues: false,
57-
quotesForFieldNames: false
68+
quotesForFieldNames: false,
69+
ariaLables: defaultAriaLables
5870
};
5971

6072
export const allExpanded = () => true;

0 commit comments

Comments
 (0)