[docs] GS-3537: add accessibility section and ACR report; improve a11y for the docs, upd active menu link styles

docs/guides/baselines.md

@@ -170,16 +170,16 @@ The full code of the considered example you can see in the related sample.
 
 The following samples show you different ways of applying the [`addTaskLayer()`](api/method/addtasklayer.md) method to enrich the timeline of the Gantt chart with different custom elements:
 
-- <a href="https://snippet.dhtmlx.com/wv23be05" target="_blank">Custom baselines</a>
-- <a href="https://snippet.dhtmlx.com/bk5m6his" target="_blank">Highlighting cells with overdue time</a>
-- <a href="https://snippet.dhtmlx.com/p74m3du2" target="_blank">Highlighting overdue tasks</a>
-- <a href="https://snippet.dhtmlx.com/cuc7d4vn" target="_blank">Showing the missed deadline for the whole project</a>
-- <a href="https://snippet.dhtmlx.com/bpupkrce" target="_blank">Displaying task progress value</a>
-- <a href="https://snippet.dhtmlx.com/quqe9s2o" target="_blank">Adding custom elements for tasks</a>
-- <a href="https://snippet.dhtmlx.com/pmuy0lj8" target="_blank">Draggable baselines</a>
-- <a href="https://snippet.dhtmlx.com/38h66bni" target="_blank">Baselines with a draggable progress knob</a>
-- <a href="https://snippet.dhtmlx.com/3oy6052q" target="_blank">Custom milestones</a>
-- <a href="" target="_blank">Recurring tasks</a>
+- <a href="https://snippet.dhtmlx.com/wv23be05" target="_blank" rel="noopener noreferrer">Custom baselines</a>
+- <a href="https://snippet.dhtmlx.com/bk5m6his" target="_blank" rel="noopener noreferrer">Highlighting cells with overdue time</a>
+- <a href="https://snippet.dhtmlx.com/p74m3du2" target="_blank" rel="noopener noreferrer">Highlighting overdue tasks</a>
+- <a href="https://snippet.dhtmlx.com/cuc7d4vn" target="_blank" rel="noopener noreferrer">Showing the missed deadline for the whole project</a>
+- <a href="https://snippet.dhtmlx.com/bpupkrce" target="_blank" rel="noopener noreferrer">Displaying task progress value</a>
+- <a href="https://snippet.dhtmlx.com/quqe9s2o" target="_blank" rel="noopener noreferrer">Adding custom elements for tasks</a>
+- <a href="https://snippet.dhtmlx.com/pmuy0lj8" target="_blank" rel="noopener noreferrer">Draggable baselines</a>
+- <a href="https://snippet.dhtmlx.com/38h66bni" target="_blank" rel="noopener noreferrer">Baselines with a draggable progress knob</a>
+- <a href="https://snippet.dhtmlx.com/3oy6052q" target="_blank" rel="noopener noreferrer">Custom milestones</a>
+- <a href="" target="_blank" rel="noopener noreferrer">Recurring tasks</a>
 
 ## Drag-and-drop for custom elements
 

docs/guides/fullscreen-mode.md

@@ -178,7 +178,7 @@ the gantt won't be able to expand to the fullscreen mode (try it in our snippet
 
 ### Full screen mode in Salesforce
 
-The Fullscreen extension doesn't work in Salesforce applications that use <a href="https://developer.salesforce.com/docs/atlas.en-us.238.0.lightning.meta/lightning/security_code.htm" target="_blank">Locker Service</a>, since Locker blocks the ability to switch the element to the full screen mode.
+The Fullscreen extension doesn't work in Salesforce applications that use <a href="https://developer.salesforce.com/docs/atlas.en-us.238.0.lightning.meta/lightning/security_code.htm" target="_blank" rel="noopener noreferrer">Locker Service</a>, since Locker blocks the ability to switch the element to the full screen mode.
 
 More specifically, the Fullscreen extension won't work with **Lightning Aura** framework and with **Lightning Web Components** but may work with **Visualforce** framework.
 

