Wet-boew: Intranet: No role allowed on summary element

[szet0018]

https://cenw-wscoe.github.io/sgdc-cdts/GCIntranet/samples/content-en.html

Intranet Theme mobile view menu throws aXe errors on summary

ARIA role must be appropriate for the element

• Ensures role attribute has an appropriate value for the element
• The summary element has role="menuitem", but no roles are allowed on summary

Element location
li:nth-child(1) > details > summary
li:nth-child(2) > details > summary
li:nth-child(3) > details > summary
li:nth-child(4) > details > summary
li:nth-child(5) > details > summary

Element source
<summary class="mb-item" role="menuitem" aria-setsize="5" aria-posinset="1" aria-haspopup="true" tabindex="0">News</summary>

Possible Solution

• Remove role="menuitem" on summary
• Add role="menuitem" on the li element instead

Example Code
<ul class="list-unstyled mb-menu" role="menu">
<li role="menuitem"><details><summary class="mb-item" aria-setsize="5" aria-posinset="1" aria-haspopup="true" tabindex="0">News</summary>

[joejoseph00]

Here is a workaround to this that works for us. added this bit of javascript to our attach function, the click event gets initialized only once according to our logic, we make sure it is only initialized once.

+    $('#wb-glb-mn a.overlay-lnk').click(function(e) {
+      removeRoleFromSummary();  // WCAG fix see : https://github.com/wet-boew/GCWeb/issues/1716
+    });


+  function removeRoleFromSummary() {
+    // WCAG fix see : https://github.com/wet-boew/GCWeb/issues/1716
+    var hrefElements = $('summary.mb-item[role]').each(function(index, element) {
+      var role = $(this).attr('role');
+      $(this).removeAttr('role');
+      $(this).parent().find('li').each(function(idx,el) {
+        $(el).attr('role', 'menuitem');
+      });
+      $(this).closest('li').attr('role', 'menuitem');
+    });
+  }
+

[EricDunsworth]

@GormFrank @duboisp Should this issue be moved into wet-boew/wet-boew?

Btw the labels should probably also be adjusted. What was described in the OP doesn't have anything to do with the details/summary polyfill. The issues in question seem to be caused by WET's menu plugin (which GCWeb no longer uses).

[GormFrank]

@GormFrank @duboisp Should this issue be moved into wet-boew/wet-boew?

Btw the labels should probably also be adjusted. What was described in the OP doesn't have anything to do with the details/summary polyfill. The issues in question seem to be caused by WET's menu plugin (which GCWeb no longer uses).

I added the Details/Summary - Polyfill label because a details/summary element was mentioned but there is no other label available than the polyfill one for this.

[EricDunsworth]

but there is no other label available than the polyfill one for this.

@GormFrank What about "Feature - Menu: Plugin"?

Yes that too, but as you pointed out this issue will be moved to WET-BOEW.

[EricDunsworth]

@GormFrank Mind if I go ahead and move it + adjust its labels?

Btw it'd be better to reply rather than edit your responses into my comments lol. Was wondering why it looked like I was talking to myself in that last comment until I saw it had been edited heh.

[GormFrank]

I'll do it. I didn't even notice that's what I did. I think I was trying out the mobile app version of GitHub and thought I was doing a quote reply.