CODEWITHSUNDEEP
htmlcssaccessibilitysapui5uiaccessibility
pass341
pass341

Reputation: 13

Is there a way to manually change Accessibility fields in CSS/HTML to any value?

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:

Names of Accessibility Fields

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):

Example of To-Do Tasks

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

Where Accessibility Fields are being Set

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:

Source Code of To-Do Task Card

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:

CSS Code

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!

Upvotes: -1

Views: 63

Answers (1)

Vincent Decaux
Vincent Decaux

Reputation: 10714

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.

Upvotes: 0

Related Questions