mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-02-24 12:21:22 -05:00
The current link button for removing an area is created using a psuedo element with an 'x' as content. The inline box for the 'x' overlapped its parent. This is visible in high contrast mode, breaking the parent's border. Despite existing in CSS, the 'x' is also announced by screen readers, which is not what we want. This changes it to be an inline SVG with a role of image. It doesn't require as large an inline box so doesn't cause visual issues in high contrast modes. It also means we can set it's label similar to how you would an image's alt text, giving us control over what is announced by screen readers. This commit also includes some extra CSS, targeting high contrast modes, giving the link button the following when viewed in those modes: - a complete border so it is distinguishable from the list item - a focus style