Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Embed feature #476

Merged
merged 21 commits into from
Dec 22, 2022
Merged

Embed feature #476

merged 21 commits into from
Dec 22, 2022

Conversation

evmiguel
Copy link
Contributor

This PR implements the embed feature for support levels. It uses handlebars for templating and serves the embeddable page on the server side.

To see the page, go to http://localhost:3000/embed/reports/command-button

Copy link
Contributor

@howard-e howard-e left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@evmiguel looks good! Just made another note around covering the Recommended Phase message as well.

</div>
{{/if}}
{{#unless dataEmpty}}
{{#if (isCandidate status)}}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

isRecommended can also be checked for now. The text the app is currently using is:

The information in this report is generated from recommended tests. Recommended ARIA-AT tests have been reviewed by assistive technology developers and represent consensus regarding: applicability and validity of the tests, and accuracy of test results.

This comes from #471.

Copy link
Contributor

@alflennik alflennik left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested, and it's looking and working well! The postMessage data might need to be updated, see my comment.

};

window.parent.postMessage(
`{ height: ${document.body.scrollHeight}, iframe: ${iframeClass} }`,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This actually doesn't need to be a string, it can be a normal object!

height="500"
allow="clipboard-write"
style="border-style: none; width: 100%;">
</iframe>`;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we format the string like this? This formatting would require less correction when embedded.

    `  <iframe
    class="${iframeClass}"
    src="${link}"
    height="500"
    allow="clipboard-write"
    style="border-style: none; width: 100%;">
  </iframe>`;

Copy link
Contributor

@alflennik alflennik left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great!

@howard-e howard-e merged commit 1885ac1 into main Dec 22, 2022
@howard-e howard-e deleted the embed-feature branch December 22, 2022 15:00
evmiguel added a commit that referenced this pull request Dec 22, 2022
* handlebars bootstrap

* Structural implementation

* Open reports page on button click

* Initial styling pass

* button styling

* Adding JS behaviors

* Prod config

* Fixing pathing issue for environments

* APG integration fixes

* Adding condition for no data

* Adding view cache

* Reports sorted by AT with logic to populate columns

* Remove console statement

* Cleanup

* Post message as object instead of string

* Addressing PR feedback, adding copied message to the right, and adding window resize listener

* Adding recommended notice

* Removing cacheing

* Make responsive (#477)

* Surface AT version

* Adding caching

Co-authored-by: Alexander Flenniken <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants