Issue #3095739 by jhodgdon, siddhant.bhosale, pratik_kamble, andypost, ayushmishra206, SenthilMohith, kleiton_rodrigues, daffie, catch, snehalgaikwad: Convert admin UI-related modules: contextual, help, inline_form_errors, quickedit, settings_tray, shortcut, toolbar, tour module hook_help() to topic(s)

core/modules/help_topics/help_topics/core.quick_edit.html.twig

@@ -0,0 +1,19 @@
+---
+label: 'Using in-line (quick) editing'
+related:
+  - core.ui_components
+---
+<h2>{% trans %}Goal{% endtrans %}</h2>
+<p>{% trans %}Edit content or settings in place.{% endtrans %}</p>
+<h2>{% trans %}What is quick editing?{% endtrans %}</h2>
+<p>{% trans %}Quick editing is editing either content or settings inline. Content quick editing is provided by the core Quick Edit module, and settings quick editing is provided by the core Settings Tray module; both of them require the core Contextual Links module in order to expose the links that let you edit in place.{% endtrans %}</p>
+<h2>{% trans %}Who can edit content and settings in place?{% endtrans %}</h2>
+<p>{% trans %}In order to follow these steps to edit content in place, the core Quick Edit module must be installed; to edit settings, the core Settings Tray module must be installed. Also, either the core Toolbar module or a contributed replacement must be installed. You will need to have <em>Use contextual links</em> permission, as well as permission to edit the particular content or settings.{% endtrans %}</p>
+<h2>{% trans %}Steps{% endtrans %}</h2>
+<ol>
+  <li>{% trans %}Find and visit a page on your site that has either content or settings that you would like to edit.{% endtrans %}</li>
+  <li>{% trans %}Click the contextual links <em>Edit</em> button on the toolbar (in most themes, it looks like a pencil). Contextual <em>Edit</em> links with the same icon will appear all over your page.{% endtrans %}</li>
+  <li>{% trans %}Find the contextual link for the part of the page you want to edit. For example, if you want to edit the settings for a block, the link should be in the top-right corner of the block, or top-left for right-to-left languages.{% endtrans %}</li>
+  <li>{% trans %}Click the link to open the contextual links menu, and click <em>Quick edit</em>. An editing form for the settings or content should appear on the page.{% endtrans %}</li>
+  <li>{% trans %}Make your edits and submit the form.{% endtrans %}</li>
+</ol>

core/modules/help_topics/help_topics/core.ui_accessibility.html.twig

@@ -4,8 +4,10 @@ related:
   - core.ui_components
 ---
 <h2>{% trans %}Overview of accessibility{% endtrans %}</h2>
-<p>{% trans %}The core administrative interface has built-in compliance with many accessibility standards, so that most pages are accessible to most users in their default state. However, certain pages become more accessible to some users through the use of a non-default interface. These replacement interfaces include:{% endtrans %}</p>
+<p>{% trans %}The core administrative interface has built-in compliance with many accessibility standards so that most pages are accessible to most users in their default state. However, certain pages become more accessible to some users through the use of a non-default or improved interface. These interfaces include:{% endtrans %}</p>
 <dl>
   <dt>{% trans %}Disabling drag-and-drop functionality{% endtrans %}</dt>
   <dd>{% trans %}The default drag-and-drop user interface for ordering tables in the administrative interface presents a challenge for some users, including keyboard-only users and users of screen readers and other assistive technology. The drag-and-drop interface can be disabled in a table by clicking a link labeled <em>Show row weights</em> above the table. The replacement interface allows users to order the table by choosing numerical weights (with increasing numbers) instead of dragging table rows.{% endtrans %}</dd>
+  <dt>{% trans %}Enabling inline form errors{% endtrans %}</dt>
+  <dd>{% trans %}Errors that occur when you submit a form, such as not filling in a required field, are sometimes difficult for users to understand and locate. In order to make these errors easier to find, the best practice is to put a summary of the errors at the top of the form page. To make them easier to understand, the best practice is to display error messages with the form fields they are related to. Both of these practices are implemented by the core Inline Form Errors module.{% endtrans %}</dd>
 </dl>

