Remove aria-controls from Masodon share button to avoid Axe ambiguity

Author: webstackdev

axe-results-incomplete.json

@@ -1,74 +1,4 @@
 [
-  {
-    "id": "aria-prohibited-attr",
-    "impact": "serious",
-    "tags": [
-      "cat.aria",
-      "wcag2a",
-      "wcag412",
-      "EN-301-549",
-      "EN-9.4.1.2",
-      "RGAAv4",
-      "RGAA-7.1.1"
-    ],
-    "description": "Ensure ARIA attributes are not prohibited for an element's role",
-    "help": "Elements must only use permitted ARIA attributes",
-    "helpUrl": "https://dequeuniversity.com/rules/axe/4.11/aria-prohibited-attr?application=playwright",
-    "nodes": [
-      {
-        "any": [],
-        "all": [],
-        "none": [
-          {
-            "id": "aria-prohibited-attr",
-            "data": {
-              "role": null,
-              "nodeName": "highlighter-element",
-              "messageKey": "noRoleSingular",
-              "prohibited": [
-                "aria-label"
-              ]
-            },
-            "relatedNodes": [],
-            "impact": "serious",
-            "message": "aria-label attribute is not well supported on a highlighter-element with no valid role attribute."
-          }
-        ],
-        "impact": "serious",
-        "html": "<highlighter-element aria-label=\"Share this insight\">",
-        "target": [
-          "highlighter-element"
-        ],
-        "failureSummary": "Fix all of the following:\n  aria-label attribute is not well supported on a highlighter-element with no valid role attribute."
-      },
-      {
-        "any": [],
-        "all": [],
-        "none": [
-          {
-            "id": "aria-prohibited-attr",
-            "data": {
-              "role": null,
-              "nodeName": "section",
-              "messageKey": "noRoleSingular",
-              "prohibited": [
-                "aria-labelledby"
-              ]
-            },
-            "relatedNodes": [],
-            "impact": "serious",
-            "message": "aria-labelledby attribute is not well supported on a section with no valid role attribute."
-          }
-        ],
-        "impact": "serious",
-        "html": "<section aria-labelledby=\"article-share-title\">",
-        "target": [
-          "section[aria-labelledby=\"article-share-title\"]"
-        ],
-        "failureSummary": "Fix all of the following:\n  aria-labelledby attribute is not well supported on a section with no valid role attribute."
-      }
-    ]
-  },
   {
     "id": "aria-valid-attr-value",
     "impact": "critical",
@@ -107,28 +37,6 @@
         ],
         "failureSummary": "Fix all of the following:\n  Unable to determine if aria-controls referenced ID exists on the page while using aria-haspopup: aria-controls=\"mastodon-modal\""
       },
-      {
-        "any": [],
-        "all": [
-          {
-            "id": "aria-valid-attr-value",
-            "data": {
-              "messageKey": "noIdShadow",
-              "needsReview": "aria-labelledby=\"article-share-title\""
-            },
-            "relatedNodes": [],
-            "impact": "critical",
-            "message": "ARIA attribute element ID does not exist on the page or is a descendant of a different shadow DOM tree: aria-labelledby=\"article-share-title\""
-          }
-        ],
-        "none": [],
-        "impact": "critical",
-        "html": "<section aria-labelledby=\"article-share-title\">",
-        "target": [
-          "section[aria-labelledby=\"article-share-title\"]"
-        ],
-        "failureSummary": "Fix all of the following:\n  ARIA attribute element ID does not exist on the page or is a descendant of a different shadow DOM tree: aria-labelledby=\"article-share-title\""
-      },
       {
         "any": [],
         "all": [

src/components/Social/Shares/client/__tests__/index.spec.ts

@@ -164,7 +164,7 @@ describe('SocialShareElement web component', () => {
       expect(mastodonButton).toBeTruthy()
 
       expect(mastodonButton?.getAttribute('aria-haspopup')).toBe('dialog')
-      expect(mastodonButton?.getAttribute('aria-controls')).toBe('mastodon-modal')
+      expect(mastodonButton?.getAttribute('aria-controls')).toBeNull()
 
       mastodonButton?.dispatchEvent(
         new window.MouseEvent('click', { bubbles: true, cancelable: true })

src/components/Social/Shares/client/index.ts

@@ -11,8 +11,6 @@ import { queryMetaDescription, querySocialShareIconMarkup } from './selectors'
 
 const COMPONENT_TAG_NAME = 'social-share-element'
 const DEFAULT_NETWORKS = 'x,linkedin,bluesky,reddit,mastodon'
-const MASTODON_MODAL_ID = 'mastodon-modal'
-
 export class SocialShareElement extends LitElement {
   static registeredName = COMPONENT_TAG_NAME
 
@@ -118,7 +116,6 @@ export class SocialShareElement extends LitElement {
           class="${buttonClassList}"
           aria-label="${platform.ariaLabel}"
           aria-haspopup=${ifDefined(isMastodon ? 'dialog' : undefined)}
-          aria-controls=${ifDefined(isMastodon ? MASTODON_MODAL_ID : undefined)}
           data-platform="${platform.id}"
           data-share="${platform.id}"
           data-share-text="${shareText}"