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
Related
I implemented a functionality so that the users of my SAPUI5 application can change between different SAPUI5 themes. Now I would like to place a button in the existing ShellBar of my app to trigger that functionality from there.
Currently I have a fragment with the following code, which I want to make use of within a simple button in the ShellBar. I tried different things like f.ex. calling it via the avaterPressed attribute from the shellbar, but it looks all messed up - I'd be very happy if someone could help me out here - Thanks!
<core:FragmentDefinition
xmlns="sap.m"
xmlns:core="sap.ui.core">
<Menu itemSelected="onSelectTheme" >
<MenuItem text="Choose Theme">
<items>
<MenuItem key="sap_fiori_3" text="Standard Light" />
<MenuItem key="sap_fiori_3_dark" text="Standard Dark" />
<MenuItem key="sap_hcw" text="High Contrast White" />
<MenuItem key="sap_hcb" text="High Contrast Black" />
</items>
</MenuItem>
</Menu>
</core:FragmentDefinition>
It should look like the "Administrator" button in the following example (Instead of "User Settings" there should be my text "Choose Theme" from the fragment shown above: https://sapui5.hana.ondemand.com/sdk/test-resources/sap/tnt/demokit/toolpageapp/webapp/index.html?sap-ui-theme=sap_horizon#/
If you want to keep using the ShellBar, you can implement the press event on the Avatar and use the ActionSheet for your needs.
https://sapui5.hana.ondemand.com/#/entity/sap.m.ActionSheet/sample/sap.m.sample.ActionSheet
The developers from the linked example don't use the SAPUI5 Control ShellBar, but instead they made use of ToolHeader, which you can also implement within the Control ToolPage.
With ToolHeader, you can simply add a Button wherever you'd like and also call the fragment from f.ex. the profile picture button (shown below).
<tnt:ToolHeader>
<Avatar src="..." press="YOUR_FUNCTION_TO_OPEN_FRAGMENT"/>
</tnt:ToolHeader>
in my SAPUI5-application i use breadcrumbs. This feature is quite nice, but on a specific word ("Vertrag") the link to the overriding breadcrumb is collapsed and there's a dropdown-field. By changing the word from "Vertrag" to "Vertrags", the overriding breadcrumb isn't collapsed anymore.
Can you help me, to disaple this dropdown-field?
XML-file containing the breadcrumb:
<FlexBox height="50px" alignItems="Start" justifyContent="Center">
<Breadcrumbs currentLocationText="{i18n>Contract}">
<Link press="onPressBreadcrumb" text="{i18n>Overview}" id="Overview"/>
</Breadcrumbs>
</FlexBox>
OK
Not OK
Thanks.
I think, this must be a issue on calculation width of the flex box. Try to play with margins, pattern or other stuff that affect rendering.
Or try to force for test like this
<FlexBox height="50px" alignItems="Start" justifyContent="Center">
<Breadcrumbs currentLocationText="{i18n>Contract}">
<Link press="onPressBreadcrumb" text="{i18n>Overview}" id="Overview"/>
</Breadcrumbs>
<Label text="AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" />
</FlexBox>
It may be necessary to test it on all popular browsers.
I am using a sap.ui.table.Table control and have added some controls in the 'extension' aggregation. Specifically, I have added a HorizontalLayout that has 2 buttons in it. However, both the buttons show up as left aligned. I tried changing the alignment but nothing seems to get them to show up on the extreme right.
Here is the code snippet:
`<table:Table height="100%" width="100%">
<table:extension>`
<l:HorizontalLayout>
<Button text="Save" />
<Button text="Cancel"/>
</l:HorizontalLayout>
</table:extension>
</table:Table>
A HorizontalLayout will be left-aligned only.
Why not use a MatrixLayout instead with a single cell and set its hALign property to Right?
I'm using Struts2. By default, when using the struts form, the label and the choices are displayed in the same line. How can I do to make the label in a line, and every radio choice in its own line? Is there a way by CSS? I need your help guys. Here it is how my form looks like. Thank you!
<s:form action="resultAction" namespace="/">
<s:radio label="Gender" name="yourGender" list="genders" value="defaultGenderValue" />
<s:submit value="submit" name="submit" />
</s:form>
Which theme are you using as by default struts2 use xHtml theme and which generate certain set of Tables to render the view.
Struts2 use free-marker template to render the HTML for tags and you can customize theme as per your choice or can create you rown theme.
Try with simple theme which will not generate any table or div and will render plain HTML for you are you have all way to apply your custom CSS to change/customize the view.
You can set the theme per page basis on for the whole application for per page basis add the following line in the head section
<s:set name="theme" value="'simple'" scope="page" />
for whole application you can either set in struts.properties file or in struts.xml file though the second one is more preferable.
<constant name="struts.ui.theme" value="simple" />
If you want to play with theme here is the link for same
struts-2-themes
I'm using the ComboBox from the AjaxControlToolkit v4.1.50731. When it displays on the page, the dropdown list renders well below the origin of the control. Unfortunately, I can't post an image due to SO restrictions.
I kept the code to a minimum on the page to avoid any possible conflicts:
<AjaxToolKit:ComboBox ID="ComboBox1" runat="server">
<asp:ListItem Text="Mild" Value="0" />
<asp:ListItem Text="Medium" Value="1" />
<asp:ListItem Text="Hot" Value="2" />
</AjaxToolKit:ComboBox>
Any idea why this is happening or how it can be corrected?
The issue was caused by CSS styling but I couldn't isolate it the exact cause. To resolve the problem, I created a new page with no styling and only the combo box control, calling it "PlainComboBox.aspx". Then I used an iframe tag in the page where I wanted to display the combo box, as seen below:
<iframe src="PlainComboBox.aspx" frameborder="0" height="130" >
<p>Your browser does not support iframes.</p>
</iframe>
This isolated the combo box from any styling issues elsewhere on the page and rendered correctly.