aria-labelledby and aria-controls are referencing IDs that do not exist

Description

The Verified Certificate upgrade message on the Course page is referencing the title of the message by ID, but the title doesn't have an ID attribute (it does have a class by that name, but that doesn't work, it needs to be an IDref)

This:

1 2 3 <div class="vc-message tex2jax_ignore" role="group" aria-labelledby="vc-title" tabindex="-1" style="height: auto;"> <h3 class="vc-title vc-fade vc-polite-only" style="display: block;">Pursue a verified certificate</h3> [...]

Should be:

1 2 3 <div class="vc-message tex2jax_ignore" role="group" aria-labelledby="vc-title" tabindex="-1" style="height: auto;"> <h3 id="vc-title" class="vc-title vc-fade vc-polite-only" style="display: block;">Pursue a verified certificate</h3> [...]

The Show/Hide button also has an aria-controls attribute that is referencing a non-existent ID ("moreinfo")
We need to create a new div that encompasses the elements that are being "show/hide"ed and put an ID on it with the value of "moreinfo"

Like this:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <button class="vc-toggle vc-fade vc-polite-only btn-link" type="button" aria-controls="moreinfo" aria-expanded="true" aria-label="Show/Hide" style="display: block;">Show less</button> <div id="moreinfo"> <!-- add this --> <div class="vc-hero vc-fade" style=""> <img src="https://prod-edxapp.edx-cdn.org/static/course_experience/images/verified-cert.891c55cad756.png" alt="Sample verified certificate with your name, the course title, the logo of the institution and the signatures of the instructors for this course."> </div> <ul class="vc-selling-points vc-fade" style=""> <li class="vc-selling-point">Official proof of completion</li> <li class="vc-selling-point">Easily shareable certificate</li> <li class="vc-selling-point">Proven motivator to complete the course</li> <li class="vc-selling-point">Certificate purchases help us continue to offer free courses</li> </ul> <div class="vc-cta vc-fade vc-polite-only" style="display: block;"> <a class="btn btn-upgrade" href="https://ecommerce.edx.org/basket/add/?sku=FCA6AB0" data-creative="hero_matthew_smith" data-position="hero">Upgrade ($99)</a> </div> </div> </div>

Steps to Reproduce

None

Current Behavior

None

Expected Behavior

None

Reason for Variance

None

Release Notes

None

User Impact Summary

None

Status

Assignee

Unassigned

Reporter

Mark Sadecki

Reach

None

Impact

None

Customer

None

Partner Manager

None

URL

None

Contributor Name

None

Groups with Read-Only Access

None

Actual Points

None

Category of Work

None

Stakeholders

None

Story Points

1

Components

Priority

CAT-3
Configure