233 Remove css content callout blocks

_sass/components/_callouts.scss

@@ -19,49 +19,44 @@ p.example {
   background: var(--color-informative-bg-document);
   border-left-color: var(--color-informative-border-default);
 
-  &::before {
-    color: var(--color-informative-color-document);
-    content: "Example";
+  > strong {
+    color: var(--color-informative-color-s);
   }
 }
 
 p.alert {
   background: var(--color-warning-bg-document);
   border-left-color: var(--color-warning-border-default);
 
-  &::before {
-    color: var(--color-warning-color-document);
-    content: "Alert";
+  > strong {
+    color: var(--color-warning-color-subtle);
   }
 }
 
 p.tip {
   background: var(--color-positive-bg-document);
   border-left-color: var(--color-positive-border-default);
 
-  &::before {
-    color: var(--color-positive-color-document);
-    content: "Tip";
+  > strong {
+    color: var(--color-positive-color-subtle);
   }
 }
 
 p.info {
   background: var(--color-informative-bg-default);
   border-left-color: var(--color-informative-border-default);
 
-  &::before {
-    color: var(--color-informative-color-document);
-    content: "Info";
+  > strong {
+    color: var(--color-informative-color-subtle);
   }
 }
 
 p.warning {
   background: var(--color-negative-bg-default);
   border-left-color: var(--color-negative-border-default);
 
-  &::before {
+  > strong {
     color: var(--color-negative-color-subtle);
-    content: "Warning";
   }
 }
 
@@ -70,9 +65,8 @@ p.dont {
   border: 2px solid var(--color-negative-border-default);
   border-radius: $border-radius;
 
-  &::before {
+  > strong {
     color: var(--color-negative-color-subtle);
-    content: "Don't";
   }
 }
 
@@ -81,7 +75,7 @@ p.do {
   border: 2px solid var(--color-positive-border-default);
   border-radius: $border-radius;
 
-  &::before {
-    content: "Do";
+  > strong {
+    color: var(--color-positive-color-subtle);
   }
 }

docs/about/accessibility-statement.md

@@ -17,7 +17,7 @@ Please inform us!
 - or create an [issue in GitHub](https://github.com/wpaccessibility/wp-a11y-docs/issues/).
 
 {: .callout  .info }
-Please note: this is only for accessibility issues in **this website** and not for WordPress itself. If you find an accessibility issue in WordPress core, or in one of the core themes, please create a [new ticket on Make WordPress Core](https://core.trac.wordpress.org/newticket) and give it the focus “accessibility”.
+**Please note:** this is only for accessibility issues in **this website** and not for WordPress itself. If you find an accessibility issue in WordPress core, or in one of the core themes, please create a [new ticket on Make WordPress Core](https://core.trac.wordpress.org/newticket) and give it the focus “accessibility”.
 
 ## Known accessibility issues
 

docs/contribute/github/content-kitchen-sink.md

@@ -10,7 +10,7 @@ has_video: true
 This page lists the options and code available for creating content in this documentation.
 
 {: .callout  .info }
-WordPress.org provides a lot of style guides for documentation: [WordPress Style Guides - highlights](https://make.wordpress.org/docs/style-guide/welcome/highlights/). We value most of all: be [kind and professional](docs/contribute/CODE_OF_CONDUCT.md) in your text and please write the text yourself or make sure the reader knows who you are citing.
+**Please note:** WordPress.org provides a lot of style guides for documentation: [WordPress Style Guides - highlights](https://make.wordpress.org/docs/style-guide/welcome/highlights/). We value most of all: be [kind and professional](docs/contribute/CODE_OF_CONDUCT.md) in your text and please write the text yourself or make sure the reader knows who you are citing.
 
 ## Headings
 ```markdown
@@ -31,11 +31,11 @@ WordPress.org provides a lot of style guides for documentation: [WordPress Style
 ###### This is an H6 heading
 
 {: .callout  .alert }
-In blog posts the H1 is added by the template: [Add a blog post]({{site.baseurl}}/docs/contribute/github/blog-post/).
+**Alert:** In blog posts the H1 is added by the template: [Add a blog post]({{site.baseurl}}/docs/contribute/github/blog-post/).
 
 ## Summary in a larger text font.
 
-Start the paragraph with an H2 named "Summaty, or introduction and the callout {: .lead }`
+Start the paragraph with an H2 named "Summary, or introduction and the callout {: .lead }`
 
 
 ```markdown
@@ -83,7 +83,7 @@ An image: ![Alt text](url)
 ![Library]({{site.baseurl}}/assets/images/small-image.jpg)
 
 {: .callout  .tip } 
-For more text options with Markdown read: [Basic writing and formatting syntax](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax) on GitHub.
+**Tip:** For more text options with Markdown read: [Basic writing and formatting syntax](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax) on GitHub.
 
 ## Videos
 This site uses the accessible media player Able Player.
@@ -166,54 +166,54 @@ For larger pieces of content, you can add to a `<p>`, `<div>`or even a landmark,
 
 ```markdown
 {: .callout  .info }
-This is an informational message and uses the “info” callout.
+**Info:** This is an informational message and uses the “info” callout.
 
 {: .callout  .tip }
-Use the “tip” callout to highlight tips.
+**Tip:** Use the “tip” callout to highlight tips.
 
 {: .callout  .alert }
-The “alert” callout is for alerting readers to important messages.
+**Alert:** The “alert” callout is for alerting readers to important messages.
 
 {: .callout  .warning }
-When something is particularly precarious, use the “warning” callout.
+**Warning:** When something is particularly precarious, use the “warning” callout.
 
 {: .callout  .example }
-Give an example with the "example" callout. 
+**Example:** Give an example with the "example" callout. 
 The title of the callout will be "Example".
 
 {: .callout  .do }
-Example of good practice.
+**Do:** Example of good practice.
 
 {: .callout  .dont }
-Example of bad practice.
+**Don't:** Example of bad practice.
 
 ```
 
 {: .callout  .info }
-This is an informational message and uses the “info” callout.
+**Info:** This is an informational message and uses the “info” callout.
 
 {: .callout  .tip }
-Use the “tip” callout to highlight tips.
+**Tip:** Use the “tip” callout to highlight tips.
 
 {: .callout  .alert }
-The “alert” callout is for alerting readers to important messages.
+**Alert:** The “alert” callout is for alerting readers to important messages.
 
 {: .callout  .warning }
-When something is particularly precarious, use the “warning” callout.
+**Warning:** When something is particularly precarious, use the “warning” callout.
 
 {: .callout  .example }
-Give an example with the example. The title of the callout will be "Example".
+**Example:** Give an example with the example.
 
 {: .callout  .do }
-Example of how to do something. The title of the callout will be "Do".
+**Do:** Example of how to do something.
 
 {: .callout  .dont }
-Example of how not to do something. The title of the callout will be "Don't".
+**Don't:** Example of how not to do something. 
 
 ### Labels
 
 {: .callout  .info }
-Note: these are not form labels, but text labels.
+**Please note:** These are not form labels, but text labels.
 
 
 ```markdown

docs/contribute/github/index.md

@@ -11,6 +11,6 @@ We use the GitHub repository [wpaccessibility/wp-a11y-docs](https://github.com/w
 The project board [WP A11y docs](https://github.com/orgs/wpaccessibility/projects/3) contains all open issues and also the pull requests to review.
 
 {: .callout  .alert }
-Before you start writing new documentation, please let us know that you’d like to work on it, so we can assign the task to you. Content written without contacting the project leads first, will not be reviewed.
+**Alert:** Before you start writing new documentation, please let us know that you’d like to work on it, so we can assign the task to you. Content written without contacting the project leads first, will not be reviewed.
 
 

docs/contribute/report-error.md

@@ -15,4 +15,4 @@ There are several ways you can report an error:
 - Open an issue in the GitHub repository [wpaccessibility/wp-a11y-docs](https://github.com/wpaccessibility/wp-a11y-docs/).
 
 {: .callout  .info }
-Please note: this is only for errors in the documentation or code in **wpaccessibility.org** and not for WordPress itself. If you find an accessibility issue in WordPress core, or in one of the core themes, please create a [new ticket on Make WordPress Core](https://core.trac.wordpress.org/newticket) and give it the focus “accessibility”.
+**Please note:** This is only for errors in the documentation or code in **wpaccessibility.org** and not for WordPress itself. If you find an accessibility issue in WordPress core, or in one of the core themes, please create a [new ticket on Make WordPress Core](https://core.trac.wordpress.org/newticket) and give it the focus “accessibility”.

docs/contribute/write.md

@@ -8,12 +8,12 @@ nav_order: 3
 # Write documentation
 
 {: .callout  .alert }
-Before you start writing new documentation, please let us know that you’d like to work on it, so we can assign the task to you. Content written without contacting the project leads first, will not be reviewed.
+**Alert:** Before you start writing new documentation, please let us know that you’d like to work on it, so we can assign the task to you. Content written without contacting the project leads first, will not be reviewed.
 
 We keep track of the work on the documentation in the project board [WP A11y docs](https://github.com/orgs/wpaccessibility/projects/3).
 
 {: .callout  .tip }
-Please write the content yourself and use AI (artificial intelligence) only to translate or to check the quality of your English.
+**Tip:** Please write the content yourself and use AI (artificial intelligence) only to translate or to check the quality of your English.
 
 To keep all pages in the same structure, please stick to the following formats for a blogpost or an accessibility topic.
 

docs/guide/index.md

@@ -7,7 +7,7 @@ nav_order: 3
 # Reading guide
 
 {: .callout  .alert }
-This content will be created later, when there is sufficient content to point to.  
+**Alert:** This content will be created later, when there is sufficient content to point to.  
 Help discuss how to create a useful reading guide for various target groups with comments on issue [GitHub #59
 Reading guide](https://github.com/wpaccessibility/wp-a11y-docs/issues/59).  
 

docs/legislation/index.md

@@ -7,5 +7,5 @@ nav_order: 7
 # Legislation
 
 {: .callout  .alert }
-This content will be written.  
+**Alert:** This content will be written.  
 Related issue on [GitHub #179 Intro page Legislation](https://github.com/wpaccessibility/wp-a11y-docs/issues/177).    

docs/resources/index.md

@@ -7,5 +7,5 @@ nav_order: 9
 # Resources on accessibility
 
 {: .callout  .alert }
-This content will be written.  
+**Alert:** This content will be written.  
 Related issue on [GitHub #181 Intro page Resources on accessibility](https://github.com/wpaccessibility/wp-a11y-docs/issues/181).    

docs/start/at/index.md

@@ -8,5 +8,5 @@ nav_order: 5
 # Assistive technology
 
 {: .callout  .alert }
-This content will be written.
+**Alert:** This content will be written.
 Related issue on [GitHub #87 Assistive technology](https://github.com/wpaccessibility/wp-a11y-docs/issues/87).  

docs/start/business/index.md

@@ -8,7 +8,7 @@ nav_order: 4
 # Accessibility for your business
 
 {: .callout  .alert }
-Starter content. This content will to be reviewed and expanded.  
+**Alert:** Starter content. This content will to be reviewed and expanded.  
 Related issue on [GitHub #94 Topic Accessibility for your business](https://github.com/wpaccessibility/wp-a11y-docs/issues/94).  
 
 An inclusive website enhances your business. It will:

docs/start/myths/overlays.md

@@ -14,7 +14,7 @@ That's a technical definition of an overlay, which doesn't address the effective
 However, an overlay can also create new problems. 
 
 {: .callout  .alert }
-Note that while many of the accessibility plugins in the WordPress plugin repository are overlays or toolbar widgets, these are not recommended in this documentation. The WordPress Accessibility team does not recommend the usage of [accessibility overlays](https://overlayfactsheet.com/en/).
+**Alert:** Note that while many of the accessibility plugins in the WordPress plugin repository are overlays or toolbar widgets, these are not recommended in this documentation. The WordPress Accessibility team does not recommend the usage of [accessibility overlays](https://overlayfactsheet.com/en/).
 
 ## What are legitimate uses of accessibility overlays?
 

docs/start/quick-wins/index.md

@@ -8,7 +8,7 @@ nav_order: 1
 # Quick wins
 
 {: .callout  .alert }
-Starter content. This content will to be reviewed and expanded.  
+**Alert:** Starter content. This content will to be reviewed and expanded.  
 Related issue on [GitHub #91 Topic Quick wins](https://github.com/wpaccessibility/wp-a11y-docs/issues/91).  
 
 What to do first? Start with the low-hanging fruit. Color contrast of text ia an easy fix. Alternative text with images probably too.

docs/start/training/index.md

@@ -8,7 +8,7 @@ nav_order: 3
 # Training, learn web accessibility
 
 {: .callout  .alert }
-This content will to be reviewed and expanded. The links need to be checked and updated.
+**Alert:** This content will to be reviewed and expanded. The links need to be checked and updated.
 Related issue on [GitHub #93 Training](https://github.com/wpaccessibility/wp-a11y-docs/issues/93).  
 
 ## Online events

docs/start/wcag-intro/index.md

@@ -8,7 +8,7 @@ nav_order: 2
 # Introduction to WCAG
 
 {: .callout  .alert }
-Starter content. This content will to be reviewed and expanded.  
+**Alert:** Starter content. This content will to be reviewed and expanded.  
 Related issue on [GitHub #92 Introduction to WCAG](https://github.com/wpaccessibility/wp-a11y-docs/issues/92).  
 
 The primary guidance for web accessibility on a global basis are the Web Content Accessibility Guidelines, commonly referred to as WCAG. WordPress requires that all content meet WCAG guidelines, but also pushes to provide accessibility beyond that minimum whenever possible. 

docs/start/wp-plugins/index.md

@@ -8,7 +8,7 @@ nav_order: 2
 # WordPress accessibility plugins
 
 {: .callout  .alert }
-Note that while many plugins in the WordPress plugin repository are overlays or widgets, none of those are listed here. The WordPress Accessibility team does not recommend the usage of [accessibility overlays](https://overlayfactsheet.com/en/).
+**Alert:** Note that while many plugins in the WordPress plugin repository are overlays or widgets, none of those are listed here. The WordPress Accessibility team does not recommend the usage of [accessibility overlays](https://overlayfactsheet.com/en/).
 
 ## Editing Tools
 

docs/testing/automated/index.md

@@ -8,7 +8,7 @@ nav_order: 5
 # Automated accessibility testing
 
 {: .callout  .alert }
-This content will be reviewed and expanded.  
+**Alert:** This content will be reviewed and expanded.  
 Related issue on [GitHub #174 Topic Automated accessibility testing](https://github.com/wpaccessibility/wp-a11y-docs/issues/174).     
 
 ## WCAG 2 AA automated validation
@@ -34,7 +34,7 @@ The big difference between PHP and JavaScript code standard checks and accessibi
 There are several command line tools for automated testing like [aXe-cli](https://github.com/dequelabs/axe-cli) and [pa11y](https://github.com/pa11y/pa11y).
 
 {: .callout  .info }
-Automated accessibility testing doesn’t catch all the issues, rarely more than 30%. Testing in the browser and manual keyboard testing still needs to be part of your workflow.
+**Info:** Automated accessibility testing doesn’t catch all the issues, rarely more than 30%. Testing in the browser and manual keyboard testing still needs to be part of your workflow.
 
 ### Setup for aXe-cli
 

docs/testing/checklists/index.md

@@ -8,7 +8,7 @@ nav_order: 2
 # Checklists for accessibility testing overall
 
 {: .callout  .alert }
-This content will be reviewed and expanded.  
+**Alert:** This content will be reviewed and expanded.  
 Related issue on [GitHub #170 Checklists for accessibility testing overall](https://github.com/wpaccessibility/wp-a11y-docs/issues/170).    
 
 [Accessibility testing guide](https://github.com/alphagov/wcag-primer/wiki) by the British Government Digital Service. For testing websites and applications against the Web Content Accessibility Guidelines (WCAG) 2.2 AA Level. A detailed checklist per WCAG Success criterion.

docs/testing/code/index.md

@@ -8,7 +8,7 @@ nav_order: 5
 # Frontend checks for web accessibility
 
 {: .callout  .alert }
-This content will be reviewed and expanded.  
+**Alert:** This content will be reviewed and expanded.  
 Related issue on [GitHub #173 Topic Frontend checks for web accessibility](https://github.com/wpaccessibility/wp-a11y-docs/issues/173).     
 
 Testing for valid, semantic HTML is essential for the accessibility of your work. In this page we list some essential requirements and best resources. It gives you the minimum tests you need to do during development and before you commit your work.

docs/testing/content/index.md

@@ -8,7 +8,7 @@ nav_order: 3
 # Content checks for web accessibility
 
 {: .callout  .alert }
-This content will be reviewed and expanded.
+**Alert:** This content will be reviewed and expanded.
 Related issue on [GitHub #171 Topic Content checks for web accessibility](https://github.com/wpaccessibility/wp-a11y-docs/issues/171).    
 
 This page gives an overview of practical approaches and best practices for to keep your content as readable for as many users as possible.

docs/testing/design/index.md

@@ -9,7 +9,7 @@ nav_order: 4
 # Design checks for web accessibility
 
 {: .callout  .alert }
-This content will be reviewed and expanded.
+**Alert:** This content will be reviewed and expanded.
 Related issue on [GitHub #172 Topic Design checks for web accessibility](https://github.com/wpaccessibility/wp-a11y-docs/issues/172).    
 
 The most common design elements to check for are color contrast between text / background and the meaning of color to give information. But these aren’t the only things to take into consideration to improve your design.
@@ -23,7 +23,7 @@ Check the color contrast ratio between text and its background. The rules in WCA
 There are many tools to calculate this easily, see [Color contrast checkers](http://www.webaxe.org/color-contrast-tools/).
 
 {: .callout  .tip }
-Logos and logotype are frequently exceptions to accessibility guidelines, including color contrast rules. If you’re designing a new logo, however, it might be a good idea to consider them, anyway.
+**Tip:** Logos and logotype are frequently exceptions to accessibility guidelines, including color contrast rules. If you’re designing a new logo, however, it might be a good idea to consider them, anyway.
 
 ## Color Contrast
 

docs/testing/keyboard/index.md

@@ -8,7 +8,7 @@ nav_order: 6
 # Keyboard navigation testing
 
 {: .callout  .alert }
-This content will be reviewed and expanded.  
+**Alert:** This content will be reviewed and expanded.  
 Related issue on [GitHub #175 Topic Keyboard navigation testing](https://github.com/wpaccessibility/wp-a11y-docs/issues/175).    
 
 All functionality should work using a **keyboard only**. This essential for all assistive technology to work properly. Most keyboard testing should be checked manually. The best time to test this is during development.

docs/testing/plugins/index.md

@@ -8,7 +8,7 @@ nav_order: 8
 # WordPress' plugins for accessibility testing 
 
 {: .callout  .alert }
-This content will be reviewed and expanded.  
+**Alert:** This content will be reviewed and expanded.  
 Related issue on [GitHub #177 Topic Screen reader testing](https://github.com/wpaccessibility/wp-a11y-docs/issues/177).    
 
 We do not specifically endorse any of the plugins listed here but offer them as tools for you to test and use in your own accessible WordPress site.
@@ -23,4 +23,4 @@ We do not specifically endorse any of the plugins listed here but offer them as
 - [Sa11y](https://wordpress.org/plugins/sa11y/) – Accessibility checking tool geared towards content authors.
 
 {: .callout  .warning }
-Note that while many plugins in the WordPress plugin repository are overlays or widgets, none of those are listed here. The WordPress Accessibility team does not recommend the usage of [accessibility overlays](https://overlayfactsheet.com/en/).
+**Warning:** Note that while many plugins in the WordPress plugin repository are overlays or widgets, none of those are listed here. The WordPress Accessibility team does not recommend the usage of [accessibility overlays](https://overlayfactsheet.com/en/).