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

MDL-75055 templates: Apply .alert-dismissible class

Browse Source 
- Apply the .alert-dismissible class for notification alerts with
close button to fix its positioning. As an added bonus, the
.alert-dismissible class also enlarges the clickable area of the
close button which is great for accessibility.
- Improve example context for the notification alerts templates.
This commit is contained in:
Jun Pataleta
2022-06-29 22:07:11 +08:00
parent 5523816c38
commit ebb328750a
4 changed files with 28 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/templates/notification_error.mustache
+7 -2
View File
@@ -34,9 +34,14 @@
* announce Whether the notification should be announced to screen readers.
Example context (json):
{ "message": "Your pants are on fire!", "closebutton": 1, "announce": 1, "extraclasses": "foo bar"}
{
"message": "<p>Hello <a href=\"#\">World!</a></p><p>Your pants are on fire!</p>",
"closebutton": 1,
"announce": 1,
"extraclasses": "foo bar"
}
}}
<div class="alert alert-danger alert-block fade in {{ extraclasses }}" {{!
<div class="alert alert-danger alert-block fade in {{ extraclasses }} {{#closebutton}}alert-dismissible{{/closebutton}}" {{!
}}{{# announce }} role="alert" data-aria-autofocus="true"{{/ announce }}{{!
}}>
{{{ message }}}
lib/templates/notification_info.mustache
+7 -2
View File
@@ -34,9 +34,14 @@
* announce Whether the notification should be announced to screen readers.
Example context (json):
{ "message": "Your pants are on fire!", "closebutton": 1, "announce": 1, "extraclasses": "foo bar"}
{
"message": "<p>Hello <a href=\"#\">World!</a></p><p>Your pants are on fire!</p>",
"closebutton": 1,
"announce": 1,
"extraclasses": "foo bar"
}
}}
<div class="alert alert-info alert-block fade in {{ extraclasses }}" {{!
<div class="alert alert-info alert-block fade in {{ extraclasses }} {{#closebutton}}alert-dismissible{{/closebutton}}" {{!
}}{{# announce }} role="alert" data-aria-autofocus="true"{{/ announce }}{{!
}}>
{{{ message }}}
lib/templates/notification_success.mustache
+7 -2
View File
@@ -34,9 +34,14 @@
* announce Whether the notification should be announced to screen readers.
Example context (json):
{ "message": "Your pants are on fire!", "closebutton": 1, "announce": 1, "extraclasses": "foo bar"}
{
"message": "<p>Hello <a href=\"#\">World!</a></p><p>Your pants are on fire!</p>",
"closebutton": 1,
"announce": 1,
"extraclasses": "foo bar"
}
}}
<div class="alert alert-success alert-block fade in {{ extraclasses }}" {{!
<div class="alert alert-success alert-block fade in {{ extraclasses }} {{#closebutton}}alert-dismissible{{/closebutton}}" {{!
}}{{# announce }} role="alert" data-aria-autofocus="true"{{/ announce }}{{!
}}>
{{{ message }}}
lib/templates/notification_warning.mustache
+7 -2
View File
@@ -34,9 +34,14 @@
* announce Whether the notification should be announced to screen readers.
Example context (json):
{ "message": "Your pants are on fire!", "closebutton": 1, "announce": 1, "extraclasses": "foo bar"}
{
"message": "<p>Hello <a href=\"#\">World!</a></p><p>Your pants are on fire!</p>",
"closebutton": 1,
"announce": 1,
"extraclasses": "foo bar"
}
}}
<div class="alert alert-warning alert-block fade in {{ extraclasses }}" {{!
<div class="alert alert-warning alert-block fade in {{ extraclasses }} {{#closebutton}}alert-dismissible{{/closebutton}}" {{!
}}{{# announce }} role="alert" data-aria-autofocus="true"{{/ announce }}{{!
}}>
{{{ message }}}