Semantic Focus Configuration and Enterprise Settings

Author: pinkeshmars

docs/ff-concepts/localization-accessibility/accessibility.md

@@ -24,10 +24,12 @@ Here are some key accessibility features you can use:
 
 ## Semantic Label
 
-You can use **Semantic Labels** to provide custom descriptions, hints, or to emphasize the importance of specific parts of the widget tree. This ensures that screen reader users receive clear and meaningful information about each widget more effectively.
+**Semantic Labels** enhance your app’s accessibility and SEO by providing meaningful context about widgets for screen readers and search engines. These descriptions are especially helpful for users relying on assistive technologies.
 
 For example, in an e-commerce app, you can add a semantic label to an '*Add to Bag*' button with a message like '*Add the selected item to cart*', which helps users better understand the button's action.
 
+You can also dynamically set semantic labels using variables or expressions. This allows the label to change based on the app context, so screen readers announce exactly what’s on the screen instead of generic terms like "image" or "button." For example, a product image can read out the product name (e.g., "Red Running Shoes" pulled from Firestore) instead of just saying "image."
+
 To add a semantic label for any widget, select the widget, move to the properties panel (right side), tap the document icon inside the **Accessibility & Semantic Label** section, add the message, and click **Save**.
 
 
@@ -37,7 +39,7 @@ To add a semantic label for any widget, select the widget, move to the propertie
     height: 0,
     width: '100%'}}>
     <iframe 
-        src="https://demo.arcade.software/m6KHHlhnbq0NJxHqWH88?embed&show_copy_link=true"
+        src="https://demo.arcade.software/B3acoMrirCvsKl69tLH6?embed&show_copy_link=true"
         title=""
         style={{
             position: 'absolute',
@@ -71,6 +73,48 @@ After you add semantic labels, enable **TalkBack** on Android or **VoiceOver** o
 
 Learn more about [enabling screen reader on your device](https://docs.flutter.dev/ui/accessibility-and-internationalization/accessibility#screen-readers).
 
+### Focus Configuration
+
+**Focus Configuration** helps improve keyboard and remote-control navigation in your app—especially important for web, desktop, TV, and kiosk apps. It controls how users move through widgets using the <kbd>Tab</kbd> key or other navigation inputs (like arrow keys or D-pad on TV or remote).
+
+You can control the Focus Configuration using the following properties: 
+
+- **Wrap in Focus Traversal Group**: It places a widget (and all its children) in a dedicated group so focus cycles within that region before moving on. For example, if you have a login form with two fields: Email and Password. When you enable this option in the login form, pressing <kbd>Tab</kbd> will cycle only between them (and not jump to unrelated parts of the screen).
+- **Focus Traversal Order**: This sets the exact sequence in which widgets receive focus using numeric values (e.g., 1, 2, etc.). For example, In a sign‑up form, set `Name = 1`, `Email = 2`, and `Password = 3` so pressing <kbd>Tab</kbd> moves logically down the form rather than following the raw widget tree.
+
+Using both the properties you can create structured keyboard navigation for any complex layouts. 
+
+:::warning
+
+While you can assign a value for the **Focus Traversal Order** of any widget, it won’t take effect unless you enable **Wrap in Focus Traversal Group** on the current widget or one of its parent widgets.
+
+The **Focus Traversal Group** defines a context or scope for focus traversal, and **Focus Traversal Order** only applies within that group. Without it, there's no defined order for the traversal logic to follow.
+
+:::
+
+### Advanced Semantic Settings (Enterprise Only)
+
+These settings help make your app more accessible by giving you better control over how screen readers interpret and describe your UI. 
+
+:::info
+
+These settings are only available to **Enterprise** users.
+
+:::
+
+Here’s what each option does:
+
+- **Is Container**: Indicates the widget acts as a grouping for other semantic widgets.
+- **Is Image**: Tells screen readers the widget represents an image.
+- **Is Button**: Declares the widget behaves like a button.
+- **Is Header**: Identifies a widget as a heading for better navigation.
+- **Explicit Child Nodes**: Forces semantics to include all child nodes, even if normally ignored.
+- **Exclude Semantics**: Prevents screen readers from announcing this widget.
+- **Is Live Region**: Tells assistive tech that the widget’s content may change dynamically and should be re-announced.
+- **Hint Text**: Provides an additional hint for users (e.g., "Double tap to open").
+- **Tooltip Text**: Displays helpful text on long press or hover.
+- **Ordinal Sort Key**: Controls the order in which widgets are accessed by screen readers.
+
 ## Keyboard Navigation
 
 You can use the [On Shortcut Press](../../resources/ui/pages/page-lifecycle.md#on-shortcut-press-action-trigger) action trigger to bind keyboard shortcuts to specific actions. This makes it easier for users with disabilities to navigate your app, especially in web and desktop environments.