有没有办法手动将 CSS/HTML 中的辅助功能字段更改为任何值？

Question

我正在为客户构建 HTML 卡，他们想知道是否可以手动调整该卡中的辅助功能字段，特别是这些：

他们希望将“名称”的值动态更改为其链接到的任务的名称，并将“角色”的值更改为“链接”而不是网格单元。以下是任务的样子（任务的数量也可以是动态的，在本例中为两个）：

我查看了编辑器，发现这些字段在这里设置：

但是，通过我尝试过的所有方法，我无法将它们调整为所需的值。

有没有办法将这些字段调整为任意值？

此外，我使用 SAPUI5 来构建它，因此手动覆盖值有点棘手。构建这张卡并填充这些任务的源代码看起来像这样：

由于 SAP BAS 在编译此代码时会自动添加一堆包装器，因此我的大多数手动更改特定 CSS 组件的解决方案如下所示：

但是，如果有人能够为我指明是否可以调整这些字段或显示如何在普通 CSS/HTML 中完成的正确方向，我应该可以毫无问题地重新设计它以适用于 SAPUI5。

谢谢！

Answer 1

我认为你的组件附加了一个控制器，你可以使用JS自定义图标来添加你想要的aria标签：

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);
        
    },

另一点，您可以更新该行的 aria-label，因为您仍然可以单击该行来访问您的事件，您可以直接在 XML 中执行此操作：

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

无法在XML中自定义Row图标，需要使用JS。但它应该有效。