Alt Text Form: Fixed background images don't pass checks.

[mbusch3]

There are a LOT of rules that get mapped to the Alt Text form. Here's what we currently have in the Ufixit.js file:

  // Equal Access Rules
  aria_graphic_labelled: formNames.ALT_TEXT,
  aria_img_labelled: formNames.ALT_TEXT,
  canvas_content_described: formNames.ALT_TEXT,
  imagebutton_alt_exists: formNames.ALT_TEXT,
  imagemap_alt_exists: formNames.ALT_TEXT,
  img_alt_background: formNames.ALT_TEXT,
  img_alt_decorative: formNames.ALT_TEXT,
  img_alt_misuse: formNames.ALT_TEXT,
  img_alt_null: formNames.ALT_TEXT,
  img_alt_redundant: formNames.ALT_TEXT,
  img_alt_valid: formNames.ALT_TEXT,
  img_ismap_misuse: formNames.ALT_TEXT,
  style_background_decorative: formNames.ALT_TEXT,

The issue I'm having is that the style_background_decorative test from the IBM Equal Access Scanner is pretty naive. Essentially if ANY element has a style attribute with a background: key that has a url anywhere in it, it fails. It doesn't check for empty alt text or a role="presentation" attribute.

Best solution I can see is that if the element is changed in UDOIT, we also add the udoit-ignore-... class so this issue doesn't pop up again and again forever.

To Reproduce:
Create a page with an element something like this:

<div
  style="width: 60%; background: right/cover url('https://reach.ucf.edu/images/templates/right-ribbon-grey.png') no-repeat; flex: 1; padding: 3% 0 3% 20%;">
<h3>Header</h3>
<p>Content...</p>
</div>

Scan. Fix in any way you want. When I marked it as decorative, UDOIT turned it into this (spacing added):

<div
  style="width: 60%; background: right/cover url('https://reach.ucf.edu/images/templates/right-ribbon-grey.png') no-repeat; flex: 1; padding: 3% 0 3% 20%;"
  role="presentation"
  alt=""
  title="">
<h3>Header</h3>
<p>Content...</p>
</div>

But it still triggered the scanner.