Docs (dropdown): Select all functionality for usage and a11y tabs (#4026

)

* docs (dropdown): select all functionality

* docs (dropdown): image and grammatical corrections

* docs (dropdown): shortened link to accessibilty tab

* docs (dropdown): shortened link to accessibilty tab

---------

Co-authored-by: Lauren Rice <[email protected]>
Co-authored-by: Guilherme Datilio Ribeiro <[email protected]>

src/pages/components/dropdown/usage.mdx

@@ -198,8 +198,10 @@ selection.
    options.
 2. **Helper text:** Assistive text to help the user choose the right selection.
 3. **Field:** Persists when the dropdown is open or closed.
-4. **Option:** A choice for the user, shown with other choices in a menu.
-5. **Menu:** A list of options to choose from, displayed as an open state. from.
+4. **Menu:** A list of options to choose from, displayed as an open state.
+5. **Option:** A choice for the user, shown with other choices in a menu.
+6. **Parent checkbox:** Used to select all the options from within the menu in
+   multiselect dropdowns.
 
 ### Styling
 
@@ -354,6 +356,22 @@ style of dropdown you are using.
 - Never use decorative images or icons within a dropdown.
 - We recommend presenting the options in alphabetical order.
 
+#### Parent checkbox
+
+- Since the parent checkbox is one among the options, do not describe it as an
+  action.
+- Use the word “All” to describe this parent checkbox.
+- Alternatively you can add a parent word along with the word All to describe
+  the options in the menu.
+
+<Row>
+<Column colLg={12}>
+
+![Parent checkbox content guidelines.](images/dropdown-usage-16.png)
+
+</Column>
+</Row>
+
 ### Optional versus required fields
 
 All fields in a form are assumed required, and optional fields are tagged. For
@@ -551,6 +569,14 @@ or clicking outside of the menu.
 
 #### Keyboard
 
+A dropdown component and its variants multiselect and combo box are reached by
+`Tab`, with navigation of the options by `Up` and `Down` arrow keys. However,
+the keys for opening the component and selecting its options are different for
+each variant. For more information on keyboard interactions, see the
+[accessibility tab](https://carbondesignsystem.com/components/dropdown/accessibility/?_ga=2.84465055.789214944.1712051588-758524008.1712051588&_gl=1*16jmo7x*_ga*NzU4NTI0MDA4LjE3MTIwNTE1ODg.*_ga_FYECCCS21D*MTcxMjEzODc0OC4zLjEuMTcxMjE0MTQ5OC4wLjAuMA..#what-carbon-provides).
+
+<!--
+
 #### Dropdown:
 
 - The dropdown field is the element that receives focus. All keyboard
@@ -579,6 +605,8 @@ or clicking outside of the menu.
   select or deselect the option.
 - Users can open and close a dropdown menu by pressing `Space`.
 
+-->
+
 ## Dropdown
 
 Use when you can select only one option from a list at a time.
@@ -654,10 +682,14 @@ Use when you can select multiple options from a list or to filter information.
 </Column>
 </Row>
 
+#### Feedback
+
 - Once options have been selected from the menu, a tag appears to the left of
-  the text in the field containing the total number of selected options. The
-  placeholder text can change to text that better reflects what is selected.
-- Selected options shift to the top of the menu in alphanumeric order.
+  the text in the field containing the total number of selected options, and
+  also provides a functionality to clear all the selected options.
+- The placeholder text can change to text that better reflects what is selected.
+- Selected options shift to the top of the menu in an alphanumeric order when
+  revisiting the menu after closing it.
 - Unlike dropdown and combo box, the menu does not close once the user makes
   selections. Because multiple selections are possible, the user needs to click
   outside of the dropdown or on the parent element to close the menu.
@@ -684,7 +716,37 @@ Use when you can select multiple options from a list or to filter information.
 </Column>
 </Row>
 
-#### Clear all
+#### Selecting all
+
+The parent checkbox associated to the parent option makes it possible for the
+user to select all options from the list. Although the parent checkbox element
+is used only for multiselect dropdowns, it is not mandated to be present in all
+multiselect dropdowns.
+
+- The bottom stroke for the parent option has no padding and bleeds to the end
+  of the dropdown menu.
+- The background fill for the all button does not change when selected and will
+  continue to have the same background as the enabled state
+
+The parent checkbox has a third indeterminate state and appears when some and
+not all options have been selected.
+
+- Clicking on the indeterminate state clears all options.
+- Clicking on the unselected checkbox selects all options.
+- Clicking on the selected checkbox clears all options.
+
+We recommend not to use the parent checkbox in scenarios like filters when
+choosing all and choosing none means the same.
+
+<Row>
+<Column colLg={12}>
+
+![Multiselect selecting all and partially.](images/dropdown-usage-17.png)
+
+</Column>
+</Row>
+
+#### Clearing all
 
 To clear all selected options from a list, hover over the filterable tag and
 click the “x” (or `close`) icon next to the value. To help with clarity, a