<span class="account-display-name">{@html massagedAccountName }</span> <style> .account-display-name { pointer-events: none; /* allows focus to work correctly, focus on the parent only */ } </style> <script> import { emojifyText } from '../../_utils/emojifyText' import { store } from '../../_store/store' import escapeHtml from 'escape-html' import { removeEmoji } from '../../_utils/removeEmoji' export default { store: () => store, computed: { emojis: ({ account }) => (account.emojis || []), accountName: ({ account }) => (account.display_name || account.username), massagedAccountName: ({ accountName, emojis, $autoplayGifs, $omitEmojiInDisplayNames }) => { accountName = escapeHtml(accountName) if ($omitEmojiInDisplayNames) { // display name emoji are annoying to some screenreader users let emojiFreeDisplayName = removeEmoji(accountName, emojis) if (emojiFreeDisplayName) { return emojiFreeDisplayName } } return emojifyText(accountName, emojis, $autoplayGifs) } } } </script>