docs/guides/video-guides.md

@@ -13,43 +13,43 @@ By following these video tutorials, you can master such issues as configuring gr
 <table cellspacing="0" cellpadding="5" border="0">
   <tbody>
   <tr>
-  <td><span style="font-size:15px;"><a href="https://www.youtube.com/watch?v=-BoznxJmJIo&list=PLKS_XdyIGP4PBrtXbCrkuqeP3-w7G6i4y&index=1" target="_blank">Specifying columns in Grid</a></span> The video tutorial demonstrates how to define the content of cells, how to set the data template and how to provide the ability to toggle between two Grid views. Related article: [Specifying Columns](guides/specifying-columns.md)</td> 
+  <td><span style="font-size:15px;"><a href="https://www.youtube.com/watch?v=-BoznxJmJIo&list=PLKS_XdyIGP4PBrtXbCrkuqeP3-w7G6i4y&index=1" target="_blank" rel="noopener noreferrer">Specifying columns in Grid</a></span> The video tutorial demonstrates how to define the content of cells, how to set the data template and how to provide the ability to toggle between two Grid views. Related article: [Specifying Columns](guides/specifying-columns.md)</td> 
   <td><a href="https://www.youtube.com/watch?v=-BoznxJmJIo&list=PLKS_XdyIGP4PBrtXbCrkuqeP3-w7G6i4y&index=1">![specifying_columns](/img/specifying_columns.png)</a></td>
   </tr> 
   <tr>
-  <td><span style="font-size:15px;"><a href="https://www.youtube.com/watch?v=srtb3nYOb-E&list=PLKS_XdyIGP4PBrtXbCrkuqeP3-w7G6i4y&index=5" target="_blank">Drag-n-drop reordering of Grid columns</a></span> The video guide shows how to enable reordering of tasks within the same Tree level, how to speed up the performance for large dataset, etc. Related article: [Reordering Tasks](guides/reordering-tasks.md)</td>
+  <td><span style="font-size:15px;"><a href="https://www.youtube.com/watch?v=srtb3nYOb-E&list=PLKS_XdyIGP4PBrtXbCrkuqeP3-w7G6i4y&index=5" target="_blank" rel="noopener noreferrer">Drag-n-drop reordering of Grid columns</a></span> The video guide shows how to enable reordering of tasks within the same Tree level, how to speed up the performance for large dataset, etc. Related article: [Reordering Tasks](guides/reordering-tasks.md)</td>
   <td><a href="https://www.youtube.com/watch?v=srtb3nYOb-E&list=PLKS_XdyIGP4PBrtXbCrkuqeP3-w7G6i4y&index=5">![sorting_reordering](/img/sorting_reordering.png)</a></td>
   </tr>
   <tr>
-  <td><span style="font-size:15px;"><a href="https://www.youtube.com/watch?v=LyJ3zKSrmH4&list=PLKS_XdyIGP4PBrtXbCrkuqeP3-w7G6i4y&index=3" target="_blank">Filtering tasks in Grid</a></span> The video tutorial teaches how to implement filtering while searching a task in Gantt. Related article: [Filtering Tasks](guides/filtering.md)</td>
+  <td><span style="font-size:15px;"><a href="https://www.youtube.com/watch?v=LyJ3zKSrmH4&list=PLKS_XdyIGP4PBrtXbCrkuqeP3-w7G6i4y&index=3" target="_blank" rel="noopener noreferrer">Filtering tasks in Grid</a></span> The video tutorial teaches how to implement filtering while searching a task in Gantt. Related article: [Filtering Tasks](guides/filtering.md)</td>
   <td><a href="https://www.youtube.com/watch?v=LyJ3zKSrmH4&list=PLKS_XdyIGP4PBrtXbCrkuqeP3-w7G6i4y&index=3">![filtering_task](/img/filtering_task.png)</a></td>
   </tr>
   <tr>
