external/mailinabox
1
0
Fork 0
mirror of https://github.com/mail-in-a-box/mailinabox.git synced 2026-02-04 11:22:52 +01:00
Code Issues Releases Wiki Activity

Fix critical accessibility bug in control panel modals (#2551)

Browse Source 
- Removed `aria-hidden="true"` from the `global_modal` div.  
  This attribute was set but not updated, causing screen readers to ignore the modal even when it was open. Bootstrap sets and modifies `aria-hidden` automatically, so the correct approach is not to set it manually.  

- The `global_modal` div has `role="dialog"` (correct) but lacked `aria-modal="true"`.  
  The ARIA specification recommends setting this attribute to ensure screen readers know that focus is (and should be) trapped in the modal. I added it.  

- Removed `aria-hidden="true"` from the close button.  
  This button can receive keyboard focus, so it should have an accessible name. If it is hidden, a screen reader user experiences focus on an unnamed element, which is confusing.  

- Added `aria-label="Close Dialog"` to the close button.  
  The visible label `×` does not describe the button’s function, but the new ARIA label does.
This commit is contained in:
Tim in 't Veld 2026-02-01 16:29:39 +01:00 committed by GitHub
parent 3b53bf5ae4
commit de4ec82a5a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 2 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
management/templates/index.html
View File

@ -215,11 +215,11 @@
</div> </div>
</div> </div>
<div id="global_modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="errorModalTitle" aria-hidden="true"> <div id="global_modal" class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="errorModalTitle">
<div class="modal-dialog modal-sm"> <div class="modal-dialog modal-sm">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <button type="button" class="close" data-dismiss="modal" aria-label="Close Dialog">&times;</button>
<h4 class="modal-title" id="errorModalTitle"> </h4> <h4 class="modal-title" id="errorModalTitle"> </h4>
</div> </div>
<div class="modal-body"> <div class="modal-body">