I am trying to make a business critical SAPUI5 application more accessible using screen readers by adding ARIA labels and landmarks. One issue is that some SAPUI5 elements such as sap.m.Title's without text have been used (abused) for layout purposes. I would like to add the aria-hidden attribute or a SAPUI5 analogue to these Title elements. But I can't figure out how to do this. I would like to change
<Title text="" class="title" />
into
<Title aria-hidden="true" text="" class="title" />
But setting aria-hidden on the Title like this seems to be invalid. How would I go about setting a standard HTML attribute on a SAPUI5 control?
Thank you in advance for your help!
Joshua
How can I set a line break between two controls?
I want to display one by one in vertical manner.
You can use a flex box control: either <VBox> or <HBox>.
<VBox xmlns="sap.m" wrap="Wrap" renderType="Bare">
<!-- ... -->
</VBox>
You don't really use linebreaks but layout controls.
If you want to have an element below another element, put both of them in a vertical layout.
https://sapui5.hana.ondemand.com/explored.html#/entity/sap.ui.layout.VerticalLayout/samples
<l:VerticalLayout>
<Input placeholder="UserID" />
<Input placeholder="Password" type="Password" />
</l:VerticalLayout>
Don't forget to include the namespace: xmlns:l="sap.ui.layout"
You can also nest different layouts: Outer layout is vertical, and each row of the vertical layout can be a horizontal layout where items are placed next to each other.
Edit: This also works in IE9. VBox unfortunately does not work in IE9.
Is it possible to put sap.m.Text or sap.m.Label in an sap.m.OverflowToolbar so that they can be moved into the overflow area? With buttons, it is possible that the shrank view shows three ellipses and the hidden buttons are accessible with the dropdown. If I use label or text, however, the dropdown won't show.
As of v1.52, any control implementing the interface sap.m.IOverflowToolbarContent can be moved into the the overflow area. One of such controls has been the sap.m.Label since v1.54.
sap.m.Label
interfaces: [
// ...
"sap.m.IOverflowToolbarContent"
],
Demo:
https://openui5.hana.ondemand.com/test-resources/sap/m/OverflowToolbar.html
Also the control, to which the label is pointing via the association labelFor, can be moved into the overflow area too if needed.
Release: 1.30
https://github.com/SAP/openui5/blob/master/src/sap.m/src/sap/m/OverflowToolbarAssociativePopoverControls.js
OverflowToolbarAssociativePopoverControls._mSupportedControls = ...
(Button, OverflowToolbarButton, CheckBox, ToggleButton, Select, ComboBox, SearchField, SegmentedButton, Input, DateTimeInput, RadioButton).
So it's not possible to use text or label by default.
You can add a sap.m.Title Object to the sap.m.OverflowToolbar#content.
Within the sap.m.Title is a property called 'text' where you can assign some text.
The sap.m.Title will automatically be shrinked or disappear if it comes to an overflow. Regarding that it is just text without any related action, there is no need to show the sap.m.Title within the overflow popup.
This refers to the SAP Fiori Gudelines.
https://experience.sap.com/fiori-design/ui-components/table-bar/
Section: Behavior&Interaction --> Overflow (Generic)
"Everything else than a button cannot move into the overflow."
I'm new to sapui5 but maybe this code may be useful for you.
<footer>
<OverflowToolbar >
<ToolbarSpacer/>
<Button type="Accept" text="Accept">
<layoutData><OverflowToolbarLayoutData priority="Low" /></layoutData>
</Button>
<Button type="Reject" text="Reject">
<layoutData><OverflowToolbarLayoutData priority="Low" /></layoutData>
</Button>
<Button type="Accept" text="Accept">
<layoutData><OverflowToolbarLayoutData priority="Low" /></layoutData>
</Button>
<Button type="Reject" text="Reject">
<layoutData>
<OverflowToolbarLayoutData priority="Low" />
</layoutData>
</Button>
</OverflowToolbar>
</footer>
So I am using a dock layout panel. In the north I have a title and menubar and center has a table. My problem is when the title gets long and wraps the text, it pushed the menubar down and you can no longer see it. This is because you have to set fixed sizes for all panels except center.
I thought about moving it all to center panel but the problem is that when my table gets big and a scroll bar appears I want to always see the header and menubar even when scrolling on the table. So I cant just put everything in scroll panel.
How can I create a layout that fills these requirements:
1. Always see the title and menubar
2. Scrollable table
3. When the window is resized and text from title wraps it resizes the whole thing correctly.
here is Layout right now:
<g:DockLayoutPanel >
<g:north size="80">
<g:VerticalPanel width="100%">
<g:HorizontalPanel width="100%">
<g:HTML ui:field="title" styleName="{style.title}"></g:HTML>
</g:HorizontalPanel>
<g:HorizontalPanel styleName="{style.infoBar}" width="100%">
<g:MenuBar animationEnabled="true" styleName="{res.css.menuBar}" focusOnHoverEnabled="false" ui:field="menuBar"></g:MenuBar>
</g:HorizontalPanel>
</g:VerticalPanel>
</g:north>
<g:center>
<g:ScrollPanel>
<g:SimplePanel ui:field="content" styleName="{style.content}">Table or tree goes here
</g:SimplePanel>
</g:ScrollPanel>
</g:center>
<g:south size="20">
<g:VerticalPanel styleName="{style.footerPanel}">
<g:HTML ui:field="messageBar">Fotter text here</g:HTML>
</g:VerticalPanel>
</g:south>
</g:DockLayoutPanel>
Have you tried to use two DockLayoutPanel?
The first has the title in the center area and in the south another DockLayoutPanel with the menu in the north area and the table in the center?
If title and menu may be shown underneath each other you can put title and menu in separate north-panels (that actually works).
With that you can at least ensure that the menu gets shown.
I have a Autocomplete textbox which is inside a div with scrolling enabled. I add lots of textboxes dynamically inside the div which enables the vertical scrolling. When I scroll down and type in the auto suggest textbox then it appears waay above the correct location. How can I fix this?
Wrap your autocompleted textbox with a relative positioned div.
<div style="position:relative;">
<asp:TextBox runat="server" ID="myTextBox" Width="300" autocomplete="off" />
</div>