@reykjavik/hanna-react 0.10.172 → 0.10.173
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/AutosuggestSearch.js +1 -1
- package/CHANGELOG.md +8 -0
- package/Multiselect.js +1 -1
- package/_abstract/_TogglerGroup.js +2 -2
- package/_abstract/_TogglerInput.js +2 -2
- package/esm/AutosuggestSearch.js +1 -1
- package/esm/Multiselect.js +1 -1
- package/esm/_abstract/_TogglerGroup.js +2 -2
- package/esm/_abstract/_TogglerInput.js +2 -2
- package/package.json +1 -1
package/AutosuggestSearch.js
CHANGED
|
@@ -94,7 +94,7 @@ const AutosuggestSearch = (props) => {
|
|
|
94
94
|
: emptyMessage;
|
|
95
95
|
contents = (react_1.default.createElement("div", { className: (0, hanna_utils_1.modifiedClass)('AutosuggestSearch__emptyMessage', type !== 'empty' && type) }, message));
|
|
96
96
|
}
|
|
97
|
-
return (react_1.default.createElement("div", Object.assign({}, containerProps, { "aria-label": options.length ? txt.suggestionsLabel : undefined }), contents));
|
|
97
|
+
return (react_1.default.createElement("div", Object.assign({}, containerProps, { "aria-label": options.length ? txt.suggestionsLabel : undefined }, (!options.length && { role: undefined })), contents));
|
|
98
98
|
}, inputProps: Object.assign({ ref: inputRef, value: inputValue, onChange: (_, { newValue, method }) => {
|
|
99
99
|
if (!inputChangeMethods.has(method)) {
|
|
100
100
|
return;
|
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,14 @@
|
|
|
4
4
|
|
|
5
5
|
- ... <!-- Add new lines here. -->
|
|
6
6
|
|
|
7
|
+
## 0.10.173
|
|
8
|
+
|
|
9
|
+
_2026-05-19_
|
|
10
|
+
|
|
11
|
+
- fix: Add `role="generic"` to checkbox- and radio-group `<li/>` elments
|
|
12
|
+
- `AutosuggestSearch`:
|
|
13
|
+
- fix: Suppress `role="listbox"` when there are no suggestions
|
|
14
|
+
|
|
7
15
|
## 0.10.172
|
|
8
16
|
|
|
9
17
|
_2026-04-30_
|
package/Multiselect.js
CHANGED
|
@@ -246,7 +246,7 @@ const Multiselect = (props) => {
|
|
|
246
246
|
const insertGroupSeparator = !isFiltered &&
|
|
247
247
|
item.group !== (filteredOptions[idx - 1] || {}).group &&
|
|
248
248
|
(idx > 0 || !!item.group);
|
|
249
|
-
const checkbox = (react_1.default.createElement(Checkbox_js_1.default, Object.assign({ key: idx, className: (0, hanna_utils_1.modifiedClass)('Multiselect__option', activeItemIndex === idx && 'focused'), reqText: false, disabled: isDisabled, readOnly: readOnly, required: props.required, Wrapper: "li", name: name }, item, { checked: isChecked, "aria-invalid": props.invalid, label: item.label || item.value, onChange: () => handleCheckboxSelection(item), onFocus: () => setActiveItemIndex(idx), wrapperProps: {
|
|
249
|
+
const checkbox = (react_1.default.createElement(Checkbox_js_1.default, Object.assign({ key: idx, className: (0, hanna_utils_1.modifiedClass)('Multiselect__option', activeItemIndex === idx && 'focused'), reqText: false, disabled: isDisabled, readOnly: readOnly, required: props.required, Wrapper: "li", role: "generic", name: name }, item, { checked: isChecked, "aria-invalid": props.invalid, label: item.label || item.value, onChange: () => handleCheckboxSelection(item), onFocus: () => setActiveItemIndex(idx), wrapperProps: {
|
|
250
250
|
onMouseEnter: () => setActiveItemIndex(idx),
|
|
251
251
|
} })));
|
|
252
252
|
return insertGroupSeparator ? (react_1.default.createElement(react_1.Fragment, { key: idx },
|
|
@@ -37,11 +37,11 @@ const TogglerGroup = (props) => {
|
|
|
37
37
|
onSelected && onSelected({ value, checked, option, selectedValues });
|
|
38
38
|
}, disabled: isDisabled, readOnly: readOnly, 'aria-invalid': props['aria-invalid'], checked: isChecked });
|
|
39
39
|
if (renderItemSubContent) {
|
|
40
|
-
return (react_1.default.createElement("li", { key: i, className: `${bem}__item
|
|
40
|
+
return (react_1.default.createElement("li", { key: i, className: `${bem}__item`, role: "generic" },
|
|
41
41
|
react_1.default.createElement(Toggler, Object.assign({}, togglerProps)),
|
|
42
42
|
renderItemSubContent(option, isChecked)));
|
|
43
43
|
}
|
|
44
|
-
return (react_1.default.createElement(Toggler, Object.assign({ key: i, className: `${bem}__item`, Wrapper: "li" }, togglerProps)));
|
|
44
|
+
return (react_1.default.createElement(Toggler, Object.assign({ key: i, className: `${bem}__item`, Wrapper: "li", role: "generic" }, togglerProps)));
|
|
45
45
|
})));
|
|
46
46
|
};
|
|
47
47
|
exports.TogglerGroup = TogglerGroup;
|
|
@@ -13,7 +13,7 @@ const defaultReqText = {
|
|
|
13
13
|
};
|
|
14
14
|
// eslint-disable-next-line complexity
|
|
15
15
|
const TogglerInput = (props) => {
|
|
16
|
-
const { bem, modifier, className, label, hideLabel, invalid, errorMessage, Wrapper = 'div', required, reqText, type, id, innerWrap, wrapperProps, inputProps } = props, restInputProps = tslib_1.__rest(props, ["bem", "modifier", "className", "label", "hideLabel", "invalid", "errorMessage", "Wrapper", "required", "reqText", "type", "id", "innerWrap", "wrapperProps", "inputProps"]);
|
|
16
|
+
const { bem, modifier, className, label, hideLabel, invalid, errorMessage, Wrapper = 'div', required, reqText, type, id, innerWrap, wrapperProps, inputProps, role } = props, restInputProps = tslib_1.__rest(props, ["bem", "modifier", "className", "label", "hideLabel", "invalid", "errorMessage", "Wrapper", "required", "reqText", "type", "id", "innerWrap", "wrapperProps", "inputProps", "role"]);
|
|
17
17
|
const domid = (0, useDomid_js_1.useDomid)(id);
|
|
18
18
|
const errorId = errorMessage && `error${domid}`;
|
|
19
19
|
const reqStar = required && reqText !== false && (react_1.default.createElement("abbr", { className: `${bem}__label__reqstar`,
|
|
@@ -28,7 +28,7 @@ const TogglerInput = (props) => {
|
|
|
28
28
|
' '));
|
|
29
29
|
return (react_1.default.createElement(Wrapper, Object.assign({}, wrapperProps, { className: (0, hanna_utils_1.modifiedClass)(bem, [modifier, hideLabel && 'nolabel'],
|
|
30
30
|
// Prefer `className` over `wrapperProps.className`
|
|
31
|
-
className || (wrapperProps || {}).className) }),
|
|
31
|
+
className || (wrapperProps || {}).className), role: role }),
|
|
32
32
|
react_1.default.createElement("input", Object.assign({ className: `${bem}__input`, type: type, id: domid, "aria-invalid": invalid || !!errorMessage || undefined, "aria-describedby": errorId }, restInputProps, inputProps, (readOnly && { disabled: true }))),
|
|
33
33
|
' ',
|
|
34
34
|
react_1.default.createElement("label", { className: `${bem}__label`, htmlFor: domid },
|
package/esm/AutosuggestSearch.js
CHANGED
|
@@ -91,7 +91,7 @@ export const AutosuggestSearch = (props) => {
|
|
|
91
91
|
: emptyMessage;
|
|
92
92
|
contents = (React.createElement("div", { className: modifiedClass('AutosuggestSearch__emptyMessage', type !== 'empty' && type) }, message));
|
|
93
93
|
}
|
|
94
|
-
return (React.createElement("div", Object.assign({}, containerProps, { "aria-label": options.length ? txt.suggestionsLabel : undefined }), contents));
|
|
94
|
+
return (React.createElement("div", Object.assign({}, containerProps, { "aria-label": options.length ? txt.suggestionsLabel : undefined }, (!options.length && { role: undefined })), contents));
|
|
95
95
|
}, inputProps: Object.assign({ ref: inputRef, value: inputValue, onChange: (_, { newValue, method }) => {
|
|
96
96
|
if (!inputChangeMethods.has(method)) {
|
|
97
97
|
return;
|
package/esm/Multiselect.js
CHANGED
|
@@ -242,7 +242,7 @@ export const Multiselect = (props) => {
|
|
|
242
242
|
const insertGroupSeparator = !isFiltered &&
|
|
243
243
|
item.group !== (filteredOptions[idx - 1] || {}).group &&
|
|
244
244
|
(idx > 0 || !!item.group);
|
|
245
|
-
const checkbox = (React.createElement(Checkbox, Object.assign({ key: idx, className: modifiedClass('Multiselect__option', activeItemIndex === idx && 'focused'), reqText: false, disabled: isDisabled, readOnly: readOnly, required: props.required, Wrapper: "li", name: name }, item, { checked: isChecked, "aria-invalid": props.invalid, label: item.label || item.value, onChange: () => handleCheckboxSelection(item), onFocus: () => setActiveItemIndex(idx), wrapperProps: {
|
|
245
|
+
const checkbox = (React.createElement(Checkbox, Object.assign({ key: idx, className: modifiedClass('Multiselect__option', activeItemIndex === idx && 'focused'), reqText: false, disabled: isDisabled, readOnly: readOnly, required: props.required, Wrapper: "li", role: "generic", name: name }, item, { checked: isChecked, "aria-invalid": props.invalid, label: item.label || item.value, onChange: () => handleCheckboxSelection(item), onFocus: () => setActiveItemIndex(idx), wrapperProps: {
|
|
246
246
|
onMouseEnter: () => setActiveItemIndex(idx),
|
|
247
247
|
} })));
|
|
248
248
|
return insertGroupSeparator ? (React.createElement(Fragment, { key: idx },
|
|
@@ -33,10 +33,10 @@ export const TogglerGroup = (props) => {
|
|
|
33
33
|
onSelected && onSelected({ value, checked, option, selectedValues });
|
|
34
34
|
}, disabled: isDisabled, readOnly: readOnly, 'aria-invalid': props['aria-invalid'], checked: isChecked });
|
|
35
35
|
if (renderItemSubContent) {
|
|
36
|
-
return (React.createElement("li", { key: i, className: `${bem}__item
|
|
36
|
+
return (React.createElement("li", { key: i, className: `${bem}__item`, role: "generic" },
|
|
37
37
|
React.createElement(Toggler, Object.assign({}, togglerProps)),
|
|
38
38
|
renderItemSubContent(option, isChecked)));
|
|
39
39
|
}
|
|
40
|
-
return (React.createElement(Toggler, Object.assign({ key: i, className: `${bem}__item`, Wrapper: "li" }, togglerProps)));
|
|
40
|
+
return (React.createElement(Toggler, Object.assign({ key: i, className: `${bem}__item`, Wrapper: "li", role: "generic" }, togglerProps)));
|
|
41
41
|
})));
|
|
42
42
|
};
|
|
@@ -10,7 +10,7 @@ const defaultReqText = {
|
|
|
10
10
|
};
|
|
11
11
|
// eslint-disable-next-line complexity
|
|
12
12
|
export const TogglerInput = (props) => {
|
|
13
|
-
const { bem, modifier, className, label, hideLabel, invalid, errorMessage, Wrapper = 'div', required, reqText, type, id, innerWrap, wrapperProps, inputProps } = props, restInputProps = __rest(props, ["bem", "modifier", "className", "label", "hideLabel", "invalid", "errorMessage", "Wrapper", "required", "reqText", "type", "id", "innerWrap", "wrapperProps", "inputProps"]);
|
|
13
|
+
const { bem, modifier, className, label, hideLabel, invalid, errorMessage, Wrapper = 'div', required, reqText, type, id, innerWrap, wrapperProps, inputProps, role } = props, restInputProps = __rest(props, ["bem", "modifier", "className", "label", "hideLabel", "invalid", "errorMessage", "Wrapper", "required", "reqText", "type", "id", "innerWrap", "wrapperProps", "inputProps", "role"]);
|
|
14
14
|
const domid = useDomid(id);
|
|
15
15
|
const errorId = errorMessage && `error${domid}`;
|
|
16
16
|
const reqStar = required && reqText !== false && (React.createElement("abbr", { className: `${bem}__label__reqstar`,
|
|
@@ -25,7 +25,7 @@ export const TogglerInput = (props) => {
|
|
|
25
25
|
' '));
|
|
26
26
|
return (React.createElement(Wrapper, Object.assign({}, wrapperProps, { className: modifiedClass(bem, [modifier, hideLabel && 'nolabel'],
|
|
27
27
|
// Prefer `className` over `wrapperProps.className`
|
|
28
|
-
className || (wrapperProps || {}).className) }),
|
|
28
|
+
className || (wrapperProps || {}).className), role: role }),
|
|
29
29
|
React.createElement("input", Object.assign({ className: `${bem}__input`, type: type, id: domid, "aria-invalid": invalid || !!errorMessage || undefined, "aria-describedby": errorId }, restInputProps, inputProps, (readOnly && { disabled: true }))),
|
|
30
30
|
' ',
|
|
31
31
|
React.createElement("label", { className: `${bem}__label`, htmlFor: domid },
|