L-electron-Rare/moodle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MDL-74802 core: Improve the accessibility of alert notifications

Browse Source 
* Make the ordering of the message and the close button logical on
  the DOM.
* Hide the times HTML entity
* Add sr-only label on the close button for non-sighted users
* Add tooltip on the close button sighted users
This commit is contained in:
Jun Pataleta
2022-05-23 13:00:22 +08:00
parent d237a6312f
commit 252dbc9605
4 changed files with 28 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/templates/notification_error.mustache
+7 -1
View File
@@ -39,6 +39,12 @@
<div class="alert alert-danger alert-block fade in {{ extraclasses }}" {{!
}}{{# announce }} role="alert" data-aria-autofocus="true"{{/ announce }}{{!
}}>
{{# closebutton }}<button type="button" class="close" data-dismiss="alert">&times;</button>{{/ closebutton }}
{{{ message }}}
{{# closebutton }}{{!
}}<button type="button" class="close" data-dismiss="alert"{{!
}} title="{{#str}}dismissnotification, core{{/str}}" data-toggle="tooltip">
<span aria-hidden="true">&times;</span>
<span class="sr-only">{{#str}}dismissnotification, core{{/str}}</span>
</button>{{!
}}{{/ closebutton }}
</div>
lib/templates/notification_info.mustache
+7 -2
View File
@@ -39,7 +39,12 @@
<div class="alert alert-info alert-block fade in {{ extraclasses }}" {{!
}}{{# announce }} role="alert" data-aria-autofocus="true"{{/ announce }}{{!
}}>
{{# closebutton }}<button type="button" class="close" data-dismiss="alert">&times;</button>{{/ closebutton }}
{{{ message }}}
{{# closebutton }}{{!
}}<button type="button" class="close" data-dismiss="alert"{{!
}} title="{{#str}}dismissnotification, core{{/str}}" data-toggle="tooltip">
<span aria-hidden="true">&times;</span>
<span class="sr-only">{{#str}}dismissnotification, core{{/str}}</span>
</button>{{!
}}{{/ closebutton }}
</div>
lib/templates/notification_success.mustache
+7 -1
View File
@@ -39,6 +39,12 @@
<div class="alert alert-success alert-block fade in {{ extraclasses }}" {{!
}}{{# announce }} role="alert" data-aria-autofocus="true"{{/ announce }}{{!
}}>
{{# closebutton }}<button type="button" class="close" data-dismiss="alert">&times;</button>{{/ closebutton }}
{{{ message }}}
{{# closebutton }}{{!
}}<button type="button" class="close" data-dismiss="alert"{{!
}} title="{{#str}}dismissnotification, core{{/str}}" data-toggle="tooltip">
<span aria-hidden="true">&times;</span>
<span class="sr-only">{{#str}}dismissnotification, core{{/str}}</span>
</button>{{!
}}{{/ closebutton }}
</div>
lib/templates/notification_warning.mustache
+7 -1
View File
@@ -39,6 +39,12 @@
<div class="alert alert-warning alert-block fade in {{ extraclasses }}" {{!
}}{{# announce }} role="alert" data-aria-autofocus="true"{{/ announce }}{{!
}}>
{{# closebutton }}<button type="button" class="close" data-dismiss="alert">&times;</button>{{/ closebutton }}
{{{ message }}}
{{# closebutton }}{{!
}}<button type="button" class="close" data-dismiss="alert"{{!
}} title="{{#str}}dismissnotification, core{{/str}}" data-toggle="tooltip">
<span aria-hidden="true">&times;</span>
<span class="sr-only">{{#str}}dismissnotification, core{{/str}}</span>
</button>{{!
}}{{/ closebutton }}
</div>