DOC-2592: Update Accessibility Checker plugin page (#3534)

* Fix T4A rule description

* DOC-2592: Add contentID property to API section

* DOC-2592: Fix inline code inside admonitions

* DOC-2592: Remove the `information` severity level

* DOC-2592: Replace [object] with actual values in getReport() example

* DOC-2592: Improve a11y_advanced_options admonition

* DOC-2592: Improve a11ychecker_allow_decorative_images admonition

* DOC-2592: Remove trailing comma

* DOC-2592: Add "link" to contentID possible types

Author: Farzad Hayat

modules/ROOT/pages/a11ychecker.adoc

@@ -43,7 +43,6 @@ The following checks are available for the {pluginname} plugin. The rules checke
 
 Each rule has a severity level, which will be one of the following, listed in order of increasing severity:
 
-* Information
 * Warning
 * Error
 
@@ -264,7 +263,10 @@ WCAG 2.1 specification:: https://www.w3.org/WAI/WCAG21/Techniques/html/H39.html[
 
 *Rule description:* this rule checks that all complex tables must have a `+summary+` attribute explaining to users of assistive technologies how to navigate through the data inside of the table.
 
-NOTE: This rule only applies to HTML 4 content and is not checked when `+a11ychecker_html_version+` is set to `+html5+`.
+[NOTE]
+====
+This rule only applies to HTML 4 content and is not checked when `+a11ychecker_html_version+` is set to `+html5+`.
+====
 
 ==== {pluginname} rule details - T2
 
@@ -281,7 +283,10 @@ WCAG 2.1 specification:: https://www.w3.org/WAI/WCAG21/Techniques/html/H73.html[
 
 *Rule description:* this rule checks that the table caption and summary does not have the same text content. The caption should explain *what* the table is about while the summary should explain *how* to navigate the data inside of the table.
 
-NOTE: The table `+summary+` attribute was deprecated in HTML 5, both the *what* and *how* information should be moved to the table caption.
+[NOTE]
+====
+The table `+summary+` attribute was deprecated in HTML 5, both the *what* and *how* information should be moved to the table caption.
+====
 
 ==== {pluginname} rule details - T3
 
@@ -296,7 +301,7 @@ WCAG 2.1 specification:: https://www.w3.org/WAI/WCAG21/Techniques/html/H73.html[
 [[T4A]]
 === T4A - Table markup
 
-*Rule description:* this rule checks that all `+tables+` contain both `+td+` and `+th+` elements.
+*Rule description:* this rule checks that all `+tables+` contain both `+tr+` and `+td+` elements.
 
 ==== {pluginname} rule details - T4A
 
@@ -380,7 +385,7 @@ Opens and closes the accessibility checker dialog with the results of the audit
 
 [source,js]
 ----
-editor.plugins.a11ychecker.toggleaudit();
+tinymce.activeEditor.plugins.a11ychecker.toggleaudit();
 ----
 
 [[getreport]]
@@ -396,38 +401,42 @@ const issues = tinymce.activeEditor.plugins.a11ychecker.getReport();
 
 console.log(issues);
 
-// example result
+// Example result
 [
   {
+    "contentID": "<div id=\"accessibility-issue__contentID\"><span>Text:&nbsp;</span><span>\"H5\"</span></div>",
+    "description": "Headings must be applied in sequential order. For example: Heading 1 should be followed by Heading 2, not Heading 3.",
+    "element": h5, // reference to the DOM element where the issue was found
     "id": "D2",
     "severity": "error",
-    "url": "http://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html",
-    "description": "Headings must be applied in sequential order. For example: Heading 1 should be followed by Heading 2, not Heading 3.",
-    "element": {}  // The element value contains the DOM element (such as <h4>).
+    "url": "https://www.w3.org/WAI/WCAG21/Techniques/general/G141.html",
   },
   {
+    "contentID": "<div id=\"accessibility-issue__contentID\"><span>Table:&nbsp;</span><span>\"2x2\"</span></div>",
+    "description": "Tables must have captions",
+    "element": table, // reference to the DOM element where the issue was found
     "id": "T1",
     "severity": "error",
-    "url": "http://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html",
-    "description": "Tables must have captions",
-    "element": {}  // The element value contains the DOM element (such as <table>).
+    "url": "https://www.w3.org/WAI/WCAG21/Techniques/html/H39.html",
   }
 ]
 ----
 
 [[issue]]
 === The `+issue+` object
 
-In a11ychecker, when the content within the editor is `audited`, each element is checked to ensure that no xref:a11ychecker.adoc#accessibility-rules[Accessibility rules] are violated. Any element which doesn’t adhere to a rule will generate an `issue` within the audit; the details of which are to be displayed in the a11ychecker dialog.
+In a11ychecker, when the content within the editor is `audited`, each element is checked to ensure that no xref:a11ychecker.adoc#accessibility-rules[Accessibility rules] are violated. Any element which doesn't adhere to a rule will generate an `issue` within the audit; the details of which are to be displayed in the a11ychecker dialog.
 
 The `+'issue'+` object provides relevant data pertaining to any issue generated by an element which violates an xref:a11ychecker.adoc#accessibility-rules[Accessibility rule]:
 
 * `+id+` : `+String+` A11ychecker issue identifier used by {productname}, such as D1, T4A. For a description and other details about the issue, see xref:accessibility-rules[Accessibility Rules].
 
 * `+description+` : `+String+` description of the issue; as will be displayed in the dialog.
 
-* `+severity+` : `+String+` severity level of the issue; either `+info+`, `+warning+` or `+error+`.
+* `+severity+` : `+String+` severity level of the issue; either `+warning+` or `+error+`.
 
 * `+url+` : `+String+` URL reference for the issue. By default, this will be a link to the W3 website, containing the W3 WCAG technique that needs to be addressed to clear the issue.
 
 * `+element+` : `+Object+` DOM element where the issue was found.
+
+* `+contentID+` : `+String+` A short snippet of the content (such as text, link, image, or table) where the issue was found.

modules/ROOT/partials/configuration/a11y_advanced_options.adoc

@@ -11,7 +11,10 @@ Setting `+a11y_advanced_options+` to `+true+`:
 * Adds the *Image is decorative* option to the _Insert/Edit Image_ dialog, allowing users to specify that an image is decorative and does not require alternative text for accessibility purposes.
 * Adds the *Image is decorative* option to the _Accessibility Checker error_ dialog for images without alternative text or the `+role="presentation"+` attribute.
 
-IMPORTANT: When `+a11y_advanced_options+` is set to `+true+`, xref:a11ychecker.adoc#a11ychecker_allow_decorative_images[`+a11ychecker_allow_decorative_images+`] will default to `+true+`.
+[IMPORTANT]
+====
+If `xref:a11ychecker.adoc#a11ychecker_allow_decorative_images[a11ychecker_allow_decorative_images]` is not explicitly set, the value defined in `+a11y_advanced_options+` will be used.
+====
 
 *Type:* `+Boolean+`
 

modules/ROOT/partials/configuration/a11ychecker_allow_decorative_images.adoc

@@ -25,7 +25,10 @@ If `+a11ychecker_allow_decorative_images+` is set to `+false+`, the Accessibilit
 * An image has an empty alternative text attribute.
 * An image has the `+role="presentation"+` attribute.
 
-NOTE: If xref:a11ychecker.adoc#a11y_advanced_options[`+a11y_advanced_options+`] is set to `+true+`, `+a11ychecker_allow_decorative_images+` will default to `+true+`.
+[NOTE]
+====
+If `+a11ychecker_allow_decorative_images+` is not explicitly set, the value defined in `xref:a11ychecker.adoc#a11y_advanced_options[a11y_advanced_options]` will be used.
+====
 
 *Type:* `+Boolean+`
 

modules/ROOT/partials/configuration/a11ychecker_issue_url_callback.adoc

@@ -1,7 +1,7 @@
 [[a11ychecker_issue_url_callback]]
 == `+a11ychecker_issue_url_callback+`
 
-The `+a11ychecker_issue_url_callback+` option is used to change the target URL for the "Click for more info" button (image:icons/help.svg[help icon - a question mark inside a circle]) in the Accessibility Checker dialog. By default, the "more info" links will point to `+https://www.tiny.cloud/docs/tinymce/6/a11ychecker/#<ruleId>+`, such as `+https://www.tiny.cloud/docs/tinymce/6/a11ychecker/#D1+`. This option can be used to set the target URL to a page or pages outside {site-url}/.
+The `+a11ychecker_issue_url_callback+` option is used to change the target URL for the "Click for more info" button (image:icons/help.svg[help icon - a question mark inside a circle]) in the Accessibility Checker dialog. By default, the "more info" links will point to `+https://www.tiny.cloud/docs/tinymce/7/a11ychecker/#<ruleId>+`, such as `+https://www.tiny.cloud/docs/tinymce/7/a11ychecker/#D1+`. This option can be used to set the target URL to a page or pages outside {site-url}/.
 
 *Type:* `+Function+`
 

modules/ROOT/partials/misc/admon-accessibility-rule-i3-can-also-be-applied.adoc

@@ -1 +1,4 @@
-NOTE: In {productname} 6.3 and later, rule xref:I3[I3] can also be applied. If applied, an _Image alternative text should be less than 100 characters_ warning dialog presents if the alternative (`+alt+`) text is longer than 100 characters. This dialog also presents the alternative text in an editable field, for immediate repair.
+[NOTE]
+====
+In {productname} 6.3 and later, rule xref:I3[I3] can also be applied. If applied, an _Image alternative text should be less than 100 characters_ warning dialog presents if the alternative (`+alt+`) text is longer than 100 characters. This dialog also presents the alternative text in an editable field, for immediate repair.
+====