[UI5] Things that Demo Kit didn’t tell you. <ActionSheet> / [UI5] Dinge, die Demo-Kit Ihnen nicht mitgeteilt hat. <ActionSheet>
For English reader:
Hello I’m Cong, now I’m a developer in Hybris Revenue Cloud in Chengdu, China. This blog is writter in both English and German (for learning purpose). Please just ignore the italic German paragraphsand sorry for the inconvenience. Thanks a lot!
Für Deutsch Leser:
Hallo ich bin Cong. Jetzt bin ich ein Developer bei Hybris Revenue Cloud in Chengdu, China. Ich möchte Programmierkenntnisse hier teilen und gleichzeitig mein Deutsch verbessern. Deshalb schreibe ich Blogs in Deutsch und Enghlish. Wenn Sie Syntaxfehler finden, oder mein Deutsch ist zu schlecht zu verstehen, bitte lesen Sie die English Version und sagen Sie mir den richtigen Ausdruck. Herzlich Dank und ich hoffe, dass Sie meinen Blog genießen. Prost!
For UI5 developers maybe Demo Kit is the most useful tool. We could find many documents as well as samples. But sometimes we still have some questions that Demo Kit could not answer. So I would like to write a blog series called “Things that Demo Kit didn’t tell you“. In this series I would like to explore the controls with some other resources, e.g. source code, Fiori Guideline. Hope this series could help you and if you find any mistakes in my blog please also help to point them out. Thank you! Catalog of this series could be found here.
Vielleicht ist Demo-Kit das sinnvollste Werkzeug für UI5-Developer. Da können wir viele Dokument und Beispiele finden. Aber manchmal gibt es noch einige Frage, die Demo-Kit nicht antwort kann. Deshalb möchte ich eine Blogserie “Dinge, die Demo-Kit Ihnen nicht mitgeteilt hat” schreiben. In diese Serie erforsche ich Controls mit verschiedener Ressource, z.B. Quellcode, Fiori Guideline. Ich hoffe, dass diese Serie sinnvoll für Sie ist. Wenn Sie Fehler in meinem Blog finden, bitte hinweisen Sie mir. Danke schön. Der Katalog dieser Serie ist hier.
About ActionSheet
Über ActionSheet
ActionSheet is a common control for showing a list of actions. Normally it is invisible and user could open it by clicking a button. In a desktop application it is shown as a popup and on a phone it is a dialog.
ActionSheet ist ein üblich Control, wenn man eine Liste von Actions zeigen möchte. Normalerweise ist es unsichtbar. Man kann einen Button klicken um es zu öffnen. ActionSheet ist ein Pop-up in einer Desktopanwendung und ist ein Dialog in einem Handy.
When to use an ActionSheet
Wann benutzt man ActionSheet
In the Fiori Guideline there are some situations, in which we should not use ActionSheet.
- If there is only one action.
- If we want to show a hierarchical menu, we should use MenuButton.
- If there is a default action we should use a split MenuButton.
In Fiori Guideline gibt es einige Situationen, in denen kann man nicht ActionSheet benutzen.
- Wenn es nur eine Action gibt.
- Wenn wir ein hierarchisch Menü zeigen möchten. Benutzen wir MenuButton.
- Wenn es eine Standardaction gibt, benutzen wir Split-MenuButton.
ActionSheet is actually a Popover
Tatsächlich ist ActionSheet ein Popover
In a desktop application we could see an ActionSheet is acutally a sap.m.Popover, which has some buttons as its content. And many operations on ActionSheet are actually on the Popover.
In einer Desktopanwendung ist ein ActionSheet tatsächlich ein sap.m.Popover. Und in dem Popover gibt es einige Buttons als sein Content. Und viele Operationen an ActionSheet sind tatsächlich an Popover.
For me the Accessibility of ActionSheet is not good enough
Für mich ist Accessibility des ActionSheet nicht gut genug
As we know, most of the UI5 elements support Accessibility. So is ActionSheet. We could easily use it with a keyboard. But for me I think it does not support screen reader well. In the following example, the first button is expected to be read as “Accept”, but in fact it’s “one slash six”.
Wie wir wissen, dass die meisten UI5 Elements Accessibility unterstützen. Es ist dasselbe für ActionSheet. Wir können es leicht mit Tastatur benutzen. Aber für mich unterstützt ActionSheet den Bildschirmleser nicht so gut. Im folgenden Beispiel soll der erste Button “Accept” gelesen werden.Aber eigentlish ist es “one slash six”.
We could see in ActionSheet.js it always assign an InvisibleText to a new button to support Accessibility. And in ActionSheetRenderer the text is then set with count of buttons.
Wir können sehen, dass in ActionSheet.js ein InvisibleText wird zu den neuen Button zuordnet, um Accessibility zu erfüllen. Und in ActionSheetRenderer wirt das Text von Anzahl der Buttons bestimmt.
Since it is recommended that “buttons in ActionSheet should always contains a text”, I think to improve the Accessibility it should add the button’s text in the InvisibleText.
Es wird empfohlen, dass Button in einem ActionSheet soll ein Text haben. Ich denke, dass der Text des Button soll in dem InvisibleText hinzufügen, um Accessibility zu verbessern.
