Remove aria-readonly property from a subgrid table in a Power Pages form

(0) Share

Report

Posted on by NaivePowerApper Microsoft Employee

I used the MSFT 'Accessibility Insights for Web' browser extension to check my power Pages site for accessibility issues.

It flagged multiple instances of 'ARIA attribute is not allowed: '. Apparently having the aria-readonly attribute in a table element is an accessibility issue. Power Pages adds this property by default.

For standard tables I was able to resolve the issue by adding the following Javascript to the power pages list:

$(document).ready(function (){

$(".entitylist.entity-grid").on("loaded", function () {

$(this).children(".view-grid").find("[aria-readonly]").each(function (){

$(this).removeAttr("aria-readonly");

});

});

});

However, I have a form that includes a subgrid. This approach doesn't work for the form subgrid.

Any suggestions?

Categories:

Customize & extend

I have the same question (0)

All responses (2)

Answers (0)

Lucas001 2,434 Super User 2025 Season 2 on at

Like (0)

Report

Hi @NaivePowerApper,

could you post the HTML Structure here?

Was this reply helpful? Yes No
Suggested answer

NaivePowerApper Microsoft Employee on at

Like (1)

Report

I was eventually able to resolve the issue through multiple rounds of copilot consultation.

Added this javascript to the page that contains the form that contains the subgrid:

document.addEventListener("DOMContentLoaded", function () {

// Wait a bit to ensure the subgrid is rendered

setTimeout(function () {

// Select the subgrid by ID (adjust selector if needed)

const subgrid = document.querySelector("#Ticket_Partner_Attachment_Subgrid");

if (subgrid) {

// Remove aria-readonly from all elements within the subgrid

subgrid.querySelectorAll("[aria-readonly]").forEach(function (el) {

el.removeAttribute("aria-readonly");

});

console.log("aria-readonly removed");

} else {

console.log("Subgrid not found.");

}

}, 2000); // Adjust delay as needed

});

Was this reply helpful? Yes No