anentrypoint-design 0.0.396 → 0.0.398
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "anentrypoint-design",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.398",
|
|
4
4
|
"description": "247420 design system SDK — webjsx + modified ripple-ui, single-file ESM bundle for reproducible use of the AnEntrypoint design.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/247420.js",
|
|
@@ -107,16 +107,28 @@ export function JsonViewer({ value, emptyText = 'no data', maxHeight, mode = 'pl
|
|
|
107
107
|
else { try { text = JSON.stringify(value, null, 2); knownJson = text != null; parsed = value; } catch { text = String(value); } }
|
|
108
108
|
if (!text) return h('div', { class: 'ds-ep-json ds-ep-json-empty' }, emptyText);
|
|
109
109
|
const style = maxHeight ? ('max-height:' + maxHeight) : null;
|
|
110
|
+
// A maxHeight makes this an `overflow: auto` scroll container, so the
|
|
111
|
+
// clipped content is reachable by mouse wheel but by nothing a keyboard
|
|
112
|
+
// user has — WCAG 2.1.1 Keyboard, axe's `scrollable-region-focusable`.
|
|
113
|
+
// Same fix the Table wrapper carries: tabindex puts it in the tab order and
|
|
114
|
+
// arrow keys then scroll it natively, and a bare focusable region with no
|
|
115
|
+
// name is its own violation, so it is labelled. `group` rather than
|
|
116
|
+
// `region` so a page rendering several viewers does not gain a landmark
|
|
117
|
+
// each. Witnessed unreachable on a real page: 761px of content in a 250px
|
|
118
|
+
// box with no focusable descendant.
|
|
119
|
+
const scrollable = maxHeight
|
|
120
|
+
? { tabindex: '0', role: 'group', 'aria-label': 'JSON, scrollable' }
|
|
121
|
+
: {};
|
|
110
122
|
if (!knownJson && (mode === 'highlight' || mode === 'tree')) {
|
|
111
123
|
try { parsed = JSON.parse(text); knownJson = true; } catch { /* swallow: not JSON — render plain */ }
|
|
112
124
|
}
|
|
113
125
|
let body;
|
|
114
126
|
if (mode === 'tree' && knownJson && parsed !== null && typeof parsed === 'object') {
|
|
115
|
-
body = h('div', { class: 'ds-ep-json ds-ep-json-tree', style }, jsonTreeNode(null, parsed, 0, treeDepth));
|
|
127
|
+
body = h('div', { class: 'ds-ep-json ds-ep-json-tree', style, ...scrollable }, jsonTreeNode(null, parsed, 0, treeDepth));
|
|
116
128
|
} else if ((mode === 'highlight' || mode === 'tree') && knownJson) {
|
|
117
|
-
body = h('pre', { class: 'ds-ep-json ds-ep-json-hl', style }, ...highlightJsonSpans(text));
|
|
129
|
+
body = h('pre', { class: 'ds-ep-json ds-ep-json-hl', style, ...scrollable }, ...highlightJsonSpans(text));
|
|
118
130
|
} else {
|
|
119
|
-
body = h('pre', { class: 'ds-ep-json', style }, text);
|
|
131
|
+
body = h('pre', { class: 'ds-ep-json', style, ...scrollable }, text);
|
|
120
132
|
}
|
|
121
133
|
if (!copyable) return body;
|
|
122
134
|
return h('div', { class: 'ds-ep-json-wrap' }, jsonCopyButton(text), body);
|