Merge branch 'main' into feature/configuration-files

Author: pinkeshmars

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

@@ -24,7 +24,7 @@ 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.
 
@@ -37,7 +37,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',
@@ -57,20 +57,93 @@ To add a semantic label for any widget, select the widget, move to the propertie
 </div>
 <p></p>
 
-Moreover, to add a semantic label for every widget in your app that has an action trigger `OnTap` or `onLongPress`, you can enable the **Add Warning for Semantic Widgets**. By doing so, you'll get a warning if any widget has an action but doesn't have a semantic label added yet.
-
 :::tip
+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."
+:::
+
+### 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
 
-You can click on the warning item to directly navigate to that widget.
+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 that 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.
+
+:::tip
+You can add a semantic label for every widget in your app that has an action trigger `OnTap` or `onLongPress`, by enabling the **Add Warning for Semantic Widgets**.
+By doing so, you'll get a warning if any widget has an action but doesn't have a semantic label added yet. You can click on the warning item to directly navigate to that widget.
+:::
+
 ![add-warning-for-semantic-widgets.avif](imgs/add-warning-for-semantic-widgets.avif)
 
 After you add semantic labels, enable **TalkBack** on Android or **VoiceOver** on iOS to test how screen readers interact with your app. These screen readers will help you verify that all UI elements are read clearly, descriptions are meaningful, and users can navigate logically without getting lost.
 
 Learn more about [enabling screen reader on your device](https://docs.flutter.dev/ui/accessibility-and-internationalization/accessibility#screen-readers).
 
+## Semantic Announce [Action]
+
+The **Semantic Announce** action lets you notify screen reader users about important UI changes or provide contextual updates. It sends a request to the device’s accessibility service (TalkBack/VoiceOver) to speak the text out loud.
+
+It significantly improves accessibility by allowing screen reader users to receive timely and meaningful feedback. This is especially helpful when visual feedback might be missed or unavailable.
+
+:::tip[possible use cases]
+
+- **Form Submission**: After a user submits a form, you can trigger a screen reader announcement like "Your form has been submitted successfully," giving immediate feedback without requiring visual cues.
+- **Dynamic Content Updates**: When new content is added or changed on the screen—like loading new chat messages or refreshing a feed—you can announce messages like "3 new messages loaded" to ensure screen reader users are aware of the update.
+- **Error or Validation Messages**: If a user enters invalid input, you can announce helpful validation feedback like "Please enter a valid email address".
+
+:::
+
+The Semantic Announce action allows you to trigger screen reader announcements with the following settings:
+
+- **Announcement Text**: The message you want the screen reader to speak aloud (e.g., "Item added to favorites").
+- **Is Text Right to Left**: Set this to True for right-to-left languages like Arabic or Hebrew. It defaults to False, which is appropriate for left-to-right languages like English.
+
+![semantic-announcement.avif](imgs/semantic-announcement.avif)
+
+:::info[Best Practices]
+
+- Long announcements can overwhelm the user. Aim for a concise phrase like "Search complete — 3 results."
+- Too many announcements can confuse or irritate the user. Only announce critical or timely changes that aren’t otherwise discoverable.
+- Use the correct language direction of the message. If your app supports multiple locales, dynamic direction binding can help.
+- Screen reader behavior can vary across Android (TalkBack) and iOS (VoiceOver). Test thoroughly on real hardware to confirm the experience.
+
+:::
+
+## 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, enabling this option ensures that 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.
+
+:::
+
 ## 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.

docs/ff-concepts/localization-accessibility/imgs/semantic-announcement.avif

@@ -126,7 +126,7 @@ To let users log out of your app, you can use the [**Logout**](auth-actions.md#l
       your [Project Credentials](https://console.cloud.google.com/apis/credentials?project=_) page.
 
     2. Ensure you are on the correct project. In our case, we are using the
-      [EcommerceFlow demo project](https://bit.ly/ff-docs-demo-v1), it will be different for you.
+      [EcommerceFlow demo project](https://bit.ly/ff-docs-demo-v2), it will be different for you.
 
     ![credential-page.png](../imgs/credential-page.png)
 

docs/ff-integrations/authentication/firebase-auth/google-login.md

@@ -69,10 +69,7 @@ com/embed/2c644aa950c44f76b19c6787784cf3b5?sid=3e22206e-4b4b-4734-b842-0c644d32f
 
 ## Add Places APIs
 
-To enable **Places API** in your project, please follow the steps under 
-["Add Maps API" section](#add-maps-apis) and additionally also enable Places API from the API 
-library if not 
-already enabled. 
+You can [enable the **Places API**](https://console.cloud.google.com/apis/library/places-backend.googleapis.com) from your Google Cloud Console — make sure you are in the correct Google Cloud project. **Please note** that the current [PlacePicker widget](../../maps/google-maps/place-picker-widget.md) uses the legacy Places API. We plan to update the PlacePicker widget soon to support the new API. In the meantime, ensure that the legacy Places API is enabled for full functionality.
 
 ![places-api.png](imgs/places-api.png)
 

docs/ff-integrations/maps/google-maps/generate-maps-keys.md

@@ -47,7 +47,7 @@ Here's an example from the Demo app:
 
 :::info[Prerequisites]
 - The Place Picker **requires a Google Maps API key**. See how to [**create and add API keys**](generate-maps-keys.md#add-maps-apis) to FlutterFlow.
-- Ensure you have enabled **Places API** from Cloud console. [**Check out the Setup docs.**](generate-maps-keys.md#add-places-apis)
+- Ensure you have enabled the [**Places API**](generate-maps-keys.md#add-places-apis) from Cloud console.
 - Enable **Google Maps Platform Billing** via your Cloud console. Please note: Failing to enable the Google Maps Platform Billing will not show any place in an autocomplete list.
 :::
 <figure>
@@ -98,9 +98,9 @@ If you retain the Text widget, the text will update to the name of the selected
   <figcaption class="centered-caption">The widget properties of Place Picker widget</figcaption>
 </figure>
 
-## Use PlacePicker widget state values
+## Use PlacePicker Values
 
-The values associated with the selected place are stored in a `GooglePlace` custom data type exposed by FlutterFlow. It holds fields such as the selected place's Name, Address, LatLng, City, State, Country, and Zipcode. Users can use these values in any widget, either to directly set them in a Text widget or for further conditional calculations.
+The selected place’s details are stored in a `GooglePlace` custom data type provided by FlutterFlow. You can access this via **Widget State > placePickerValue**, which includes fields like name, address, latitude/longitude (LatLng), city, state, country, and ZIP code. These values can be used to display content in Text widgets or perform conditional logic based on the selected location.
 
 <div style={{
     position: 'relative',
@@ -109,7 +109,7 @@ The values associated with the selected place are stored in a `GooglePlace` cust
     width: '100%'
 }}>
     <iframe 
-        src="https://demo.arcade.software/uWaLSOHPZctjnGik03Pu?embed&show_copy_link=true"
+        src="https://demo.arcade.software/oje0Gsbf9IJh7M0pb6Tv?embed&show_copy_link=true"
         title="Use PlacePicker widget state"
         style={{
             position: 'absolute',
@@ -128,32 +128,4 @@ The values associated with the selected place are stored in a `GooglePlace` cust
     </iframe>
 </div>
 
-<p></p>
-Let's test this change in Test Mode:
-
-<div style={{
-    position: 'relative',
-    paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
-    height: 0,
-    width: '100%'
-}}>
-    <iframe 
-        src="https://demo.arcade.software/2ncapOklwNGM3ETCntdl?embed&show_copy_link=true"
-        title="Place Picker Test"
-        style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: '100%',
-            colorScheme: 'light'
-        }}
-        frameborder="0"
-        loading="lazy"
-        webkitAllowFullScreen
-        mozAllowFullScreen
-        allowFullScreen
-        allow="clipboard-write">
-    </iframe>
-</div>
-
+<p></p>

docs/ff-integrations/maps/google-maps/place-picker-widget.md

@@ -9,7 +9,7 @@ sidebar_position: 5
 Similar to a [**Page**](pages-generated-code.md), when creating a **[component](../resources/ui/components/intro-components.md)** in FlutterFlow, it automatically generates two files: a `Widget` class and a `Model` class. 
 
 :::info[Prerequisites]
-This guide uses examples from the generated code of the **[EcommerceFlow demo app](https://bit.ly/ff-docs-demo-v1)**. To view the generated code directly, check out the **[Github repository](https://github.com/FlutterFlow/sample-apps/tree/main/ecommerce_flow)**.
+This guide uses examples from the generated code of the **[EcommerceFlow demo app](https://bit.ly/ff-docs-demo-v2)**. To view the generated code directly, check out the **[Github repository](https://github.com/FlutterFlow/sample-apps/tree/main/ecommerce_flow)**.
 :::
 
 ## ComponentModel class

docs/generated-code/component-gen-code.md

@@ -7,7 +7,7 @@ sidebar_position: 2
 # DataTypeStruct class
 
 :::info[Prerequisites]
-This guide uses example of the generated code of the **[EcommerceFlow demo app](https://bit.ly/ff-docs-demo-v1)**. To view the generated code directly, check out the **[Github repository](https://github.com/FlutterFlow/sample-apps/tree/main/ecommerce_flow)**.
+This guide uses example of the generated code of the **[EcommerceFlow demo app](https://bit.ly/ff-docs-demo-v2)**. To view the generated code directly, check out the **[Github repository](https://github.com/FlutterFlow/sample-apps/tree/main/ecommerce_flow)**.
 :::
 
 

docs/generated-code/custom-data-type-gen.md

@@ -7,7 +7,7 @@ sidebar_position: 1
 # Directory Structure
 
 :::info[Prerequisites]
-This guide uses example of the generated code of the **[EcommerceFlow demo app](https://bit.ly/ff-docs-demo-v1)**. To view the generated code directly, check out the **[Github repository](https://github.com/FlutterFlow/sample-apps/tree/main/ecommerce_flow)**.
+This guide uses example of the generated code of the **[EcommerceFlow demo app](https://bit.ly/ff-docs-demo-v2)**. To view the generated code directly, check out the **[Github repository](https://github.com/FlutterFlow/sample-apps/tree/main/ecommerce_flow)**.
 :::
 
 When you download the code generated by FlutterFlow, you'll notice many additional files and folders beyond what you see in FlutterFlow's Code Viewer. These files make up the complete project structure, organized according to a specific architecture. Understanding this structure is like having a detailed map, guiding you through the code and making it easier to navigate and customize your FlutterFlow project later. So, let's dive in and explore this directory structure.

docs/generated-code/directory-structure.md

@@ -6,14 +6,14 @@ sidebar_position: 4
 # FFAppState
 
 :::info[Prerequisites]
-This guide uses example of the generated code of the **[EcommerceFlow demo app](https://bit.ly/ff-docs-demo-v1)**. To view the generated code directly, check out the **[Github repository](https://github.com/FlutterFlow/sample-apps/tree/main/ecommerce_flow)**.
+This guide uses example of the generated code of the **[EcommerceFlow demo app](https://bit.ly/ff-docs-demo-v2)**. To view the generated code directly, check out the **[Github repository](https://github.com/FlutterFlow/sample-apps/tree/main/ecommerce_flow)**.
 :::
 
 The `FFAppState` class in FlutterFlow acts as a central hub for managing the application's global state. It's designed as a singleton, meaning there's only one instance of this class throughout the app's lifecycle. This class extends [**ChangeNotifier**](https://api.flutter.dev/flutter/foundation/ChangeNotifier-class.html), allowing widgets to listen and react to state changes.
 
 It includes methods for initializing and updating the app's persisted state and also defines various state variables with corresponding **getters and setters** for manipulating these values.
 
-Here is a basic template of the class, taken from the [**eCommerceFlow demo app**](https://bit.ly/ff-docs-demo-v1)'s generated code:
+Here is a basic template of the class, taken from the [**eCommerceFlow demo app**](https://bit.ly/ff-docs-demo-v2)'s generated code:
 
 ```js
 class FFAppState extends ChangeNotifier {

docs/generated-code/ff-app-state.md

@@ -9,7 +9,7 @@ sidebar_position: 5
 When you create a new Page in FlutterFlow, it automatically generates two files: a `Widget` class and a `Model` class. So if the name of the page you created is called **ProductListPage**, FlutterFlow generation backend will automatically create **ProductListPageWidget** class and **ProductListPageModel** class. 
 
 :::info[Prerequisites]
-This guide uses examples from the generated code of the **[EcommerceFlow demo app](https://bit.ly/ff-docs-demo-v1)**. To view the generated code directly, check out the **[Github repository](https://github.com/FlutterFlow/sample-apps/tree/main/ecommerce_flow)**.
+This guide uses examples from the generated code of the **[EcommerceFlow demo app](https://bit.ly/ff-docs-demo-v2)**. To view the generated code directly, check out the **[Github repository](https://github.com/FlutterFlow/sample-apps/tree/main/ecommerce_flow)**.
 :::
 
 ## PageModel class