Improve accessibility of notes

Author: Joao Fernandes

_scss/_notes.scss

@@ -12,24 +12,45 @@ blockquote {
 
 blockquote > p:first-child {
   margin-top: 0;
+  font-weight: 700;
+  color: $info-color;
 }
 
-blockquote > p > strong {
-  color: $info-color;
+blockquote > p:first-child::before {
+  content: 'Note: ';
 }
 
 blockquote.warning {
   border-left-color: $warning-color;
 }
 
-blockquote.warning > p > strong {
+blockquote.warning > p:first-child {
   color: $warning-color;
 }
 
+blockquote.warning > p:first-child::before {
+  content: 'Be careful: ';
+}
+
 blockquote.danger {
   border-left-color: $danger-color;
 }
 
-blockquote.danger > p > strong {
+blockquote.danger > p:first-child {
   color: $danger-color;
 }
+
+blockquote.danger > p:first-child::before {
+  content: 'Warning: '
+}
+
+/* Maintain backwards compatibility with old
+*  note style
+*/
+blockquote > p:only-child {
+  font-weight: inherit;
+  color: inherit;
+}
+blockquote > p:only-child::before {
+  content: none;
+}

test.md

@@ -142,13 +142,13 @@ might be interesting. You can use them with Markdown or HTML images.
 
 Some tables in markdown and html.
 
-| Permission level | Access        |
-| ---------------- | ------------- |
-| **Bold** or _italic_ within a table cell. Next cell is empty on purpose. | |
-|                  | Previous cell is empty. A `--flag` in mono text. |
-| Read             | Pull |
-| Read/Write       | Pull, push |
-| Admin            | All of the above, plus update description, create and delete |
+| Permission level                                                         | Access                                                       |
+|:-------------------------------------------------------------------------|:-------------------------------------------------------------|
+| **Bold** or _italic_ within a table cell. Next cell is empty on purpose. |                                                              |
+|                                                                          | Previous cell is empty. A `--flag` in mono text.             |
+| Read                                                                     | Pull                                                         |
+| Read/Write                                                               | Pull, push                                                   |
+| Admin                                                                    | All of the above, plus update description, create and delete |
 
 The alignment of the cells in the source doesn't really matter. The ending pipe
 character is optional (unless the last cell is supposed to be empty). The header
@@ -353,17 +353,20 @@ Bootstrap JS are loaded.
 
 > **Note**: This is a note using the old note style
 
-> **This is a note using the new style**
+> **Note**: This is a note using
+> the old style and has multiple lines, but a single paragraph
+
+> Pssst, wanna know something?
 >
-> And you include a small description here telling users to be on the lookout
+> You include a small description here telling users to be on the lookout
 
-> **Be careful out there**
+> It's not safe out there, take this Moby with you
 >
 > Add the `warning` class to your blockquotes if you want to tell users
 > to be careful about something.
 {: .warning}
 
-> **Ouch, don't do that!**
+> Ouch, don't do that!
 >
 > Use the `danger` class to let people know this is dangerous or they
 > should pay close attention to this part of the road.