Adding feature flag to Notification (#4357)

Co-authored-by: Alison Joseph <[email protected]>

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