Merge branch 'main' into carbon-tutorial-web-components

src/data/components.json

@@ -502,6 +502,14 @@
       "testing": {
         "screenreader": "manual"
       }
+    },
+    {
+      "component": "Menu button",
+      "parentComponent": "Menu buttons",
+      "overview": false,
+      "testing": {
+        "screenreader": "manual"
+      }
     }
   ]
 }

src/pages/components/dropdown/accessibility.mdx

@@ -51,9 +51,10 @@ each variant.
 
 #### Dropdown
 
-The default dropdown opens with `Enter`, `Space`, or `Down arrow`, with focus
-moving to the currently selected option. Arrow keys change options, and any
-option with focus is selected with `Space` or `Enter`, which also closes the
+The default dropdown opens with `Enter`, `Space`, or `Down arrow`. If an option
+is already selected or if `Down arrow` is used to open the component, the focus
+moves to the first or currently selected option. Arrow keys change options, and
+any option with focus is selected with `Space` or `Enter`, which also closes the
 dropdown. Pressing `Esc` or `Tab` closes a dropdown without changing the
 selected option.
 
@@ -72,11 +73,14 @@ selected option.
 
 #### Multiselect
 
-The multiselect opens with the `Enter` or `Space` keys, which are also used to
-toggle the selection of any option. Once items are selected, a tag appears in
-the field, showing a numerical representation of the number of items selected
-along with an ‘x’. Pressing `Esc` closes the multiselect. Pressing `Delete`
-while focus is in the collapsed field will clear all selected options.
+The multiselect opens with `Down arrow`, or with the `Enter` or `Space` keys,
+which are also used to toggle the selection of any option. Focus handling is the
+same as with the default dropdown: focus is only moved to the options list if an
+item is already selected or if the multiselect is opened with the `Down arrow`.
+Once items are selected, a tag appears in the field, showing a numerical
+representation of the number of items selected along with an ‘x’. Pressing `Esc`
+closes the multiselect. Pressing `Delete` while focus is in the collapsed field
+will clear all selected options.
 
 <Row>
 <Column colLg={8}>
@@ -93,15 +97,18 @@ while focus is in the collapsed field will clear all selected options.
 
 #### Combo box
 
-The combo box's operation is quite different, since it is a combination of a
-text input and a dropdown. `Enter` or the `Up` or `Down` arrow keys will open
-the list of options, as will typing any character or string of characters (which
-will also filter the list to only show items that match the typed string).
-Pressing `Esc` will clear the input and collapse the list. Pressing `Enter` will
-select a highlighted option and collapse the list. (If nothing is highlighted in
-the list, pressing `Enter` will toggle the combo box open and closed.) `Space`
-cannot be used for selecting, as pressing it will submit a space character into
-the filter string.
+The combo box’s operation (as well as the filterable multiselect's) is quite
+different, since it is a combination of a text input and a dropdown. `Enter` or
+the `Up` or `Down arrow` keys will open the list of options, as will typing any
+matching character or string of characters (which will also filter the list to
+only show items that match the typed string). Focus handling in the options list
+is similar to the default dropdown: focus is only moved to the options list if
+an item is already selected, a matching string is entered, or if opened with an
+arrow key. Pressing `Esc` will collapse the list or clear the typed string.
+Pressing `Enter` will select a highlighted option and collapse the list. (If
+nothing is highlighted in the list, pressing `Enter` will toggle the combo box
+open and closed.) `Space` cannot be used for selecting, as pressing it will
+submit a space character into the filter string.
 
 <Row>
 <Column colLg={8}>

src/pages/components/dropdown/usage.mdx

@@ -865,6 +865,25 @@ boxes are useful when the data populating the list may come from a database.
 </Column>
 </Row>
 
+#### Entering a custom value
+
+In a combo box, users can type in a custom or unique value that is not included
+in the list of predefined options.
+
+- If the desired option isn’t available in the list, users can start typing
+  their custom value directly in the field, filtering out options as they type.
+- To save the new custom value, click outside the field with the mouse or press
+  `Tab` or `Enter` on the keyboard.
+- Once saved, the placeholder text changes to display the custom typed value.
+
+<Row>
+<Column colLg={8}>
+
+![Entering a custom value in a default combo box.](images/dropdown-usage-11d.png)
+
+</Column>
+</Row>
+
 ## Modifiers
 
 #### Inline

src/pages/components/menu-buttons/accessibility.mdx

@@ -208,4 +208,7 @@ custom component.
 - When the combo button menu is open, the element (`div`) wrapping the entire
   combo button is given `aria-owns` with a value of the menu `id`.
 
-<A11yStatus layout="table" components="Menu buttons" />
+<A11yStatus
+  layout="table"
+  components={['Menu button', 'Combo button', 'Overflow menu']}
+/>

src/pages/components/menu-buttons/usage.mdx

@@ -56,7 +56,10 @@ menu with a list of interactive options.
   ]}
 />
 
-<A11yStatus layout="cards" components="Menu buttons" />
+<A11yStatus
+  layout="cards"
+  components={['Menu button', 'Combo button', 'Overflow menu']}
+/>
 
 ## Overview
 

src/pages/components/notification/code.mdx

@@ -6,6 +6,8 @@ description:
 tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 ---
 
+import { Tag } from '@carbon/react';
+
 <PageDescription>
 
 Preview the notification component with the React live demo. For detailed code
@@ -23,6 +25,7 @@ usage documentation, see the Storybooks for each framework below.
     >
 
 <MdxIcon name="react" />
+<Tag type="blue">Feature flag</Tag>
 
   </ResourceCard>
 </Column>
@@ -58,6 +61,21 @@ usage documentation, see the Storybooks for each framework below.
 </Column>
 </Row>
 
+### Feature flags
+
+A [feature flag](/components/overview/feature-flags/) has been added to the
+actionable notification variant to improve accessibility and changes parts of
+its functionality, not its visual appearance. For more code-specific feature
+flag information, refer to the
+[@carbon/react](https://react.carbondesignsystem.com/?path=/docs/components-notifications-actionable-feature-flag--flag-details)
+framework.
+
+The `enable-experimental-focus-wrap-without-sentinels` flag is a new approach to
+focus wrap behavior, modifying the DOM to no longer include hidden "sentinel
+nodes" that previously marked the beginning and end of the wrapped focus. This
+behavior considers all interactive child nodes and wraps focus based on their
+tab order.
+
 ## Live demo
 
 <StorybookDemo

src/pages/components/notification/usage.mdx

@@ -8,9 +8,12 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 ---
 
 import A11yStatus from 'components/A11yStatus';
+import { Tag } from '@carbon/react';
 
 <PageDescription>
 
+<Tag type="blue">Feature flag</Tag>
+
 Notifications are messages that communicate information to the user. The four
 variants of notifications are toast, inline, actionable, and callout.
 
@@ -85,6 +88,16 @@ although some product teams also support banners and notification centers.
 | [Actionable](#actionable) | Actionable notifications allow for interactive elements within a notification styled like an inline or toast notification.                                       |
 | [Callout](#callout)       | Callouts are used to highlight important information that loads with the contents of the page, is placed contextually, and cannot be dismissed.                  |
 
+### Feature flags
+
+A [feature flag](/components/overview/feature-flags/) has been added to the
+actionable notification variant to improve accessibility and changes parts of
+its functionality, not its visual appearance. For code-specific feature flag
+information, refer to the [Code](/components/notification/code/) tab. The
+current actionable notification is not being deprecated, but teams are
+encouraged to use the feature flag notification for their products moving
+forward.
+
 ## Formatting
 
 ### Anatomy