core/modules/help_topics/help_topics/core.ui_components.html.twig

@@ -4,15 +4,31 @@ top_level: true
 related:
   - block.overview
 ---
-<h2>{% trans %}Administrative interface overview{% endtrans %}</h2>
-<p>{% trans %}The administrative interface has several components:{% endtrans %}</p>
+{% set accessibility_topic = render_var(help_topic_link('core.ui_accessibility')) %}
+{% set quick_edit_topic = render_var(help_topic_link('core.quick_edit')) %}
+{% set admin_link = render_var(help_route_link('/admin', 'system.admin')) %}
+<h2>{% trans %}What administrative interface components are available?{% endtrans %}</h2>
+<p>{% trans %}The following administrative interface components are provided by Drupal core and its modules (some contributed modules offer additional functionality):{% endtrans %}</p>
 <ul>
-  <li>{% trans %}Accessibility features, to enable all users to perform administrative tasks.{% endtrans %}</li>
+  <li>{% trans %}Accessibility features, to enable all users to perform administrative tasks. See {{ accessibility_topic }} for more information.{% endtrans %}</li>
   <li>{% trans %}A menu system, which you can navigate to find pages for administrative tasks. The core Toolbar module displays this menu on the top or left side of the page (right side in right-to-left languages). There are also contributed module replacements for the core Toolbar module, with additional features, such as the <a href="https://www.drupal.org/project/admin_toolbar">Admin Toolbar module</a>.{% endtrans %}</li>
   <li>{% trans %}The core Shortcuts module enhances the toolbar with a configurable list of links to commonly-used tasks.{% endtrans %}</li>
   <li>{% trans %}If you install the core Contextual Links module, non-administrative pages will contain links leading to related administrative tasks.{% endtrans %}</li>
+  <li>{% trans %}In-place or <em>quick</em> editing. In-place editing of content is provided by the core Quick Edit module, and in-place editing of configuration is provided by the core Settings Tray module. See {{ quick_edit_topic }} for more information.{% endtrans %}</li>
   <li>{% trans %}The core Help module displays help topics, and provides a Help block that can be placed on administrative pages to provide an overview of their functionality.{% endtrans %}</li>
   <li>{% trans %}The core Tour module allows modules to provide interactive tours of administrative pages for more detailed help.{% endtrans %}</li>
 </ul>
-
-<p>{% trans %}See the related topics listed below for specific tasks.{% endtrans %}</p>
+<h2>{% trans %}What are the sections of the administrative menu?{% endtrans %}</h2>
+<p>{% trans %}The administrative menu, which you can navigate by visiting <em>{{ admin_link }}</em> on your site or by using an administrative toolbar, has the following sections (some may not be available, depending on which modules are currently installed on your site, and your permissions):{% endtrans %}</p>
+<ul>
+  <li>{% trans %}<strong>Content:</strong> Find, manage, and create new pages; manage comments and files.{% endtrans %}</li>
+  <li>{% trans %}<strong>Structure:</strong> Place and edit blocks, set up content types and fields, configure menus, administer taxonomy, and configure some contributed modules.{% endtrans %}</li>
+  <li>{% trans %}<strong>Appearance:</strong> Switch between themes, install themes, and update existing themes.{% endtrans %}</li>
+  <li>{% trans %}<strong>Extend:</strong> Update, install, and uninstall modules.{% endtrans %}</li>
+  <li>{% trans %}<strong>Configuration:</strong> Configure the settings for various site functionality, including some contributed modules.{% endtrans %}</li>
+  <li>{% trans %}<strong>People:</strong> Manage user accounts and permissions.{% endtrans %}</li>
+  <li>{% trans %}<strong>Reports:</strong> Display information about site security, necessary updates, and site activity.{% endtrans %}</li>
+  <li>{% trans %}<strong>Help:</strong> Get help on using the administrative interface.{% endtrans %}</li>
+</ul>
+<h2>{% trans %}Administrative interface overview{% endtrans %}</h2>
+<p>{% trans %}Install the core modules mentioned above to use the corresponding aspect of the administrative interface. See the related topics listed below for more details on some aspects of the administrative interface.{% endtrans %}</p>