Improve screen reader announcements
sap.m.Text empty indicator
sap.m.Text allows developers to show to users when text is empty with a “–” character. Depending on the language the symbol (“–”) may change.
new sap.m.Text({ text: "", emptyIndicatorMode: sap.m.EmptyIndicatorMode.On })
sap.m.Table cell with empty indicator display
You have to set visible
property to false
for all sap.m.Link
and sap.m.Text
control’s instances
that are used inside a sap.m.Table
cell and have empty text
property.
Same should be done for sap.m.ObjectIdentifier
’s instances that have empty title
property.
This will improve the screen reader announcements of sap.m.Table
rows or sap.m.List
items as
all visually empty cells or items will be announced as "empty".
new sap.m.Table({ headerToolbar: new sap.m.OverflowToolbar({ content: [ new sap.m.Title({ text: "Products", level: "H2" }) ] }), columns: [ new sap.m.Column({ header: new sap.m.Text({ text: "Product Name" }) }), new sap.m.Column({ header: new sap.m.Text({ text: "Supplier Name" }) }), new sap.m.Column({ header: new sap.m.Text({ text: "Description" }) }) ], items: [ new sap.m.ColumnListItem({ cells: [ new sap.m.Link({ text: "", href: "", visible: false, tooltip: "Audio/Video Cable Kit - 4m" }), new sap.m.ObjectIdentifier({ title: "Titanium", titleActive: true }), new sap.m.Text({ text: "Quality cables for notebooks and projectors" }) ] }), new sap.m.ColumnListItem({ cells: [ new sap.m.Link({ text: "Blaster Extreme", href: "" }), new sap.m.ObjectIdentifier({ title: "", titleActive: true, visible: false, tooltip: "Speaker Experts" }), new sap.m.Text({ text: "PC multimedia speakers - 10 Watt (Total) - 2-way" }) ] }), new sap.m.ColumnListItem({ cells: [ new sap.m.Link({ text: "Copymaster", href: "" }), new sap.m.ObjectIdentifier({ title: "Alpha Printers", titleActive: true }), new sap.m.Text({ text: "", visible: false, tooltip: "Copymaster" }) ] }) ] })