Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Apr 10, 2025

Conversation

pinkeshmars
Copy link
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
Copy link

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
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.

:::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
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
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
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
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
Contributor

Choose a reason for hiding this comment

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

Header?

Copy link
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
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
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
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
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
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