Add aria-disabled to relevant buttons

Fixes #1217.

Make sure screen readers are properly informing their users
that disabled buttons are disabled.

Note: The linked issue also notes that the function of the cancel
button is not properly read. However, my screen reader reads
"Cancel button", so that has probably been
fixed at some point.

Author: Arnei

src/components/events/partials/ModalTabsAndPages/EventDetailsCommentsTab.tsx

@@ -272,6 +272,15 @@ const EventDetailsCommentsTab = ({
 											isSavingComment
 										)
 									}
+									aria-disabled={
+										!!(
+											!newCommentText.length ||
+											newCommentText.length <= 0 ||
+											!commentReason.length ||
+											commentReason.length <= 0 ||
+											isSavingComment
+										)
+									}
 									className={`save green  ${
 										!newCommentText.length ||
 										newCommentText.length <= 0 ||

src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowTab.tsx

@@ -441,6 +441,7 @@ const EventDetailsWorkflowTab = ({
 																		formik.resetForm();
 																	}}
 																	disabled={!formik.isValid}
+																	aria-disabled={!formik.isValid}
 																	className={`cancel  ${
 																		!formik.isValid ? "disabled" : ""
 																	}`}
@@ -452,6 +453,7 @@ const EventDetailsWorkflowTab = ({
 																<button
 																	onClick={() => formik.handleSubmit()}
 																	disabled={!(formik.dirty && formik.isValid)}
+																	aria-disabled={!(formik.dirty && formik.isValid)}
 																	className={`save green  ${
 																		!(formik.dirty && formik.isValid)
 																			? "disabled"

src/components/shared/NavigationButtons.tsx

@@ -39,6 +39,7 @@ const NavigationButtons = ({
 					type="submit"
 					className={cn(submitClassName, submitActiveClassName)}
 					disabled={disabled}
+					aria-disabled={disabled}
 					onClick={() => {
 						!!nextPage && nextPage()
 					}}
@@ -51,6 +52,7 @@ const NavigationButtons = ({
 					type="submit"
 					className={cn(submitClassName, submitActiveClassName)}
 					disabled={disabled}
+					aria-disabled={disabled}
 					onClick={() => {
 						!!nextPage && nextPage();
 					}}

src/components/shared/RegistrationModal.tsx

@@ -697,6 +697,9 @@ const RegistrationModalContent = () => {
 										disabled={
 											!(formik.isValid && formik.values.agreedToPolicy)
 										}
+										aria-disabled={
+											!(formik.isValid && formik.values.agreedToPolicy)
+										}
 										onClick={() => onClickContinue()}
 										className={cn("submit", {
 											active:

src/components/shared/SaveEditFooter.tsx

@@ -39,6 +39,7 @@ export const SaveEditFooter: React.FC<SaveEditFooterProps> = ({
                     <button
                         onClick={additionalButton.onClick}
                         disabled={!isValid || !active}
+                        aria-disabled={!isValid || !active}
                         className={`save green ${
                             !isValid || !active ? "disabled" : ""
                         }`}
@@ -49,6 +50,7 @@ export const SaveEditFooter: React.FC<SaveEditFooterProps> = ({
         <div className="pull-right">
             <button
                 onClick={submit}
+                aria-disabled={!isValid || !active}
                 disabled={!isValid || !active}
                 className={`save green ${
                     !isValid || !active ? "disabled" : ""

src/components/shared/Table.tsx

@@ -332,6 +332,7 @@ const Table = ({
 				<div className="pagination">
 					<ButtonLikeAnchor
 						extraClassName={cn("prev", { disabled: !isNavigatePrevious() })}
+						aria-disabled={!isNavigatePrevious()}
 						onClick={() => {
 							dispatch(goToPage(pageOffset - 1));
 							forceDeselectAll();
@@ -356,6 +357,7 @@ const Table = ({
 
 					<ButtonLikeAnchor
 						extraClassName={cn("next", { disabled: !isNavigateNext() })}
+						aria-disabled={!isNavigateNext()}
 						onClick={() => {
 							dispatch(goToPage(pageOffset + 1));
 							forceDeselectAll();

src/components/shared/TableActionDropdown.tsx

@@ -52,6 +52,7 @@ const TableActionDropdown = ({
 	return (
 		<div
 			className={cn("drop-down-container", { disabled: disabled })}
+			aria-disabled={disabled}
 			onClick={(e) => handleActionMenu(e)}
 			ref={containerAction}
 		>

src/components/shared/TableFilterProfiles.tsx

@@ -240,12 +240,14 @@ const TableFiltersProfiles = ({
 							<div className="input-container">
 								{/* Buttons for saving and canceling editing */}
 								<div className="btn-container">
+									{/* <button className="cancel">J</button> */}
 									<ButtonLikeAnchor onClick={cancelEditProfile} extraClassName="cancel">
 										{t("CANCEL")}
 									</ButtonLikeAnchor>
 									<ButtonLikeAnchor
 										onClick={saveProfile}
 										extraClassName={cn("save", { disabled: !validName })}
+										aria-disabled={!validName}
 									>
 										{t("SAVE")}
 									</ButtonLikeAnchor>

src/components/shared/wizard/SelectContainer.tsx

@@ -242,6 +242,7 @@ const SelectContainer = ({
 								className={cn("submit", {
 									disabled: !markedForAddition.length || !manageable,
 								})}
+								aria-disabled={!markedForAddition.length || !manageable}
 								onClick={() => handleClickAdd()}
 							>
 								{t(`${resource.label}.ADD` as ParseKeys)}
@@ -278,6 +279,7 @@ const SelectContainer = ({
 								className={cn("remove", {
 									disabled: !markedForRemoval.length || !manageable,
 								})}
+								aria-disabled={!markedForRemoval.length || !manageable}
 								onClick={() => handleClickRemove()}
 							>
 								{t(`${resource.label}.REMOVE` as ParseKeys)}