From 3c5fd6c3fd8d04a05e59b9d496062dc9a3ead5c3 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Mon, 6 Mar 2023 14:24:31 +0200
Subject: [PATCH] add ids
---
.../MatchingService/components/DropDownComponent.js | 10 ++++++----
.../components/MatchingOptionComponent.js | 7 ++++++-
2 files changed, 12 insertions(+), 5 deletions(-)
diff --git a/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js b/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js
index dc5ce78b6..7a46280e4 100644
--- a/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js
+++ b/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js
@@ -65,7 +65,7 @@ const StyledIcon = styled(Icon)`
margin-left: auto;
`;
-const DropComponent = ({ getPos, node, view }) => {
+const DropComponent = ({ getPos, node, view, uniqueId }) => {
const [selectedOption, setSelectedOption] = useState(node.attrs.correct);
const itemRefs = useRef([]);
const wrapperRef = useRef();
@@ -156,7 +156,7 @@ const DropComponent = ({ getPos, node, view }) => {
return (
<Wrapper disabled={isDisabled} ref={wrapperRef}>
<DropDownButton
- aria-controls="options-list"
+ aria-controls={uniqueId}
aria-expanded={isOpen}
aria-haspopup
disabled={isDisabled}
@@ -172,6 +172,7 @@ const DropComponent = ({ getPos, node, view }) => {
}
}}
onMouseDown={openCloseMenu}
+ role="combobox"
type="button"
>
{selectedOption === null || !selectedOption
@@ -181,7 +182,7 @@ const DropComponent = ({ getPos, node, view }) => {
</DropDownButton>
<DropDownMenu
aria-label="Choose an option"
- id="options-list"
+ id={uniqueId}
isOpen={isOpen}
role="listbox"
>
@@ -189,11 +190,12 @@ const DropComponent = ({ getPos, node, view }) => {
itemRefs.current[index] = itemRefs.current[index] || createRef();
return (
<span
+ aria-selected={option.value === selectedOption}
key={option.value}
onClick={() => onChange(option)}
onKeyDown={e => onKeyDown(e, index)}
ref={itemRefs.current[index]}
- role="menuitem"
+ role="option"
tabIndex="-1"
>
{option.label}
diff --git a/wax-prosemirror-services/src/MatchingService/components/MatchingOptionComponent.js b/wax-prosemirror-services/src/MatchingService/components/MatchingOptionComponent.js
index ae3f045aa..f20b9ac88 100644
--- a/wax-prosemirror-services/src/MatchingService/components/MatchingOptionComponent.js
+++ b/wax-prosemirror-services/src/MatchingService/components/MatchingOptionComponent.js
@@ -141,7 +141,12 @@ export default ({ node, view, getPos }) => {
<EditorComponent getPos={getPos} node={node} view={view} />
<DropDownContainer>
{(!readOnly || (readOnly && !testMode && !showFeedBack)) && (
- <DropDownComponent getPos={getPos} node={node} view={view} />
+ <DropDownComponent
+ getPos={getPos}
+ uniqueId={uuidv4()}
+ node={node}
+ view={view}
+ />
)}
{readOnly && testMode && !showFeedBack && (
--
GitLab