UX updates to inbound token access UI - Follow-up

As stated by @jeldergl in !110781 (merged) we should look into making these UX updates to app/assets/javascripts/token_access/components/inbound_token_access.vue

I think we should address this after we remove the outbound access feature in the UI.

  • Neither the new or existing text input have an associated label. The placeholder content can't be used in place of a label either. This is an accessibility failure. We should replace the use of <strong> with <label> instead.
  • This is not the correct use case for an alert, especially since it uses role="alert" and aria-live="assertive". Proposal: use utility classes to style the content in a similar way, but don't use the alert component.
  • As it relates to the general page structure, it's odd that this section uses h4 and h5, but there are no h1h3 headings.
Edited by Mireya Andres