accessibility: make ids of community settings' delete buttons unique

inveniosoftware · Dec 6, 2023 · 4f0a603 · 4f0a603
1 parent 99f6677
commit 4f0a603
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 5 deletions.
diff --git a/...io_communities/assets/semantic-ui/js/invenio_communities/settings/profile/DeleteButton.js b/...io_communities/assets/semantic-ui/js/invenio_communities/settings/profile/DeleteButton.js
@@ -44,7 +44,7 @@ export const DeleteButton = (props) => {
     if (modalOpen) cancelBtnRef?.current?.focus();
   }, [modalOpen, cancelBtnRef]);
 
-  const { label, confirmationMessage } = props;
+  const { label, confirmationMessage, id } = props;
 
   return (
     <>
@@ -60,7 +60,7 @@ export const DeleteButton = (props) => {
         aria-haspopup="dialog"
         aria-controls="warning-modal"
         aria-expanded={modalOpen}
-        id="delete-button"
+        id={id}
       >
         <Icon name="trash" />
         {label}
@@ -69,7 +69,7 @@ export const DeleteButton = (props) => {
       <Modal
         id="warning-modal"
         role="dialog"
-        aria-labelledby="delete-button"
+        aria-labelledby={id}
         open={modalOpen}
         onClose={handleClose}
         size="tiny"
@@ -99,4 +99,5 @@ DeleteButton.propTypes = {
   onError: PropTypes.func.isRequired,
   label: PropTypes.string.isRequired,
   confirmationMessage: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
 };
diff --git a/...nities/assets/semantic-ui/js/invenio_communities/settings/profile/DeleteCommunityModal.js b/...nities/assets/semantic-ui/js/invenio_communities/settings/profile/DeleteCommunityModal.js
@@ -169,7 +169,7 @@ export class DeleteCommunityModal extends Component {
           aria-haspopup="dialog"
           aria-controls="warning-modal"
           aria-expanded={modalOpen}
-          id="delete-button"
+          id="delete-community-button"
         >
           <Icon name="trash" />
           {label}
@@ -178,7 +178,7 @@ export class DeleteCommunityModal extends Component {
         <Modal
           id="warning-modal"
           role="dialog"
-          aria-labelledby="delete-button"
+          aria-labelledby="delete-community-button"
           open={modalOpen}
           onClose={this.closeConfirmModal}
           size="tiny"

diff --git a/...io_communities/assets/semantic-ui/js/invenio_communities/settings/profile/LogoUploader.js b/...io_communities/assets/semantic-ui/js/invenio_communities/settings/profile/LogoUploader.js
@@ -118,6 +118,7 @@ const LogoUploader = ({ community, defaultLogo, hasLogo, onError, logoMaxSize })
           </label>
           {logoExists && (
             <DeleteButton
+              id={"delete-picture-button"}
               label={i18next.t("Delete picture")}
               confirmationMessage={
                 <Header as="h2" size="medium">