The Announced component aims to fill several of the accessibility gaps that exist in various web application experiences. It provides text for the screen reader in certain scenarios that are lacking comprehensive updates, particularly those showing the completion status or progress of operation(s).
Some real-world applications of the component include copying, uploading, or moving many files; deleting or renaming a single file; "lazy loading" of page sections that do not appear all at once; and appearance of search results.
The Announced component currently has the following documented use cases:
Quick Actions: Operations such as editing text or deletion that are short enough that they do not require a status during progress.
Search Results: Appearance of search results such as in contact fields or search boxes.
Lazy Loading: "Lazy loading" of page sections that do not appear all at once.
Bulk Operations: Operations that require multiple sub operations, such as the moving of several files.
For more details and examples visit the official docs. The R package cannot handle each and every case, so for advanced use cases you need to work using the original docs to achieve the desired result.
Arguments
- ...
Props to pass to the component. The allowed props are listed below in the Details section.
Details
"aria-live"
'off' | 'polite' | 'assertive'
Priority with which the screen reader should treat updates to this region @default 'polite'as
React.ElementType
Optionally render the root of this component as another component type or primitive. The custom type must preserve any children or native props passed in. @default 'div'message
string
The status message provided as screen reader outputstyles
IStyleFunctionOrObject<{}, IAnnouncedStyles>
Call to provide customized styling that will layer on top of the variant rules.
Examples
library(shiny)
library(shiny.fluent)
ui <- function(id) {
Announced(message = "Screen reader message")
}
server <- function(id) {
moduleServer(id, function(input, output, session) {})
}
if (interactive()) {
shinyApp(ui("app"), function(input, output) server("app"))
}