Skip to content

Semantic Focus Configuration, Enterprise Settings, and Semantic Announce Action#315

Merged
pinkeshmars merged 4 commits intomainfrom
feature/semantic-focus-config
Apr 10, 2025
Merged

Semantic Focus Configuration, Enterprise Settings, and Semantic Announce Action#315
pinkeshmars merged 4 commits intomainfrom
feature/semantic-focus-config

Conversation

@pinkeshmars
Copy link
Copy Markdown
Collaborator

@pinkeshmars pinkeshmars commented Apr 8, 2025

Description

Added info for semantic focus configuration, enterprise settings, and semantic action.

Linear ticket and magic word Fixes DEVR-866

Type of change

  • Typo fix
  • New feature
  • Enhancement to current docs
  • Removed outdated references
  • Update assets

@pinkeshmars pinkeshmars requested review from PoojaB26 and eilzo April 8, 2025 11:15
@bolt-new-by-stackblitz
Copy link
Copy Markdown

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@pinkeshmars pinkeshmars changed the title Semantic Focus Configuration and Enterprise Settings Semantic Focus Configuration, Enterprise Settings, and Semantinc Announce Action Apr 8, 2025
@pinkeshmars pinkeshmars changed the title Semantic Focus Configuration, Enterprise Settings, and Semantinc Announce Action Semantic Focus Configuration, Enterprise Settings, and Semantic Announce Action Apr 8, 2025
Copy link
Copy Markdown
Contributor

@eilzo eilzo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome, great work Pinkesh! Couple of tiny nits.

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."
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: button".

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @eilzo Since we follow American English conventions in our docs, punctuation like periods typically goes inside the quotation marks.


- **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.
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"Declares that"

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added.

- **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.
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Header?

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@eilzo we usually keep such things as bullet points because they’re easier to scan and better suited for short, single-purpose definitions. Since all items belong to the same group, using headings would add unnecessary visual clutter.


:::info[Best Practices]

- Long announcements can overwhelm the user. Aim for a concise phrase like "Search complete—3 results."
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

micronit: space before+after '3'

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added, thanks!


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).
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Grammar fix:

For example, if you have a login form with two fields: Email and Password, when you enable...

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated!

@pinkeshmars
Copy link
Copy Markdown
Collaborator Author

@eilzo The review comments are addressed now! Thanks for looking into it.

@pinkeshmars pinkeshmars merged commit b1842dc into main Apr 10, 2025
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants