Fix modal accessible name#5506
Conversation
There was a problem hiding this comment.
Pull request overview
Fixes accessibility issue #5502 by ensuring ng-bootstrap modal dialogs have an accessible name via aria-labelledby, using a global default and aligning modal header markup/IDs across templates.
Changes:
- Set a global
NgbModalConfig.ariaLabelledBydefault tomodal-titleinAppComponent. - Updated many modal templates to wrap header text in a heading element and add
id="modal-title". - Normalized a few modal header structures that previously contained only raw text.
Reviewed changes
Copilot reviewed 42 out of 42 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| src/app/workspaceitems-edit-page/workspaceitems-delete-page/workspaceitems-delete-page.component.html | Adds id="modal-title" to modal header heading for aria-labelledby. |
| src/app/submission/sections/upload/file/section-upload-file.component.html | Adds id="modal-title" to delete-confirm modal heading. |
| src/app/submission/sections/upload/file/edit/section-upload-file-edit.component.html | Adds id="modal-title" to edit modal heading. |
| src/app/submission/sections/cc-license/submission-section-cc-licenses.component.html | Adds id="modal-title" and modal-title class to modal header heading. |
| src/app/submission/import-external/import-external-preview/submission-import-external-preview.component.html | Converts header to <h4> and adds id="modal-title" for labeling. |
| src/app/submission/import-external/import-external-collection/submission-import-external-collection.component.html | Wraps header text in <h4 id="modal-title"> for labeling. |
| src/app/submission/form/footer/submission-form-footer.component.html | Adds id="modal-title" to discard-confirm modal heading. |
| src/app/shared/subscriptions/subscription-modal/subscription-modal.component.html | Adds id="modal-title" to subscription modal heading. |
| src/app/shared/search-form/scope-selector-modal/scope-selector-modal.component.html | Wraps header text in <h4 id="modal-title"> for labeling. |
| src/app/shared/resource-policies/form/resource-policy-form.component.html | Renames modal heading id to modal-title to align with global config. |
| src/app/shared/mydspace-actions/workspaceitem/workspaceitem-actions.component.html | Converts title container to <h4 id="modal-title"> for labeling. |
| src/app/shared/mydspace-actions/claimed-task/reject/claimed-task-actions-reject.component.html | Adds id="modal-title" to reject modal heading. |
| src/app/shared/idle-modal/idle-modal.component.html | Moves idle modal header into <h4> with id idle-modal.header. |
| src/app/shared/form/vocabulary-treeview-modal/vocabulary-treeview-modal.component.html | Adds id="modal-title" to vocabulary modal heading. |
| src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/modal/dynamic-relation-group-modal.component.html | Updates modal heading to <h4 id="modal-title">. |
| src/app/shared/dso-selector/modal-wrappers/edit-item-selector/edit-item-selector.component.html | Wraps header text in <h4 id="modal-title"> and normalizes header/body structure. |
| src/app/shared/dso-selector/modal-wrappers/edit-community-selector/edit-community-selector.component.html | Wraps header text in <h4 id="modal-title"> and normalizes header/body structure. |
| src/app/shared/dso-selector/modal-wrappers/edit-collection-selector/edit-collection-selector.component.html | Wraps header text in <h4 id="modal-title"> and normalizes header/body structure. |
| src/app/shared/dso-selector/modal-wrappers/dso-selector-modal-wrapper.component.html | Wraps header text in <h4 id="modal-title"> for labeling. |
| src/app/shared/dso-selector/modal-wrappers/create-item-parent-selector/create-item-parent-selector.component.html | Wraps header text in <h4 id="modal-title"> and normalizes header/body structure. |
| src/app/shared/dso-selector/modal-wrappers/create-community-parent-selector/create-community-parent-selector.component.html | Wraps header text in <h4 id="modal-title"> and normalizes header/body structure. |
| src/app/shared/dso-selector/modal-wrappers/create-collection-parent-selector/create-collection-parent-selector.component.html | Wraps header text in <h4 id="modal-title"> and normalizes header/body structure. |
| src/app/shared/correction-suggestion/item-withdrawn-reinstate-modal.component.html | Wraps conditional modal headers in <h4 id="modal-title"> for labeling. |
| src/app/shared/confirmation-modal/confirmation-modal.component.html | Wraps header text in <h4 id="modal-title"> for labeling. |
| src/app/shared/access-control-form-container/item-access-control-select-bitstreams-modal/item-access-control-select-bitstreams-modal.component.html | Adds id="modal-title" to modal heading. |
| src/app/profile-page/profile-claim-item-modal/profile-claim-item-modal.component.html | Adds id="modal-title" and modal-title class to header heading. |
| src/app/process-page/overview/process-overview.component.html | Adds id="modal-title"/class to delete modal heading. |
| src/app/process-page/detail/process-detail.component.html | Adds id="modal-title"/class to delete modal heading. |
| src/app/notifications/qa/events/quality-assurance-events.component.html | Renames modal heading ids to modal-title across QA action modals. |
| src/app/my-dspace-page/collection-selector/collection-selector.component.html | Wraps header text in <h4 id="modal-title"> for labeling. |
| src/app/item-page/versions/item-versions-summary-modal/item-versions-summary-modal.component.html | Wraps header text in <h4 id="modal-title"> for labeling (both branches). |
| src/app/item-page/versions/item-versions-delete-modal/item-versions-delete-modal.component.html | Wraps header text in <h4 id="modal-title"> for labeling. |
| src/app/item-page/edit-item-page/virtual-metadata/virtual-metadata.component.html | Wraps header text in <h4 id="modal-title"> for labeling. |
| src/app/item-page/edit-item-page/item-delete/item-delete.component.html | Wraps modal header text in <h4 id="modal-title"> for labeling in nested templates. |
| src/app/external-log-in/external-log-in/external-log-in.component.html | Adds id="modal-title" to login modal heading. |
| src/app/entity-groups/research-entities/submission/name-variant-modal/name-variant-modal.component.html | Adds id="modal-title" to modal heading. |
| src/app/app.component.ts | Sets global NgbModalConfig.ariaLabelledBy = 'modal-title' default. |
| src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/supervision-order-group-selector/supervision-order-group-selector.component.html | Wraps header text in <h4 id="modal-title"> for labeling. |
| src/app/admin/admin-notify-dashboard/admin-notify-detail-modal/admin-notify-detail-modal.component.html | Adds id="modal-title" to modal heading. |
| src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.html | Adds id="modal-title"/class to delete modal heading. |
| src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.html | Adds id="modal-title"/class to edit/create confirmation modal headings. |
| src/app/admin/admin-edit-user-agreement/admin-edit-user-agreement.component.html | Adds id="modal-title" to confirm modal heading. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
lgeggleston
added
improvement
accessibility
1 APPROVAL
nathanmlf
left a comment
nathanmlf
left a comment
There was a problem hiding this comment.
Tested locally and everything looks solid. I ran through both scenarios and double checked the issue caught by Copilot; it's completely fixed and working fine now. For reference, I've attached a couple of screenshots for both scenarios.
Scenario 1: Inspected the Search Results modal and confirmed the has the correct aria-labelledby pointing to the
ID.
Scenario 2: Checked the Add Entity modals (Item/Collection/Community) and the markup is perfectly normalized with the modal-title ID.
Great job @jesielviana!
tdonohue
moved this from 🙋 Needs Reviewers Assigned
to 👍 Reviewer Approved
in DSpace 10.0 Release
lgeggleston
left a comment
lgeggleston
left a comment
There was a problem hiding this comment.
Hi @jesielviana, thanks for working on this!
I tested on the search and add/edit modals, and this does work to add the appropriate ARIA labelling. However, there were a couple of changes I thought should be taken out (h4 elements and existing IDs) before moving ahead with this.
| <div [ngClass]="showThumbnails ? 'hide-modal-thumbnail-column' : ''"> | ||
| <div class="modal-header">{{'virtual-metadata.delete-relationship.modal-head' | translate}} | ||
| <div class="modal-header"> | ||
| <h4 id="modal-title" class="modal-title h4 mb-0">{{'virtual-metadata.delete-relationship.modal-head' | translate}}</h4> |
There was a problem hiding this comment.
By changing this into an h4, it's also changing to the automatic style of an h4 and much larger font. While you could override that I'm sure, I think adding a semantic header can be out of the scope of this ticket and it may just be best to leave this element as a <span>. Similarly, in the cases here where there are already header elements for the title (for example submission-import-external-preview), I don't think this should change the existing h2 either.
I agree that standardizing the modals further is a good idea generally, but if anything a standard would probably be h2 for a modal header. Maybe a separate ticket for visual/semantic headers on modals would make sense in this case?
There was a problem hiding this comment.
I think it would be better to standardize all modal titles as h4 elements for consistency.
There was a problem hiding this comment.
That's fair! I would love to check opinions from other developers before moving forward with that though, since there have been various thoughts (see past changes to modal headers and other discussions around header structure).
It would be great to get the label/accessibility part of this fix merged though - Would you be willing to move any changes to the semantic structure of headers (any new h4s and changes to existing h*) into a followup issue (and/or PR) to continue that conversation?
github-project-automation
Bot
moved this from 👍 Reviewer Approved
to 👀 Under Review
in DSpace 10.0 Release
References
Description
Fix accessibility issue where modal dialogs were missing an accessible name by ensuring all modals correctly use
aria-labelledby.Instructions for Reviewers
List of changes in this PR:
ariaLabelledByinapp.component.tsto ensure all modals have an accessible name (The goal of this approach is to avoid modifying many files in a single commit/PR, reducing review complexity and minimizing the likelihood of widespread regressions.).<h4>) where necessary.id="modal-title"to modal headings to match the global configuration.Steps to Test:
Scenario 1: Search Results Modal
ngb-modal-windowelement (withrole="dialog") correctly references theidof the<h4>element inside.modal-header.Scenario 2: Add Entity Modal (Item/Collection/Community)
ngb-modal-windowelement (withrole="dialog") correctly references theidof the<h4>element inside.modal-header.Additional Notes
Checklist
This checklist provides a reminder of what we are going to look for when reviewing your PR. You do not need to complete this checklist prior creating your PR (draft PRs are always welcome).
However, reviewers may request that you complete any actions in this list if you have not done so. If you are unsure about an item in the checklist, don't hesitate to ask. We're here to help!
mainbranch of code (unless it is a backport or is fixing an issue specific to an older branch).npm run lintnpm run check-circ-deps)package.json), I've made sure their licenses align with the DSpace BSD License based on the Licensing of Contributions documentation.