Banner · an alert or status role named by its message, so screen readers hear it
This commit is contained in:
1 file changed
+8
-1
@@ -2,7 +2,7 @@ use std::rc::Rc;
|
|||||||
|
|
||||||
use gpui::{
|
use gpui::{
|
||||||
Animation, AnimationExt, AnyElement, App, Div, ElementId, FontWeight, IntoElement,
|
Animation, AnimationExt, AnyElement, App, Div, ElementId, FontWeight, IntoElement,
|
||||||
ParentElement, RenderOnce, SharedString, Styled, Window, div, prelude::*,
|
ParentElement, RenderOnce, Role, SharedString, Styled, Window, div, prelude::*,
|
||||||
};
|
};
|
||||||
use smallvec::SmallVec;
|
use smallvec::SmallVec;
|
||||||
|
|
||||||
@@ -159,8 +159,15 @@ impl RenderOnce for Banner {
|
|||||||
let theme = cx.theme();
|
let theme = cx.theme();
|
||||||
let colors = &theme.colors;
|
let colors = &theme.colors;
|
||||||
let (link, close) = ((self.id.clone(), "action"), (self.id.clone(), "dismiss"));
|
let (link, close) = ((self.id.clone(), "action"), (self.id.clone(), "dismiss"));
|
||||||
|
// Assistive tech reads the message; danger interrupts.
|
||||||
|
let role = match self.severity {
|
||||||
|
Severity::Danger | Severity::Warning => Role::Alert,
|
||||||
|
Severity::Info | Severity::Success => Role::Status,
|
||||||
|
};
|
||||||
div()
|
div()
|
||||||
.id(self.id)
|
.id(self.id)
|
||||||
|
.role(role)
|
||||||
|
.aria_label(self.message.clone())
|
||||||
.relative()
|
.relative()
|
||||||
.flex()
|
.flex()
|
||||||
.items_center()
|
.items_center()
|
||||||
|
|||||||
Reference in new issue
Block a user