Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

make add event modal more accessible #745

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

make add event modal more accessible #745

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b409a5e
make add event modal more accessible
rlucke Jun 26, 2024
c33cfb3
Merge branch 'main' into issue-607
rlucke Jun 26, 2024
a170e63
remove unused import
rlucke Jun 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 13 additions & 7 deletions src/components/events/partials/ModalTabsAndPages/NewAccessPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import { filterRoles, getAclTemplateText } from "../../../../utils/aclUtils";
import { useAppDispatch, useAppSelector } from "../../../../store";
import { fetchSeriesDetailsAcls } from "../../../../slices/seriesDetailsSlice";
import { getSeriesDetailsAcl } from "../../../../selectors/seriesDetailsSelectors";
import { Tooltip } from "@mui/material";

/**
* This component renders the access page for new events and series in the wizards.
Expand Down Expand Up @@ -120,7 +121,7 @@ const NewAccessPage = ({

{/* Template selection*/}
<div className="obj tbl-list">
<table className="main-tbl">
<table className="main-tbl" role="presentation">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we use role="none" instead, or is that not yet supported well enough?

<thead>
<tr>
<th>
Expand All @@ -135,6 +136,7 @@ const NewAccessPage = ({
<div className="obj-container padded">
{/* dropdown for selecting a policy template */}
<DropDown
ariaLabel={t("EVENTS.SERIES.NEW.ACCESS.TEMPLATES.TITLE")}
value={formik.values.aclTemplate}
text={getAclTemplateText(
aclTemplates,
Expand All @@ -151,6 +153,7 @@ const NewAccessPage = ({
placeholder={t(
"EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.LABEL"
)}
tabIndex={0}
autoFocus={true}
/>
</div>
Expand Down Expand Up @@ -245,6 +248,7 @@ const NewAccessPage = ({
placeholder={t(
"EVENTS.SERIES.NEW.ACCESS.ROLES.LABEL"
)}
tabIndex={0}
disabled={
!hasAccess(
editAccessRole,
Expand Down Expand Up @@ -285,10 +289,12 @@ const NewAccessPage = ({
)}
{/*Remove policy*/}
<td>
<button
onClick={() => remove(index)}
className="button-like-anchor remove"
/>
<Tooltip title={t("EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.DELETE")}>
Arnei marked this conversation as resolved.
Show resolved Hide resolved
<button
onClick={() => remove(index)}
className="button-like-anchor remove"
/>
</Tooltip>
</td>
</tr>
)
Expand Down Expand Up @@ -357,14 +363,14 @@ const NewAccessPage = ({
nextPage(formik.values);
}
}}
tabIndex={100}
tabIndex={0}
>
{t("WIZARD.NEXT_STEP")}
</button>
<button
className="cancel"
onClick={() => previousPage(formik.values, false)}
tabIndex={101}
tabIndex={0}
>
{t("WIZARD.BACK")}
</button>
Expand Down
6 changes: 5 additions & 1 deletion src/components/events/partials/ModalTabsAndPages/NewMetadataPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const NewMetadataPage = <T,>({
<header className="no-expand">{t(header)}</header>
{/* Table view containing input fields for metadata */}
<div className="obj-container">
<table className="main-tbl">
<table className="main-tbl" role="presentation">
<tbody>
{/* Render table row for each metadata field depending on type*/}
{!!metadataFields.fields &&
Expand All @@ -51,13 +51,17 @@ const NewMetadataPage = <T,>({
name={field.id}
fieldInfo={field}
component={RenderMultiField}
ariaLabel={t(field.label)}
ariaRequired={field.required}
/>
) : (
<Field
name={field.id}
metadataField={field}
isFirstField={key === 0}
component={RenderField}
ariaLabel={t(field.label)}
ariaRequired={field.required}
/>
)}
</td>
Expand Down
2 changes: 2 additions & 0 deletions src/components/events/partials/ModalTabsAndPages/NewProcessingPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ const NewProcessingPage = <T extends RequiredFormProps>({
{workflowDef.length > 0 ? (
<div className="editable">
<DropDown
ariaLabel={t("EVENTS.EVENTS.NEW.PROCESSING.SELECT_WORKFLOW")}
value={formik.values.processingWorkflow}
text={
workflowDef.find(
Expand All @@ -89,6 +90,7 @@ const NewProcessingPage = <T extends RequiredFormProps>({
placeholder={t(
"EVENTS.EVENTS.NEW.PROCESSING.SELECT_WORKFLOW"
)}
tabIndex={0}
/>
</div>
) : (
Expand Down
57 changes: 35 additions & 22 deletions src/components/events/partials/ModalTabsAndPages/NewSourcePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ import { Recording, fetchRecordings } from "../../../../slices/recordingSlice";
import { removeNotificationWizardForm } from "../../../../slices/notificationSlice";
import { parseISO } from "date-fns";
import { checkConflicts } from "../../../../slices/eventSlice";
import { Tooltip } from "@mui/material";

/**
* This component renders the source page for new events in the new event wizard.
Expand Down Expand Up @@ -242,14 +243,12 @@ const NewSourcePage = <T extends RequiredFormProps>({
nextPage(formik.values);
}
}}
tabIndex={100}
>
{t("WIZARD.NEXT_STEP")}
</button>
<button
className="cancel"
onClick={() => previousPage(formik.values, false)}
tabIndex={101}
>
{t("WIZARD.BACK")}
</button>
Expand Down Expand Up @@ -283,7 +282,7 @@ const Upload = ({ formik }) => {
{t("EVENTS.EVENTS.NEW.SOURCE.UPLOAD.RECORDING_ELEMENTS")}
</header>
<div className="obj-container">
<table className="main-tbl">
<table className="main-tbl" role="presentation">
<tbody>
<FieldArray name="uploadAssetsTrack">
{/*File upload button for each upload asset*/}
Expand All @@ -292,7 +291,7 @@ const Upload = ({ formik }) => {
// @ts-expect-error TS(7006): Parameter 'asset' implicitly has an 'any' type.
formik.values.uploadAssetsTrack.map((asset, key) => (
<tr key={key}>
<td>
<td id={asset.id + '_description'}>
<span style={{ fontWeight: "bold" }}>
{translateOverrideFallback(asset, t, "SHORT")}
</span>
Expand All @@ -312,21 +311,24 @@ const Upload = ({ formik }) => {
type="file"
multiple={asset.multiple}
name={`uploadAssetsTrack.${key}.file`}
tabIndex={0}
aria-labelledby={asset.id + '_description'}
/>
</div>
</td>
<td className="fit">
<button
className="button-like-anchor remove"
onClick={(e) => {
formik.setFieldValue(
`uploadAssetsTrack.${key}.file`,
null
);
(document.getElementById(asset.id) as HTMLInputElement).value = '';
}}
/>
<Tooltip title={t("EVENTS.EVENTS.NEW.SOURCE.UPLOAD.RESET")}>
<button
className="button-like-anchor remove"
onClick={(e) => {
formik.setFieldValue(
`uploadAssetsTrack.${key}.file`,
null
);
(document.getElementById(asset.id) as HTMLInputElement).value = '';
}}

/>
</Tooltip>
</td>
</tr>
))
Expand Down Expand Up @@ -404,7 +406,6 @@ const Schedule = <T extends {
type="checkbox"
name="deviceInputs"
value={input.id}
tabIndex={12}
/>
{t(input.value)}
</label>
Expand All @@ -416,7 +417,7 @@ const Schedule = <T extends {
<div className="obj">
<header>{t("EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.CAPTION")}</header>
<div className="obj-container">
<table className="main-tbl">
<table className="main-tbl" role="presentation">
<tbody>
<tr>
<td>{t("EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.TIMEZONE")}</td>
Expand All @@ -430,6 +431,7 @@ const Schedule = <T extends {
<td>
<DatePicker
name="scheduleStartDate"
slotProps={{ textField: { placeholder: '', inputProps: { "aria-label": t("EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.START_DATE")} } }}
value={typeof formik.values.scheduleStartDate === "string" ? parseISO(formik.values.scheduleStartDate): formik.values.scheduleStartDate}
onChange={(value) => {
if (formik.values.sourceMode === "SCHEDULE_MULTIPLE") {
Expand All @@ -446,8 +448,6 @@ const Schedule = <T extends {
);
}
}}
// @ts-expect-error TS(2322):
tabIndex={4}
/>
</td>
</tr>
Expand All @@ -463,15 +463,14 @@ const Schedule = <T extends {
<DatePicker
name="scheduleEndDate"
value={typeof formik.values.scheduleEndDate === "string" ? parseISO(formik.values.scheduleEndDate) : formik.values.scheduleEndDate}
slotProps={{ textField: { placeholder: '', inputProps: { "aria-label": t("EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.END_DATE")} } }}
onChange={(value) =>
changeEndDateMultiple(
value,
formik.values,
formik.setFieldValue
)
}
// @ts-expect-error TS(2322):
tabIndex={5}
/>
</td>
</tr>
Expand All @@ -490,7 +489,7 @@ const Schedule = <T extends {
type="checkbox"
name="repeatOn"
value={day.name}
tabIndex={6 + key}
aria-label={t("EVENTS.EVENTS.NEW.SOURCE.SCHEDULE_MULTIPLE.REPEAT_ON") + t(day.readableName)}
/>
</div>
))}
Expand All @@ -509,6 +508,7 @@ const Schedule = <T extends {
* This is the 13th input field.
*/}
<DropDown
ariaLabel={t("EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.START_TIME") + t("EVENTS.EVENTS.NEW.SOURCE.PLACEHOLDER.HOUR")}
value={formik.values.scheduleStartHour}
text={formik.values.scheduleStartHour.toString()}
options={hours}
Expand All @@ -532,13 +532,15 @@ const Schedule = <T extends {
}
}}
placeholder={t("EVENTS.EVENTS.NEW.SOURCE.PLACEHOLDER.HOUR")}
tabIndex={0}
/>

{/* drop-down for minute
*
* This is the 14th input field.
*/}
<DropDown
ariaLabel={t("EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.START_TIME") + t("EVENTS.EVENTS.NEW.SOURCE.PLACEHOLDER.MINUTE")}
value={formik.values.scheduleStartMinute}
text={formik.values.scheduleStartMinute.toString()}
options={minutes}
Expand All @@ -562,6 +564,7 @@ const Schedule = <T extends {
}
}}
placeholder={t("EVENTS.EVENTS.NEW.SOURCE.PLACEHOLDER.MINUTE")}
tabIndex={0}
/>
</td>
</tr>
Expand All @@ -576,6 +579,7 @@ const Schedule = <T extends {
* This is the 15th input field.
*/}
<DropDown
ariaLabel={t("EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.DURATION") + t("EVENTS.EVENTS.NEW.SOURCE.PLACEHOLDER.HOUR")}
value={formik.values.scheduleDurationHours}
text={formik.values.scheduleDurationHours.toString()}
options={hours}
Expand All @@ -599,13 +603,15 @@ const Schedule = <T extends {
}
}}
placeholder={t("EVENTS.EVENTS.NEW.SOURCE.PLACEHOLDER.HOUR")}
tabIndex={0}
/>

{/* drop-down for minute
*
* This is the 16th input field.
*/}
<DropDown
ariaLabel={t("EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.DURATION") + t("EVENTS.EVENTS.NEW.SOURCE.PLACEHOLDER.MINUTE")}
value={formik.values.scheduleDurationMinutes}
text={formik.values.scheduleDurationMinutes.toString()}
options={minutes}
Expand All @@ -629,6 +635,7 @@ const Schedule = <T extends {
}
}}
placeholder={t("EVENTS.EVENTS.NEW.SOURCE.PLACEHOLDER.MINUTE")}
tabIndex={0}
/>
</td>
</tr>
Expand All @@ -643,6 +650,7 @@ const Schedule = <T extends {
* This is the 17th input field.
*/}
<DropDown
ariaLabel={t("EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.END_TIME") + t("EVENTS.EVENTS.NEW.SOURCE.PLACEHOLDER.HOUR")}
value={formik.values.scheduleEndHour}
text={formik.values.scheduleEndHour.toString()}
options={hours}
Expand All @@ -666,13 +674,15 @@ const Schedule = <T extends {
}
}}
placeholder={t("EVENTS.EVENTS.NEW.SOURCE.PLACEHOLDER.HOUR")}
tabIndex={0}
/>

{/* drop-down for minute
*
* This is the 18th input field.
*/}
<DropDown
ariaLabel={t("EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.END_TIME") + t("EVENTS.EVENTS.NEW.SOURCE.PLACEHOLDER.MINUTE")}
value={formik.values.scheduleEndMinute}
text={formik.values.scheduleEndMinute.toString()}
options={minutes}
Expand All @@ -696,6 +706,7 @@ const Schedule = <T extends {
}
}}
placeholder={t("EVENTS.EVENTS.NEW.SOURCE.PLACEHOLDER.MINUTE")}
tabIndex={0}
/>

{/* display end date if on different day to start date, only if this is current source mode */}
Expand All @@ -722,6 +733,7 @@ const Schedule = <T extends {
*/}
<td className="editable ng-isolated-scope">
<DropDown
ariaLabel={t("EVENTS.EVENTS.NEW.SOURCE.PLACEHOLDER.LOCATION")}
value={formik.values.location}
text={formik.values.location}
options={inputDevices}
Expand All @@ -735,6 +747,7 @@ const Schedule = <T extends {
placeholder={t(
"EVENTS.EVENTS.NEW.SOURCE.PLACEHOLDER.LOCATION"
)}
tabIndex={0}
/>
</td>
</tr>
Expand Down
6 changes: 6 additions & 0 deletions src/components/shared/DropDown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,8 @@ const DropDown = <T,>({
autoFocus = false,
defaultOpen = false,
disabled = false,
ariaLabel,
ariaRequired = false
}: {
value: T
text: string,
Expand All @@ -59,6 +61,8 @@ const DropDown = <T,>({
autoFocus?: boolean,
defaultOpen?: boolean,
disabled?: boolean,
ariaLabel?: string
ariaRequired?: boolean
}) => {
const { t } = useTranslation();

Expand Down Expand Up @@ -87,6 +91,8 @@ const DropDown = <T,>({
onInputChange={(value) => setSearch(value)}
onChange={(element) => handleChange(element)}
isDisabled={disabled}
aria-label={ariaLabel}
aria-required={ariaRequired}
/>
);
};
Expand Down
Loading
Loading