-  <td><span style="font-size:15px;"><a href="https://www.youtube.com/watch?v=IKFTQNOJExY&list=PLKS_XdyIGP4PBrtXbCrkuqeP3-w7G6i4y&index=2" target="_blank">Custom buttons, icons and dropdown menus in Grid cells and headers</a></span> The video tutorial discusses how to add custom buttons for user actions in Grid cells and headers.</td>
+  <td><span style="font-size:15px;"><a href="https://www.youtube.com/watch?v=IKFTQNOJExY&list=PLKS_XdyIGP4PBrtXbCrkuqeP3-w7G6i4y&index=2" target="_blank" rel="noopener noreferrer">Custom buttons, icons and dropdown menus in Grid cells and headers</a></span> The video tutorial discusses how to add custom buttons for user actions in Grid cells and headers.</td>
   <td><a href="https://www.youtube.com/watch?v=IKFTQNOJExY&list=PLKS_XdyIGP4PBrtXbCrkuqeP3-w7G6i4y&index=2">![buttons_icons](/img/buttons_icons.png)</a></td>
   </tr>
   <tr>
-  <td><span style="font-size:15px;"><a href="https://www.youtube.com/watch?v=rqYrqqoaI_U&list=PLKS_XdyIGP4PBrtXbCrkuqeP3-w7G6i4y&index=4" target="_blank">Visibility of Grid columns</a></span> The video guide shows how to add a horizontal scrollbar into Grid and how to allow a user to select which columns should be visible. Related article: [Specifying Columns](guides/specifying-columns.md#visibility)</td>
+  <td><span style="font-size:15px;"><a href="https://www.youtube.com/watch?v=rqYrqqoaI_U&list=PLKS_XdyIGP4PBrtXbCrkuqeP3-w7G6i4y&index=4" target="_blank" rel="noopener noreferrer">Visibility of Grid columns</a></span> The video guide shows how to add a horizontal scrollbar into Grid and how to allow a user to select which columns should be visible. Related article: [Specifying Columns](guides/specifying-columns.md#visibility)</td>
   <td><a href="https://www.youtube.com/watch?v=rqYrqqoaI_U&list=PLKS_XdyIGP4PBrtXbCrkuqeP3-w7G6i4y&index=4">![visibility](/img/visibility.png)</a></td>
   </tr>
   <tr>
-  <td><span style="font-size:15px;"><a href="https://www.youtube.com/watch?v=0rIPrC0GtME&list=PLKS_XdyIGP4PBrtXbCrkuqeP3-w7G6i4y&index=6" target="_blank">Inline editing in Grid</a></span> The video tutorial demonstrates how to implement a capability to make any changes right through the grid. Related article: [Inline Editing in Grid](guides/inline-editing.md)</td> 
+  <td><span style="font-size:15px;"><a href="https://www.youtube.com/watch?v=0rIPrC0GtME&list=PLKS_XdyIGP4PBrtXbCrkuqeP3-w7G6i4y&index=6" target="_blank" rel="noopener noreferrer">Inline editing in Grid</a></span> The video tutorial demonstrates how to implement a capability to make any changes right through the grid. Related article: [Inline Editing in Grid](guides/inline-editing.md)</td> 
   <td><a href="https://www.youtube.com/watch?v=0rIPrC0GtME&list=PLKS_XdyIGP4PBrtXbCrkuqeP3-w7G6i4y&index=6">![inline_editing](/img/inline_editing.png)</a></td>
   </tr>
   <tr>
-  <td><span style="font-size:15px;"><a href="https://www.youtube.com/watch?v=eu5R86a-9jA&list=PLKS_XdyIGP4OIEInbIARVtsYH1CT3oB6w&index=2" target="_blank">dhtmlxGantt with PHP: Laravel</a></span> The video tutorial describes how to add Gantt into a Laravel app. Related article: [dhtmlxGantt with PHP: Laravel](integrations/php/howtostart-php-laravel.md)</td> 
+  <td><span style="font-size:15px;"><a href="https://www.youtube.com/watch?v=eu5R86a-9jA&list=PLKS_XdyIGP4OIEInbIARVtsYH1CT3oB6w&index=2" target="_blank" rel="noopener noreferrer">dhtmlxGantt with PHP: Laravel</a></span> The video tutorial describes how to add Gantt into a Laravel app. Related article: [dhtmlxGantt with PHP: Laravel](integrations/php/howtostart-php-laravel.md)</td> 
   <td><a href="https://www.youtube.com/watch?v=eu5R86a-9jA&list=PLKS_XdyIGP4OIEInbIARVtsYH1CT3oB6w&index=2">![gantt_php](/img/gantt_php.png)</a></td>
   </tr>
   <tr>
-  <td><span style="font-size:15px;"><a href="https://www.youtube.com/watch?v=D8YzyzBfyP8&list=PLKS_XdyIGP4OIEInbIARVtsYH1CT3oB6w" target="_blank">dhtmlxGantt with Node.js</a></span> The video guide walks you through the stages of implementing a Gantt chart on a Node.js platform. Related articles: [How to Start with dhtmlxGantt](integrations/howtostart-guides.md), [Server-Side Integration](guides/server-side.md), [dhtmlxGantt with Node.js](integrations/node/howtostart-nodejs.md)</td> 
+  <td><span style="font-size:15px;"><a href="https://www.youtube.com/watch?v=D8YzyzBfyP8&list=PLKS_XdyIGP4OIEInbIARVtsYH1CT3oB6w" target="_blank" rel="noopener noreferrer">dhtmlxGantt with Node.js</a></span> The video guide walks you through the stages of implementing a Gantt chart on a Node.js platform. Related articles: [How to Start with dhtmlxGantt](integrations/howtostart-guides.md), [Server-Side Integration](guides/server-side.md), [dhtmlxGantt with Node.js](integrations/node/howtostart-nodejs.md)</td> 
   <td><a href="https://www.youtube.com/watch?v=D8YzyzBfyP8&list=PLKS_XdyIGP4OIEInbIARVtsYH1CT3oB6w">![gantt_node](/img/gantt_node.png)</a></td>
   </tr>
   <tr>
-  <td><span style="font-size:15px;"><a href="https://www.youtube.com/watch?v=1nXl9jfMdto" target="_blank">dhtmlxGantt with Salesforce LWC</a></span> The video tutorial shows how to create a Gantt chart in Salesforce. Related article: [dhtmlxGantt with Salesforce LWC](integrations/salesforce/howtostart-salesforce.md)</td> 
+  <td><span style="font-size:15px;"><a href="https://www.youtube.com/watch?v=1nXl9jfMdto" target="_blank" rel="noopener noreferrer">dhtmlxGantt with Salesforce LWC</a></span> The video tutorial shows how to create a Gantt chart in Salesforce. Related article: [dhtmlxGantt with Salesforce LWC](integrations/salesforce/howtostart-salesforce.md)</td> 
   <td><a href="https://www.youtube.com/watch?v=1nXl9jfMdto">![gantt_salesforce](/img/gantt_salesforce.png)</a></td>
   </tr> 
   <tr>
-  <td><span style="font-size:15px;"><a href="https://www.youtube.com/watch?v=IgoXvVSerkE&list=PLKS_XdyIGP4Of4S6QgaqMKbJK1Z3bWlf8" target="_blank">dhtmlxGantt with Vue.js</a></span> The video tutorial shows how to create a basic Vue.js Gantt chart application. Related article: [How to Start with dhtmlxGantt](integrations/howtostart-guides.md)</td> 
+  <td><span style="font-size:15px;"><a href="https://www.youtube.com/watch?v=IgoXvVSerkE&list=PLKS_XdyIGP4Of4S6QgaqMKbJK1Z3bWlf8" target="_blank" rel="noopener noreferrer">dhtmlxGantt with Vue.js</a></span> The video tutorial shows how to create a basic Vue.js Gantt chart application. Related article: [How to Start with dhtmlxGantt](integrations/howtostart-guides.md)</td> 
   <td><a href="https://www.youtube.com/watch?v=IgoXvVSerkE&list=PLKS_XdyIGP4Of4S6QgaqMKbJK1Z3bWlf8">![gantt_vuejs](/img/gantt_vuejs.png)</a></td>
   </tr> 
   </tbody>

docs/integrations/php/howtostart-connector.md

@@ -32,7 +32,7 @@ Let's start the tutorial with getting the library package on your computer.
 **Do the following:**
 
 <ul>
-  <li>Download the dhtmlxGantt package <a href='https://github.com/DHTMLX/connector-php' title='dhtmlxConnector for PHP repository' target='_blank'>here</a>, if you haven't done it yet. </li>
+  <li>Download the dhtmlxGantt package <a href='https://github.com/DHTMLX/connector-php' title='dhtmlxConnector for PHP repository' target='_blank' rel='noopener noreferrer'>here</a>, if you haven't done it yet. </li>
   <li>Extract the package to the root directory of your local web server. The extracted files will be stored in a folder with the same name as the package file - dhtmlxGantt.</li>
 </ul>
 

docusaurus.config.js

@@ -177,7 +177,7 @@ const config = {
 		locales: ['en', 'de', 'ru', 'ko', 'zh'],
 		localeConfigs: {
 			zh: {
-				htmlLang: 'zh-ZH',
+				htmlLang: 'zh-Hans',
 				label: '中文'
 			},
 		}

sidebars.js

@@ -1639,7 +1639,6 @@ module.exports = {
                         "guides/undo-redo",
                         "guides/message-boxes",
                         "guides/quick-info",
-                        "guides/accessibility",
                         "guides/keyboard-navigation",
                         "guides/content-security-policy",
                         "guides/jquery-integration",
@@ -1665,6 +1664,26 @@ module.exports = {
             ]
         },
 
+        // Accessibility
+        {
+            type: "category",
+            label: "Accessibility",
+            collapsible: true,
+            collapsed: true,
+            link: {
+                type: 'doc',
+                id: "guides/accessibility"
+            },
+            items: [
+                {
+                    type: "link",
+                    label: "Overview",
+                    href: "/guides/accessibility/"
+                },
+                "guides/accessibility-conformance-report"
+            ]
+        },
+
 
         // editions
         {

src/css/custom.css

@@ -11,7 +11,7 @@
 /* You can override the default Infima variables here. */
 
 :root {
-  --ifm-color-primary: #0288D1;
+  --ifm-color-primary: #0277BD;
   --ifm-color-primary-dark: rgb(33, 175, 144);
   --ifm-color-primary-darker: rgb(31, 165, 136);
   --ifm-color-primary-darkest: rgb(26, 136, 112);
@@ -97,15 +97,28 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
 
 /* Link icons */
 
-.iconExternalLink_lCJq,
-.iconExternalLink_node_modules-\@docusaurus-theme-classic-lib-theme-IconExternalLink-styles-module,
-.iconExternalLink_nPIU,
-.iconExternalLink_node_modules-\@docusaurus-theme-classic-lib-theme-Icon-ExternalLink-styles-module {
-  display: none; /* hides the link icon */
-}
 
 /* end Link icons */
 
+/* Accessibility: non-colour cues for links (WCAG 1.4.1) */
+
+.markdown a:not(.hash-link):not(.card):not(.framework-card) {
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+}
+
+.menu__link--active {
+  box-shadow: 4px 0 0 0 currentColor inset;
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+
+[class*="iconExternalLink"] {
+  display: none;
+}
+
+/* end Accessibility */
+
 /* imgs */
 
 .markdown img {
@@ -272,7 +285,7 @@ p {
   margin-top: 7px;
   left: -18px;
   color: white;
-  background: #E74C3C;
+  background: #C0392B;
   padding: 0px 3px 1px 2px;
   border-radius: 3px;
   position: absolute;