Jared Ledbetter
Background:
When using the Icon widget, we have no control over how the selectors are used.
Using the code screenshot provided, we have the
<div>
with an
id
of
icon-star-full-1
. This is me using the widget's built-in advanced section where you can set the ID of your widget. You can clearly see that our ID is on the
div
that is two levels up the DOM from the SVG.
However, on the SVG element itself, we have an ID of
icon-star-full
that is automatically added. Since this can't be modified from the BD editor, we will have to scrap the entire Icon widget usage and switch to an HTML code block instead.
Problem:
Having the
icon-star-full
be placed on the ID now creates a situation where we have duplicate IDs on the page. Which is an accessibility error, as depicted in the screenshot attached.
Recreate:
In this example, we used the Icon widget, found the star (icon-star-full), and duplicated it several times until we had a total of 5 stars.
Request:
Can the selector be changed from an ID to a class? This would at least remove the duplicate ID problems, so we aren't flagging errors there. It would also be the least amount of impact to the existing codebase.