I'm building an HTML card for a customer and they were wondering if it was possible to manually adjust Accessibility fields within that card, specifically these:

They wanted to change the value of "Name" dynamically to the name of the Task that it is linking to and the value of "Role" to "link" instead of gridcell. Here is what the Tasks look like (there can be a dynamic number of them as well, in this case two):

I looked into the Editor and found that these fields are being set here:

However with all the approaches I have tried I am unable to adjust them to the values required.

Is there a way to adjust these fields to any values?

Additionally, I am using SAPUI5 to build this, so it's a little tricky to manually override values. The source code which builds this card and populates those tasks looks something like this:

Since SAP BAS automatically adds a bunch of wrappers when compiling this code, most of my solutions to manually changing specific CSS components look something like this:

However if someone could just point me in the right direction in terms of whether or not it's even possible to adjust these fields or show how it's done in vanilla CSS/HTML I should have no issue reengineering it to work for SAPUI5.

Thank you!

I'm building an HTML card for a customer and they were wondering if it was possible to manually adjust Accessibility fields within that card, specifically these:

They wanted to change the value of "Name" dynamically to the name of the Task that it is linking to and the value of "Role" to "link" instead of gridcell. Here is what the Tasks look like (there can be a dynamic number of them as well, in this case two):

I looked into the Editor and found that these fields are being set here:

However with all the approaches I have tried I am unable to adjust them to the values required.

Is there a way to adjust these fields to any values?

Additionally, I am using SAPUI5 to build this, so it's a little tricky to manually override values. The source code which builds this card and populates those tasks looks something like this:

Since SAP BAS automatically adds a bunch of wrappers when compiling this code, most of my solutions to manually changing specific CSS components look something like this:

However if someone could just point me in the right direction in terms of whether or not it's even possible to adjust these fields or show how it's done in vanilla CSS/HTML I should have no issue reengineering it to work for SAPUI5.

Thank you!

• html
• css
• accessibility
• sapui5
• uiaccessibility

Share Improve this question Follow asked Nov 19, 2024 at 15:52 pass341pass341 1344 bronze badges 3

• Do you use any JS code to add the source for your ColumnListItem component ? Or just XML ? Can you please code as code, not as image – Vincent Decaux Commented Nov 19, 2024 at 16:59
• @VincentDecaux I use JS to process link click requests and to format some of the data, but no JS is used to style components. It's populated via XML via a JSON that's grabbed via a query in the JS file. I don't mind posting the code but my question is really just regarding whether or not it's possible to adjust these Accessibility fields in general and how so, even in vanilla CSS/HTML. – pass341 Commented Nov 19, 2024 at 17:28
• you can set any attribute of element using elem.setAttribute('aria-label', 'something') – IT goldman Commented Nov 19, 2024 at 18:18

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I consider you have a Controller attached to your component, you can customise the Icon using JS to add the aria-label you want:

var TableController = Controller.extend("sap.m.sample.TableTest.applicationUnderTest.view.Table", {

    onInit: function () {
        var oModel = new JSONModel();
        var oTable = this.byId("todoTable");
        // this example populates table with JSON, adapt to your code
        jQuery.getJSON("todo.json", function (oResponse) {
            oModel.setData({
                "TodoCollection": oResponse
            });
            oTable.attachEventOnce("updateFinished", function () {
                oTable.getItems().forEach(function (oItem) {
                    if (oItem.getType() === "Navigation") {
                        var $navIcon = oItem.$().find(".sapUiIcon");
                        if ($navIcon.length) {
                            // adapt to what column text you need
                            var todoEntryName = oItem.$().find("td:nth-child(1)").text();
                            $navIcon.attr("aria-label", todoEntryName);
                        }
                    }
                });
            });
        });
        this.getView().setModel(oModel);
        
    },

Other point, you can update the aria-label of the row, since you can still click on the row to access your event, you can do it in XML directly:

        <ColumnListItem type="Navigation" press="visitTask">
           <customData>
                <core:CustomData
                    key="aria-label"
                    value="{todoModel>todoEntryName}"
                    writeToDom="true" />
            </customData>

You can't customise the Row icon in XML, you need to use JS. But it should works.