Change the way the + before the Add Content link is presented on admin/content so that NVDA on Firefox doesn't bury the link

There's already an issue for this, I think.

This was discussed in #bugsmash by myself and mstrelan to decided where to move it. They think this issue is still valid and exists in D10 themes. They suggested moving it to Claro and then once it was fixed the fix could be applied to starter kit. Therefor I am moving the issue.

Sounds like SC 3.2.3 to me.

I have removed the + text from before, and have added a plus icon as background-image.
I have provided the patch, Please review.

I have applied #13 patch, Removed + text from before and added a plus icon as background image, its working properly attached screenshots,

I checked Olivero and confirmed that it does not have the + on Add Content and similar action buttons:

Claro has an entire API function for adding icons to action links: _claro_convert_link_to_action_link()

It also already has SVGs for plus signs.

From action-link.pcss.css:

/* Plus */
.action-link--icon-plus::before {
  content: "";
  background-image: url(../../images/icons/545560/plus.svg);
}

.action-link--icon-plus:hover::before {
  background-image: url(../../images/icons/0036b1/plus.svg);
}
.action-link--icon-plus:active::before {
  background-image: url(../../images/icons/002e9a/plus.svg);
}

Maybe we should be using that instead of adding a new SVG file? Maybe all that's needed is to remove the default ::before and/or expand the appropriate classes/styling to the default action button styling?

Tagging for Claro subsystem maintainer review to validate the approach.

I am using the same icon, but in different color. Currently the plus svg color in .action-link--icon-plus is #545560. That was causing accessibility issue on #003ecc background color. That's why I created copy of above icon for #fff white color.

First, thanks all for the work here!
As @xjm mentions, there is an API to add icons in Claro shared across components that use icons. You can read the documentation on the file button.pcss.css:

Base button styles.
These styles have been duplicated to dropbutton.css and action-links.css since those components inherits most of these design elements. Whenever making changes to this file, remember to check if that needs to be applied to dropbutton.css or action-links.css as well.

So the strategy to change how icons are added can't be changed only for this single button, isolated from the rest of the components.

For what I understand from the issue summary, the main issue was using the "+" directly and not the ::before element itself. From the suggested solutions, this has gone with a combination of 1 (remove ::before entirely) and 2 (replace with a background image). I'd recommend going just with the suggestion from 2, since it's enough to solve the accessibility problem and will keep using the same strategy as the rest of elements using icons.

Also, using the same icon as action links is the best option for now so we can reuse icons. Just remember to verify the icon respects the sizing defined for Medium button sizes in https://www.figma.com/file/OqWgzAluHtsOd5uwm1lubFeH/%F0%9F%92%A7-Drupal-....