Skip to content

Commit 8d7a495

Browse files
jen-castironjen-castiron
committed
[B] Fix a11y and return focus on edit annotation
-- Uses dialog popup (non-modal dialog) a11y
1 parent 7a9a7af commit 8d7a495

File tree

2 files changed

+108
-88
lines changed

2 files changed

+108
-88
lines changed

‎client/src/global/components/Annotation/Annotation/UserContent/index.js‎

Lines changed: 93 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ import { entityStoreActions } from "actions";
1515
import Authorize from "hoc/Authorize";
1616
import { useCurrentUser } from "hooks";
1717
import * as Styled from "./styles";
18+
import { useUID } from "react-uid";
19+
import useDialog from "@castiron/hooks/useDialog";
1820

1921
const { request } = entityStoreActions;
2022

@@ -41,14 +43,15 @@ export default function AnnotationDetail({
4143

4244
const threadRef = useRef(null);
4345
const replyToggleRef = useRef(null);
44-
const editToggleRef = useRef(null);
46+
const editUID = useUID();
47+
const editDialog = useDialog({ modal: false, dismissalMode: "explicit" });
4548

4649
const startReply = () => {
4750
setAction("replying");
4851
};
4952

5053
const startEdit = () => {
51-
setAction("editing");
54+
editDialog.onToggleClick();
5255
};
5356

5457
const stopReply = () => {
@@ -58,9 +61,7 @@ export default function AnnotationDetail({
5861
};
5962

6063
const stopEdit = () => {
61-
setAction(null);
62-
63-
if (editToggleRef.current) editToggleRef.current.focus();
64+
editDialog.onCloseClick();
6465
};
6566

6667
const saveAnnotation = data => {
@@ -114,94 +115,98 @@ export default function AnnotationDetail({
114115
includeMarkers={includeMarkers}
115116
markerIcons={markerIcons}
116117
/>
117-
{action === "editing" ? (
118-
<Editor
119-
annotation={annotation}
120-
saveAnnotation={saveAnnotation}
121-
cancel={stopEdit}
122-
/>
123-
) : (
124-
<div>
125-
<Styled.Body>
126-
<Helper.SimpleFormat text={annotation.attributes.body} />
127-
</Styled.Body>
128-
<Authorize kind={"any"}>
129-
<Styled.Utility>
130-
<Styled.UtilityList
131-
$isFlagged={annotation.attributes.flagged}
132-
>
133-
<Authorize entity={"comment"} ability={"create"}>
134-
<li>
135-
<Styled.Button
136-
ref={replyToggleRef}
137-
onClick={
138-
action === "replying" ? stopReply : startReply
139-
}
140-
aria-expanded={action === "replying"}
141-
>
142-
{t("actions.reply")}
143-
</Styled.Button>
144-
</li>
145-
</Authorize>
146-
147-
<Authorize entity={annotation} ability={"update"}>
148-
<li>
149-
<Styled.Button
150-
className="confirmable-button"
151-
ref={editToggleRef}
152-
onClick={startEdit}
153-
aria-expanded={action === "editing"}
154-
>
155-
{t("actions.edit")}
156-
</Styled.Button>
157-
</li>
158-
</Authorize>
159-
<Authorize entity={annotation} ability={"delete"}>
160-
<li>
161-
<Utility.ConfirmableButton
162-
label={t("actions.delete")}
163-
confirmHandler={deleteAnnotation}
164-
/>
165-
</li>
166-
</Authorize>
167-
{verifiedUser && (
168-
<li>
169-
<FlagToggle record={annotation} />
170-
</li>
171-
)}
172-
{showInlineCommentsToggle && (
173-
<InlineToggle
174-
active={action === "editing"}
175-
loadComments={toggleComments}
176-
commentsCount={commentsCount}
118+
<div
119+
{...(editDialog.open
120+
? { inert: "", className: "screen-reader-text" }
121+
: {})}
122+
>
123+
<Styled.Body>
124+
<Helper.SimpleFormat text={annotation.attributes.body} />
125+
</Styled.Body>
126+
<Authorize kind={"any"}>
127+
<Styled.Utility>
128+
<Styled.UtilityList $isFlagged={annotation.attributes.flagged}>
129+
<Authorize entity={"comment"} ability={"create"}>
130+
<li>
131+
<Styled.Button
132+
ref={replyToggleRef}
133+
onClick={action === "replying" ? stopReply : startReply}
134+
aria-expanded={action === "replying"}
135+
>
136+
{t("actions.reply")}
137+
</Styled.Button>
138+
</li>
139+
</Authorize>
140+
141+
<Authorize entity={annotation} ability={"update"}>
142+
<li>
143+
<Styled.Button
144+
className="confirmable-button"
145+
ref={editDialog.toggleRef}
146+
onClick={startEdit}
147+
aria-expanded={editDialog.open}
148+
aria-controls={editUID}
149+
>
150+
{t("actions.edit")}
151+
</Styled.Button>
152+
</li>
153+
</Authorize>
154+
<Authorize entity={annotation} ability={"delete"}>
155+
<li>
156+
<Utility.ConfirmableButton
157+
label={t("actions.delete")}
158+
confirmHandler={deleteAnnotation}
177159
/>
178-
)}
179-
</Styled.UtilityList>
180-
{action === "replying" && (
181-
<CommentContainer.Editor
182-
subject={annotation}
183-
cancel={stopReply}
184-
onSuccess={onReplySuccess}
185-
initialOpen
160+
</li>
161+
</Authorize>
162+
{verifiedUser && (
163+
<li>
164+
<FlagToggle record={annotation} />
165+
</li>
166+
)}
167+
{showInlineCommentsToggle && (
168+
<InlineToggle
169+
active={action === "editing"}
170+
loadComments={toggleComments}
171+
commentsCount={commentsCount}
186172
/>
187173
)}
174+
</Styled.UtilityList>
175+
{action === "replying" && (
176+
<CommentContainer.Editor
177+
subject={annotation}
178+
cancel={stopReply}
179+
onSuccess={onReplySuccess}
180+
initialOpen
181+
/>
182+
)}
183+
</Styled.Utility>
184+
</Authorize>
185+
{showLogin && (
186+
<Authorize kind="unauthenticated">
187+
<Styled.Utility>
188+
<Styled.UtilityList>
189+
<li>
190+
<Styled.Button onClick={showLogin}>
191+
{t("actions.login_to_reply")}
192+
</Styled.Button>
193+
</li>
194+
</Styled.UtilityList>
188195
</Styled.Utility>
189196
</Authorize>
190-
{showLogin && (
191-
<Authorize kind="unauthenticated">
192-
<Styled.Utility>
193-
<Styled.UtilityList>
194-
<li>
195-
<Styled.Button onClick={showLogin}>
196-
{t("actions.login_to_reply")}
197-
</Styled.Button>
198-
</li>
199-
</Styled.UtilityList>
200-
</Styled.Utility>
201-
</Authorize>
202-
)}
203-
</div>
204-
)}
197+
)}
198+
</div>
199+
<Styled.EditDialog
200+
ref={editDialog.dialogRef}
201+
id={editUID}
202+
{...(editDialog.open ? {} : { inert: "" })}
203+
>
204+
<Editor
205+
annotation={annotation}
206+
saveAnnotation={saveAnnotation}
207+
cancel={stopEdit}
208+
/>
209+
</Styled.EditDialog>
205210
<div
206211
ref={threadRef}
207212
tabIndex={-1}

‎client/src/global/components/Annotation/Annotation/UserContent/styles.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,10 @@ export const Button = styled.button`
4747
${utilityPrimary}
4848
font-size: 12px;
4949
50+
&[aria-disabled="true"] {
51+
pointer-events: none;
52+
}
53+
5054
&[aria-expanded="true"] {
5155
${defaultHoverStyle}
5256
margin-bottom: 15px;
@@ -70,3 +74,14 @@ export const Thread = styled.div`
7074
outline: none;
7175
}
7276
`;
77+
78+
export const EditDialog = styled.dialog`
79+
padding: 0;
80+
margin: 0;
81+
border: 0;
82+
83+
&[open] {
84+
position: relative;
85+
inline-size: 100%;
86+
}
87+
`;

0 commit comments

Comments
 (0)