[axe] Emoji inserter popup has nested components

XMLWordPrintable

    If you search `#confluence-insert-emoticon > span > button` while in the editor and the Insert emoji popup is open, you'll find the following element.

    Interactive controls (e.g. buttons - see here for more) must not have focusable descendants (e.g. buttons, form controls, links - focus docs)

    Here we have a button which has a button child. Also the button child has a link.

    Helpful docs: https://accessibilityinsights.io/info-examples/web/nested-interactive/

    The nested components should not be nested.

    Consider case when aria-expanded=false as well.

    Element:

    <button aria-expanded="true" aria-haspopup="true" aria-label="Insert emoji" class="css-1srh7hy" data-testid="confluence-emoticon-popup-trigger-button" type="button" tabindex="-1"><span class="css-19r5em7"><span...</button>
    

          Assignee:
          Unassigned
          Reporter:
          Diclehan Erdal
          Votes:
          0 Vote for this issue
          Watchers:
          2 Start watching this issue

            Created:
            Updated: