Most CMS editors provide a simple way to make a link open a new tab, but adding an icon and an aria tag is likely to require some html coding.
An “opens new tab” icon can be embedded using Font Awesome . An ARIA label requires adding a snippet of html code as shown in the examples below for a text link and a button.
Here's the html code for the text link above with the code for the aria label and the "opens new tab" icon shown in bold: <a href="https://www.w3.org/TR/WCAG20-TECHS/ARIA6.html" target="_blank" rel="noreferrer noopener" aria-label="Learn about ARIA labels. Opens the W3C website in a new tab.">Learn about ARIA labels <i class="fa-solid fa-arrow-up-right-from-square"></i></a>
Here's the html for the button above with the code for the "opens new tab" icon and the ARIA label shown in bold: <div class="wp-block-button is-style-fill"><a class="wp-block-button__link wp-element-button" href="https://www.linkedin.com/in/johnkuefler/" style="border-radius:7px" target="_blank" rel="noreferrer noopener" aria-label="Open my LinkedIn page a new tab">Open My LinkedIn Page <i class="fa-solid fa-arrow-up-right-from-square"></i></a></div>
Font Awesome has built-in accessibility features
The button below uses an envelope icon as a decorative element, which for accessibility can be hidden using an ARIA tag (see code below). This can be achieved automatically via Font Awesome! See this support doc.
<button type="submit">
<span class="fa-solid fa-envelope"></span> Email Us!
</button>