anentrypoint-design 0.0.397 → 0.0.399
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.399",
|
|
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,31 @@ 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
|
+
// Every viewer is a scroll container, so these are UNCONDITIONAL. The
|
|
111
|
+
// `maxHeight` prop only overrides a height the stylesheet already sets:
|
|
112
|
+
// `.ds-ep-json` carries `max-height: 300px; overflow-y: auto` in
|
|
113
|
+
// editor-primitives.css, so a viewer rendered with no prop at all still
|
|
114
|
+
// clips and still scrolls. Gating the attributes on the prop therefore
|
|
115
|
+
// missed the common case — measured live: a prop-less viewer reported
|
|
116
|
+
// scrollHeight 1265 against clientHeight 300 while sitting at tabindex -1.
|
|
117
|
+
//
|
|
118
|
+
// Clipped content reachable by wheel but not by keyboard is WCAG 2.1.1
|
|
119
|
+
// Keyboard, axe's `scrollable-region-focusable`. tabindex puts the box in
|
|
120
|
+
// the tab order and arrow keys then scroll it natively; a bare focusable
|
|
121
|
+
// region with no name is its own violation, so it is labelled. `group`
|
|
122
|
+
// rather than `region` so a page rendering several viewers does not gain a
|
|
123
|
+
// landmark each.
|
|
124
|
+
const scrollable = { tabindex: '0', role: 'group', 'aria-label': 'JSON, scrollable' };
|
|
110
125
|
if (!knownJson && (mode === 'highlight' || mode === 'tree')) {
|
|
111
126
|
try { parsed = JSON.parse(text); knownJson = true; } catch { /* swallow: not JSON — render plain */ }
|
|
112
127
|
}
|
|
113
128
|
let body;
|
|
114
129
|
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));
|
|
130
|
+
body = h('div', { class: 'ds-ep-json ds-ep-json-tree', style, ...scrollable }, jsonTreeNode(null, parsed, 0, treeDepth));
|
|
116
131
|
} else if ((mode === 'highlight' || mode === 'tree') && knownJson) {
|
|
117
|
-
body = h('pre', { class: 'ds-ep-json ds-ep-json-hl', style }, ...highlightJsonSpans(text));
|
|
132
|
+
body = h('pre', { class: 'ds-ep-json ds-ep-json-hl', style, ...scrollable }, ...highlightJsonSpans(text));
|
|
118
133
|
} else {
|
|
119
|
-
body = h('pre', { class: 'ds-ep-json', style }, text);
|
|
134
|
+
body = h('pre', { class: 'ds-ep-json', style, ...scrollable }, text);
|
|
120
135
|
}
|
|
121
136
|
if (!copyable) return body;
|
|
122
137
|
return h('div', { class: 'ds-ep-json-wrap' }, jsonCopyButton(text), body);
|