updated copy button and join course#407
Conversation
WalkthroughConsolidated clipboard copy behavior and accessibility updates in the Canvas LTI 1.3 doc; capitalization and environment-variable example fixes in LLM provider docs; small join-token wording change; Wistia embeds muted by default and support doc layout/clarity edits. All changes are documentation-focused. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant U as User
participant B as Copy Button (UI)
participant S as Page Script
participant C as Clipboard API
participant LR as Live Region (status)
U->>B: Click "Copy"
B->>S: invoke copyRST(btnId, url)
S->>C: navigator.clipboard.writeText(url)
alt Success
S->>B: set text "Copied"
S->>LR: create/update "URL copied to clipboard"
else Failure
S->>B: set text "Copy failed"
S->>LR: create/update "Copy failed"
S->>S: console.error(error)
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20–30 minutes Possibly related PRs
Suggested reviewers
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. ✨ Finishing Touches🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
Status, Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (10)
student-source/students/accessing-codio/joining.rst (1)
15-15: Confirm “four-word token” and fix minor RST/link nits
- Please confirm with Product/Support that the token is now four words everywhere (UI, emails, LMS-agnostic flows). If some courses still use two-word tokens, consider clarifying “four-word token” vs. legacy tokens to avoid student confusion.
- There’s an extra space before the URL inside the inline link; trim for consistency.
- - Send you a four-word token that you can enter on the Codio website using `Join Course <https://codio.com/p/join-class>`_. Enter the token and click **Next**. + - Send you a four-word token that you can enter on the Codio website using `Join Course <https://codio.com/p/join-class>`_. Enter the token and click **Next**.source/instructors/admin/organization/llms.rst (3)
2-2: Grammar: pluralize “LLM’s” and clarify the descriptionUse “LLMs” (no apostrophe) for the plural and simplify the sentence.
- :description: You can enable LLM's to use your own LLM Provider API keys in Codio + :description: Enable use of your own LLM provider API keys in Codio
6-7: Heading pluralityThe page covers multiple models/providers. Recommend plural.
-Large Language Model -==================== +Large Language Models +=====================
60-64: Consistency: capitalize “API key” in bulletsMinor style consistency across provider examples.
- - api key: your api key from openai + - API key: your API key from OpenAI ... - - api key environment variable: OPENAI_CUSTOM_KEY (custom value) + - API key environment variable: OPENAI_CUSTOM_KEY (custom value)Apply similarly in the Gemini example (“your API key from Gemini”).
source/instructors/admin/integration/lti1-3Canvas.rst (6)
120-131: Clipboard UX: add non-intrusive success/failure feedback and DRY the scriptsSuccess alerts were intentionally removed (good), but there’s now no user-visible feedback. Also, 12 nearly identical
copyRSTUrlX()functions repeat logic.
- Suggest: a single helper that updates the clicked button label to “Copied” for 2–3 seconds, plus an aria-live status for screen readers. Keep errors in console, but also reflect failure in the button label.
- This preserves a quiet UX while providing clear, accessible feedback and reduces duplication.
-<button onclick="copyRSTUrl1()">Copy URL</button><br> -<script> function copyRSTUrl1() { -const url = "https://apollo.codio.com/lti/resource_selection"; -navigator.clipboard.writeText(url).catch(err => { - console.error('Failed to copy: ', err); }); } </script> +<button id="copyBtn1" onclick="copyRST('copyBtn1','https://apollo.codio.com/lti/resource_selection')">Copy URL</button><br> +<script> + // One helper for all copy buttons + function copyRST(btnId, url) { + const btn = document.getElementById(btnId); + const original = btn.textContent; + const status = document.getElementById('copyStatus') || (function () { + const el = document.createElement('div'); + el.id = 'copyStatus'; + el.setAttribute('aria-live', 'polite'); + el.style.position = 'absolute'; el.style.left = '-9999px'; + document.body.appendChild(el); + return el; + })(); + navigator.clipboard.writeText(url).then(() => { + btn.textContent = 'Copied'; + status.textContent = 'URL copied to clipboard'; + setTimeout(() => (btn.textContent = original), 2000); + }).catch(err => { + console.error('Failed to copy: ', err); + btn.textContent = 'Copy failed'; + setTimeout(() => (btn.textContent = original), 2000); + status.textContent = 'Copy failed'; + }); + } +</script>Apply the same pattern to the other buttons (
copyRSTUrl2–copyRSTUrl12) by replacing inline per-button functions withcopyRST('copyBtnX','<url>').Also applies to: 150-161, 177-188, 204-215, 318-320, 330-332, 339-341, 348-350
98-99: List punctuation and spacingThere’s a double space before “Assignment” and a missing serial comma; tighten for consistency.
- Link Selection, Editor Button, Assignment Selection and Course Navigation. + Link Selection, Editor Button, Assignment Selection, and Course Navigation.
152-152: Normalize “URL” capitalizationUse “URL” (not “Url”) for consistency with earlier instances.
- <span style="color: teal;">Icon Url:</span><br> + <span style="color: teal;">Icon URL:</span><br>Apply to all occurrences in this file.
Also applies to: 179-179, 206-206
225-225: HyphenationMinor readability tweak.
- 18. Press <strong>Save</strong> in bottom right corner<br><br> + 18. Press <strong>Save</strong> in the bottom-right corner<br><br>
233-254: Add alt text to substitution images for accessibilityThe
|imageX|substitutions currently set width but no alt text. Add concise alts.-.. |image1| image:: /instructors/admin/integration/CodioLTI1.3Integration.png +.. |image1| image:: /instructors/admin/integration/CodioLTI1.3Integration.png + :alt: LTI 1.3 integration fields in Codio :width: 1500px -.. |image2| image:: /img/lti/canvasdeveloperkey.png +.. |image2| image:: /img/lti/canvasdeveloperkey.png + :alt: Canvas Developer Keys page :width: 1500px -.. |image3| image:: /img/lti/developerkeyvalues.png +.. |image3| image:: /img/lti/developerkeyvalues.png + :alt: Canvas LTI key configuration fields :width: 1500px -.. |image4| image:: /img/lti/canvasJWK.png +.. |image4| image:: /img/lti/canvasJWK.png + :alt: Canvas JWK settings :width: 1500px -.. |image5| image:: /img/lti/canvasadvantage.png +.. |image5| image:: /img/lti/canvasadvantage.png + :alt: LTI Advantage Services toggles in Canvas :width: 1500px -.. |image6| image:: /img/lti/canvasplacements.png +.. |image6| image:: /img/lti/canvasplacements.png + :alt: Canvas placements configuration :width: 1500px -.. |image7| image:: /img/lti/canvaslinkselect.png +.. |image7| image:: /img/lti/canvaslinkselect.png + :alt: Canvas Link Selection placement :width: 1500px -.. |image8| image:: /img/lti/canvaseditorbutton.png +.. |image8| image:: /img/lti/canvaseditorbutton.png + :alt: Canvas Editor Button placement :width: 1500px -.. |image9| image:: /img/lti/canvasassignment.png +.. |image9| image:: /img/lti/canvasassignment.png + :alt: Canvas Assignment Selection placement :width: 1500px -.. |image10| image:: /img/lti/canvasnavigation.png +.. |image10| image:: /img/lti/canvasnavigation.png + :alt: Canvas Course Navigation placement :width: 1500px -.. |image11| image:: /img/lti/canvasdetails.png +.. |image11| image:: /img/lti/canvasdetails.png + :alt: Canvas Developer Key list with details :width: 1500px
364-364: Clarify the action in AssignmentsCanvas UI usually uses a “+ Assignment” action. Recommend this clearer wording.
- 1. Go to Assignments in your course, select <strong>Assignment</strong>.<br><br> + 1. Go to <strong>Assignments</strong> in your course, then click <strong>+ Assignment</strong>.<br><br>
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
source/img/joinclass.pngis excluded by!**/*.png,!**/*.png
📒 Files selected for processing (3)
source/instructors/admin/integration/lti1-3Canvas.rst(15 hunks)source/instructors/admin/organization/llms.rst(1 hunks)student-source/students/accessing-codio/joining.rst(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.rst
⚙️ CodeRabbit Configuration File
**/*.rst: Review files for:
- Consistent formatting (e.g., headings, lists, links).
- Clear and concise language.
- Correct grammar and spelling.
- Proper use of rst syntax (e.g., avoid broken links or invalid code blocks).
- Adherence to style guides (e.g., consistent tone, terminology).
Suggest improvements to enhance readability and accessibility.
Files:
student-source/students/accessing-codio/joining.rstsource/instructors/admin/organization/llms.rstsource/instructors/admin/integration/lti1-3Canvas.rst
🔇 Additional comments (1)
source/instructors/admin/organization/llms.rst (1)
63-75: OPENAI_CUSTOM_URL correction is consistent with the example scriptThe bullet now matches the script (
LLM_URL=$OPENAI_CUSTOM_URL$SUB_PATH) and keepsOPENAI_CUSTOM_KEYfor auth, which is correct. Nothing else to change here.
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (22)
source/instructors/getstarted/howto.rst (4)
21-21: Deduplicate Wistia loader script; keep E‑v1.js once per page.Each embed block includes both the JSONP media script and E‑v1.js. Keep the media-specific JSONP per video, but load
E-v1.jsonly once (ideally near the first embed) to reduce requests and potential race conditions.Example change for subsequent embeds (keep E‑v1.js only in the first block):
-<script src="https://fast.wistia.com/embed/medias/5z8sv6nw5q.jsonp" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script> <div class="wistia_responsive_padding" ... +<script src="https://fast.wistia.com/embed/medias/5z8sv6nw5q.jsonp" async></script> <div class="wistia_responsive_padding" ...
21-21: Mute before seeking to avoid any transient audio.You already pass
muted=truein the class config, which is good. For belt and suspenders, callvideo.mute()beforevideo.time(8)so the player is guaranteed muted before seeking/starting.- _wq.push({ id: "5z8sv6nw5q", onReady: function(video) {video.time(8); video.mute();}});</script> + _wq.push({ id: "5z8sv6nw5q", onReady: function(video) {video.mute(); video.time(8);}});</script>Apply similarly to other embeds in this file.
Also applies to: 32-32, 42-42, 52-52, 61-61
56-62: Add an HTML-only fallback note for non-HTML builders.These
.. raw:: htmlblocks won’t render in PDF/LaTeX builds. Consider wrapping with.. only:: htmland providing a plain link/caption alternative for other builders.-.. raw:: html +.. only:: html + +.. raw:: html <script src="https://fast.wistia.com/embed/medias/rsmrdwd2y2.jsonp" async></script>... + +.. only:: not html + + See “Creating a Standard Code Test in Codio” video: https://codio.wistia.com/medias/rsmrdwd2y2
99-100: Clarify the site-wide policy note.Consider tightening the sentence and acknowledging muted playback for accessibility consistency.
-.. note:: - All videos are configured to start at the 8-second mark for optimal viewing experience. +.. note:: + All embedded videos start at 8 seconds and are muted by default for a consistent, accessible experience.source/instructors/getstarted/support/support.rst (7)
9-18: Tighten phrasing and align menu callouts.Use consistent, action-oriented UI phrasing and “→” path style to match the rest of the docs.
-For support, use our integrated support system available in the dashboard and IDE. +For support, use our integrated support system in the Dashboard and IDE. -+---------------+-----------------------------------------------------------------------------------+ -| **Dashboard** | Support is available in the dashboard by clicking on the **Help** menu item at | -| | the top and selecting **Support Chat**. | ++---------------+-----------------------------------------------------------------------------------+ +| **Dashboard** | In the Dashboard: **Help → Support Chat**. | | | | +---------------+-----------------------------------------------------------------------------------+ -| **IDE** | Support is available within the IDE from the **Help** menu item, then | -| | **Support**. | +| **IDE** | In the IDE: **Help → Support**. | +---------------+-----------------------------------------------------------------------------------+
29-35: Improve flow and image semantics; keep text before images in reading order.Move the sentence before the image block so screen readers encounter the context first. Also, avoid left alignment if it causes text wrap issues on narrow viewports.
-.. image:: /img/intercomnotification.png - :alt: Intercom Notification - :align: left - :class: wrap-text - -If you are in Codio, you can see when a reply to your query arrives even if you have closed the support dialog box. +If you are in Codio, you can see when a reply to your query arrives even if you have closed the support dialog box. + +.. image:: /img/intercomnotification.png + :alt: Intercom notification indicator in-app
36-36: Numeral style and concision.Spell out small numbers and reduce redundancy.
-You'll receive an email notification if you don't see the reply within 2 minutes or if you've logged out of your Codio account. +If you don't see a reply within two minutes—or if you're logged out—you'll receive an email notification.
41-45: Verify custom CSS usage for image wrapping.
:class: wrap-textassumes theme CSS. If this class isn’t universally available, text may collide with images. Consider removing the class and using standard:align:/:scale:or confirm site CSS defines it.
62-72: Clarify Contact URL guidance and tighten wording.Minor grammar, remove extra spaces, and prefer “channel” over “area”.
-You can set a Contact URL for your students at the organization level (see :ref:`Organization Contact URL <org-contact-url>` ) and/or at the course level ( see :ref:`Course Contact URL <course-contact-url>` so they can raise questions directly to your preferred area. +You can set a Contact URL for your students at the organization level (see :ref:`Organization Contact URL <org-contact-url>`) and/or at the course level (see :ref:`Course Contact URL <course-contact-url>`) so they can raise questions directly in your preferred channel.
74-78: Remove “N.B.” inside a note.The directive already conveys emphasis; “N.B.” is redundant.
-.. note:: - N.B. "Teacher" accounts will not be affected by this setting, and they will still be able to contact Codio in the usual manner. +.. note:: + "Teacher" accounts are not affected by this setting and can contact Codio as usual.
53-56: Community paragraph: split sentences and align tone.Slight readability and style improvement.
-The Codio community forum is a place for Codio users to engage with each other and share best practices. You can access it from the Connect menu or go to `Codio Community <https://community.codio.com/>`_ directly. +The Codio Community forum is where users engage with each other and share best practices. Access it from the Connect menu or go to `Codio Community <https://community.codio.com/>`_.source/instructors/admin/integration/lti1-3Canvas.rst (11)
22-24: Add an aria-live status element up-front and reference it.The copy helper creates a live region lazily. Prefer a single, page-level
role="status"region to avoid duplicates and to simplify the script. Also, consider replacing the admonition text with a short sentence on the copy buttons’ behavior... important:: - When copying links, please use the copy button adjacent to each link to ensure accuracy and prevent linking errors. + Use the adjacent copy buttons to avoid errors when transferring URLs. A status message will confirm success or failure. + +.. raw:: html + + <div id="copyStatus" role="status" aria-live="polite" aria-atomic="true" style="position:absolute;left:-9999px;"></div>
96-99: Canvas placement names: parallel punctuation and Oxford comma.Align with Canvas UI labels and improve readability with a serial comma.
-Link Selection, Editor Button, Assignment Selection and Course Navigation. +Link Selection, Editor Button, Assignment Selection, and Course Navigation.
123-147: Consolidate the copy script; add role/atomic and keyboard focus safety.Define
copyRSTonce per page (preferably near the top) and remove duplicate blocks to reduce maintenance and redefinition risk.- <script> - function copyRST(btnId, url) { + <script> + function copyRST(btnId, url) { const btn = document.getElementById(btnId); const original = btn.textContent; - const status = document.getElementById('copyStatus') || (function () { - const el = document.createElement('div'); - el.id = 'copyStatus'; - el.setAttribute('aria-live', 'polite'); - el.style.position = 'absolute'; el.style.left = '-9999px'; - document.body.appendChild(el); - return el; - })(); + const status = document.getElementById('copyStatus'); navigator.clipboard.writeText(url).then(() => { btn.textContent = 'Copied'; - status.textContent = 'URL copied to clipboard'; + if (status) { status.textContent = 'URL copied to clipboard'; } setTimeout(() => (btn.textContent = original), 2000); }).catch(err => { console.error('Failed to copy: ', err); btn.textContent = 'Copy failed'; setTimeout(() => (btn.textContent = original), 2000); - status.textContent = 'Copy failed'; + if (status) { status.textContent = 'Copy failed'; } }); - } - </script> + } + </script>Then remove other identical
copyRSTscript blocks later in the file.
240-244: Tone and clarity in step text.Use “Click” and add “the” for readability.
-18. Press <strong>Save</strong> in bottom-right corner +18. Click <strong>Save</strong> in the bottom-right corner
248-291: Image sizing: avoid fixed 1500px widths.Fixed pixel widths can overflow narrow viewports. Prefer relative sizing or scaling (e.g.,
:scale:) to let the theme handle responsiveness.-:width: 1500px +:scale: 70%Apply consistently across
|image1|…|image11|as appropriate.
345-347: Naming consistency: “LTI Integration 1.3” vs “LTI 1.3 Integration”.Use one form consistently. Earlier you used “LTI Integration 1.3”; recommend sticking with that.
-From Codio, under <strong>LTI 1.3 Integration, copy the LTI URL</strong> +From Codio, under <strong>LTI Integration 1.3</strong>, copy the LTI URL
351-354: Minor HTML cleanup and quote/spacing.Remove stray spaces and ensure consistent onclick syntax.
-<button id="copyBtn9" - onclick="copyRST('copyBtn9','https://canvas.instructure.com')">Copy URL</button> +<button id="copyBtn9" aria-label="Copy Platform ID" onclick="copyRST('copyBtn9','https://canvas.instructure.com')">Copy URL</button> ... -<button id="copyBtn12" - onclick="copyRST ('copyBtn12','https://[CANVAS DOMAIN]/api/lti/authorize_redirect' - )">Copy URL</button> +<button id="copyBtn12" aria-label="Copy Authentication Request URL" onclick="copyRST('copyBtn12','https://[CANVAS DOMAIN]/api/lti/authorize_redirect')">Copy URL</button>Also applies to: 360-368, 372-375
415-437: UI label style in the note and quote characters.Use strong emphasis for UI actions and avoid curly quotes for terms.
-<strong>Note:</strong> Do not paste the LTI Integration URL directly into the Canvas - External Tool URL field when creating an assignment. Instead, use the deep link - “Find” flow (recommended) or follow the “Connect by LTI Integration URL” method - described below. +<strong>Note:</strong> Do not paste the LTI Integration URL directly into the Canvas +External Tool URL field when creating an assignment. Instead, use the <strong>Find</strong> flow (recommended) or follow the <strong>Connect by LTI Integration URL</strong> method described below.Also applies to: 425-428
472-496: Align video embeds with site standard (muted + onReady).Other pages now autoplay muted and seek to 8 seconds. For consistency and to satisfy autoplay policies, mirror that here.
-<div class="wistia_embed wistia_async_bzowzoyfz1 seo=false videoFoam=true" +<div class="wistia_embed wistia_async_bzowzoyfz1 seo=false videoFoam=true muted=true" ... -</div></div></div></div> +</div></div></div></div><script>window._wq=window._wq||[];_wq.push({id:"bzowzoyfz1",onReady:function(video){video.mute();video.time(8);}});</script>Apply similarly to the other two video blocks.
300-313: Parallel structure in steps; minor grammar polish.Add “the” and periods for consistency.
-4. Paste number you copied in Part 1 into <strong>Client ID</strong> field +4. Paste the number you copied in Part 1 into the <strong>Client ID</strong> field. -5. <strong>Submit → Install</strong> +5. Click <strong>Submit → Install</strong>.Also applies to: 314-322
205-229: Consolidate duplicatecopyRSTdefinitionsIt looks like the refactor hasn’t been applied yet – there are still three identical
<script>blocks declaringcopyRSTinsource/instructors/admin/integration/lti1-3Canvas.rst:
- Lines 124–129
- Lines 206–212
- Lines 382–388
Please remove the two redundant blocks and keep a single
copyRSTdefinition (or factor it into a shared include), so the function is defined only once and referenced wherever needed. This will reduce noise and maintenance overhead.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (4)
source/img/codiofeedback.pngis excluded by!**/*.png,!**/*.pngsource/img/intercomstart.pngis excluded by!**/*.png,!**/*.pngsource/img/joinclass.pngis excluded by!**/*.png,!**/*.pngsource/img/manage_organization/studentoptions.pngis excluded by!**/*.png,!**/*.png
📒 Files selected for processing (5)
source/instructors/admin/integration/lti1-3Canvas.rst(4 hunks)source/instructors/admin/organization/llms.rst(3 hunks)source/instructors/getstarted/howto.rst(4 hunks)source/instructors/getstarted/support/support.rst(2 hunks)student-source/students/accessing-codio/joining.rst(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- student-source/students/accessing-codio/joining.rst
- source/instructors/admin/organization/llms.rst
🧰 Additional context used
📓 Path-based instructions (1)
**/*.rst
⚙️ CodeRabbit configuration file
**/*.rst: Review files for:
- Consistent formatting (e.g., headings, lists, links).
- Clear and concise language.
- Correct grammar and spelling.
- Proper use of rst syntax (e.g., avoid broken links or invalid code blocks).
- Adherence to style guides (e.g., consistent tone, terminology).
Suggest improvements to enhance readability and accessibility.
Files:
source/instructors/getstarted/howto.rstsource/instructors/getstarted/support/support.rstsource/instructors/admin/integration/lti1-3Canvas.rst
| | 17. Expand each of the following fields, and copy the static links below:<br><br> | | ||
| | | | ||
| | <strong>Link Selection</strong><br> | | ||
| | Select <strong>LtiDeepLinkingRequest</strong><br> | | ||
| | | | ||
| | 17. Expand each of the following fields, and copy the static links below:<br><br> | | ||
| | <strong>Link Selection</strong><br> | | ||
| | Select <strong>LtiDeepLinkingRequest</strong><br> | | ||
| | <span style="color: teal;">Target Link URI:</span> | | ||
| | https://apollo.codio.com/lti/resource_selection | | ||
| | <button onclick="copyRSTUrl1()">Copy URL</button><br> | | ||
| | <script> function copyRSTUrl1() { | | ||
| | const url = "https://apollo.codio.com/lti/resource_selection"; | | ||
| | navigator.clipboard.writeText(url).then(() => { | | ||
| | alert('URL copied to clipboard!'); }).catch(err => { | | ||
| | console.error('Failed to copy: ', err); }); } </script> | | ||
| | <span style="color: teal;">Icon URL:</span><br> | | ||
| | https://static-assets.codio.com/dashboard/images/icons/favicon-16x16.da14ae918fd9bc3b.png | | ||
| | <span style="color: teal;">Target Link URI:</span><br> | | ||
| | https://apollo.codio.com/lti/resource_selection | | ||
| | <button id="copyBtn1" onclick="copyRST('copyBtn1','https://apollo.codio.com/lti/resource_selection')">Copy URL</button><br> | | ||
| | | | ||
| | <button onclick="copyRSTUrl2()">Copy URL</button><br> | | ||
| | <script> function copyRSTUrl2() { | | ||
| | const url = "https://static-assets.codio.com/dashboard/images/icons/favicon-16x16.da14ae918fd9bc3b.png"; | | ||
| | <span style="color: teal;">Icon URL:</span><br> | | ||
| | https://static-assets.codio.com/dashboard/images/icons/favicon-16x16.da14ae918fd9bc3b.png | | ||
| | <button id="copyBtn2" onclick="copyRST('copyBtn2','https://static-assets.codio.com/dashboard/images/icons/favicon-16x16.da14ae918fd9bc3b.png')">Copy URL</button><br> | | ||
| | | | ||
| | navigator.clipboard.writeText(url).then(() => { | | ||
| | alert('URL copied to clipboard!'); }).catch(err => { | | ||
| | console.error('Failed to copy: ', err); }); } </script> | | ||
| | <script> | | ||
| | function copyRST(btnId, url) { | | ||
| | const btn = document.getElementById(btnId); | | ||
| | const original = btn.textContent; | | ||
| | const status = document.getElementById('copyStatus') || (function () { | | ||
| | const el = document.createElement('div'); | | ||
| | el.id = 'copyStatus'; | | ||
| | el.setAttribute('aria-live', 'polite'); | | ||
| | el.style.position = 'absolute'; el.style.left = '-9999px'; | | ||
| | document.body.appendChild(el); | | ||
| | return el; | | ||
| | })(); | | ||
| | | | ||
| | navigator.clipboard.writeText(url).then(() => { | | ||
| | btn.textContent = 'Copied'; | | ||
| | status.textContent = 'URL copied to clipboard'; | | ||
| | setTimeout(() => (btn.textContent = original), 2000); | | ||
| | }).catch(err => { | | ||
| | console.error('Failed to copy: ', err); | | ||
| | btn.textContent = 'Copy failed'; | | ||
| | setTimeout(() => (btn.textContent = original), 2000); | | ||
| | status.textContent = 'Copy failed'; | | ||
| | }); | | ||
| | } | | ||
| | </script> | |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Accessibility: replace color-dependent labels and add button aria-labels.
Avoid using color alone to convey meaning and give each button an explicit label.
- <span style="color: teal;">Target Link URI:</span><br>
+ <strong>Target Link URI:</strong><br>
...
- <button id="copyBtn1" onclick="copyRST('copyBtn1','https://apollo.codio.com/lti/resource_selection')">Copy URL</button><br>
+ <button id="copyBtn1" aria-label="Copy Target Link URI" onclick="copyRST('copyBtn1','https://apollo.codio.com/lti/resource_selection')">Copy URL</button><br>
...
- <span style="color: teal;">Icon URL:</span><br>
+ <strong>Icon URL:</strong><br>
- <button id="copyBtn2" onclick="copyRST('copyBtn2','https://static-assets.codio.com/dashboard/images/icons/favicon-16x16.da14ae918fd9bc3b.png')">Copy URL</button><br>
+ <button id="copyBtn2" aria-label="Copy Icon URL" onclick="copyRST('copyBtn2','https://static-assets.codio.com/dashboard/images/icons/favicon-16x16.da14ae918fd9bc3b.png')">Copy URL</button><br>Repeat for other buttons in this document.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| | 17. Expand each of the following fields, and copy the static links below:<br><br> | | |
| | | | |
| | <strong>Link Selection</strong><br> | | |
| | Select <strong>LtiDeepLinkingRequest</strong><br> | | |
| | | | |
| | 17. Expand each of the following fields, and copy the static links below:<br><br> | | |
| | <strong>Link Selection</strong><br> | | |
| | Select <strong>LtiDeepLinkingRequest</strong><br> | | |
| | <span style="color: teal;">Target Link URI:</span> | | |
| | https://apollo.codio.com/lti/resource_selection | | |
| | <button onclick="copyRSTUrl1()">Copy URL</button><br> | | |
| | <script> function copyRSTUrl1() { | | |
| | const url = "https://apollo.codio.com/lti/resource_selection"; | | |
| | navigator.clipboard.writeText(url).then(() => { | | |
| | alert('URL copied to clipboard!'); }).catch(err => { | | |
| | console.error('Failed to copy: ', err); }); } </script> | | |
| | <span style="color: teal;">Icon URL:</span><br> | | |
| | https://static-assets.codio.com/dashboard/images/icons/favicon-16x16.da14ae918fd9bc3b.png | | |
| | <span style="color: teal;">Target Link URI:</span><br> | | |
| | https://apollo.codio.com/lti/resource_selection | | |
| | <button id="copyBtn1" onclick="copyRST('copyBtn1','https://apollo.codio.com/lti/resource_selection')">Copy URL</button><br> | | |
| | | | |
| | <button onclick="copyRSTUrl2()">Copy URL</button><br> | | |
| | <script> function copyRSTUrl2() { | | |
| | const url = "https://static-assets.codio.com/dashboard/images/icons/favicon-16x16.da14ae918fd9bc3b.png"; | | |
| | <span style="color: teal;">Icon URL:</span><br> | | |
| | https://static-assets.codio.com/dashboard/images/icons/favicon-16x16.da14ae918fd9bc3b.png | | |
| | <button id="copyBtn2" onclick="copyRST('copyBtn2','https://static-assets.codio.com/dashboard/images/icons/favicon-16x16.da14ae918fd9bc3b.png')">Copy URL</button><br> | | |
| | | | |
| | navigator.clipboard.writeText(url).then(() => { | | |
| | alert('URL copied to clipboard!'); }).catch(err => { | | |
| | console.error('Failed to copy: ', err); }); } </script> | | |
| | <script> | | |
| | function copyRST(btnId, url) { | | |
| | const btn = document.getElementById(btnId); | | |
| | const original = btn.textContent; | | |
| | const status = document.getElementById('copyStatus') || (function () { | | |
| | const el = document.createElement('div'); | | |
| | el.id = 'copyStatus'; | | |
| | el.setAttribute('aria-live', 'polite'); | | |
| | el.style.position = 'absolute'; el.style.left = '-9999px'; | | |
| | document.body.appendChild(el); | | |
| | return el; | | |
| | })(); | | |
| | | | |
| | navigator.clipboard.writeText(url).then(() => { | | |
| | btn.textContent = 'Copied'; | | |
| | status.textContent = 'URL copied to clipboard'; | | |
| | setTimeout(() => (btn.textContent = original), 2000); | | |
| | }).catch(err => { | | |
| | console.error('Failed to copy: ', err); | | |
| | btn.textContent = 'Copy failed'; | | |
| | setTimeout(() => (btn.textContent = original), 2000); | | |
| | status.textContent = 'Copy failed'; | | |
| | }); | | |
| | } | | |
| | </script> | | |
| <strong>Target Link URI:</strong><br> | |
| https://apollo.codio.com/lti/resource_selection | |
| <button id="copyBtn1" | |
| aria-label="Copy Target Link URI" | |
| onclick="copyRST('copyBtn1','https://apollo.codio.com/lti/resource_selection')"> | |
| Copy URL | |
| </button><br> | |
| <strong>Icon URL:</strong><br> | |
| https://static-assets.codio.com/dashboard/images/icons/favicon-16x16.da14ae918fd9bc3b.png | |
| <button id="copyBtn2" | |
| aria-label="Copy Icon URL" | |
| onclick="copyRST('copyBtn2','https://static-assets.codio.com/dashboard/images/icons/favicon-16x16.da14ae918fd9bc3b.png')"> | |
| Copy URL | |
| </button><br> |
🤖 Prompt for AI Agents
In source/instructors/admin/integration/lti1-3Canvas.rst around lines 110 to
147, the current UI uses color alone to convey the "Target Link URI" and "Icon
URL" labels and the Copy buttons lack accessible labels; update the markup so
that labels are not color-dependent (keep the teal color as decorative only and
include the label text in plain readable form), add descriptive aria-label
attributes to each Copy URL button (e.g., aria-label="Copy Target Link URL" and
aria-label="Copy Icon URL"), ensure the off-screen status element has
aria-live="polite" (already present) and is referenced/updated for assistive
tech, and verify the button visible text never relies solely on color for
meaning and remains readable when color is removed or high-contrast mode is
enabled.
| | | | ||
| | <span style="color: teal;">Target Link URI:</span><br> | | ||
| | https://apollo.codio.com/lti/editor_button | | ||
| | <button id="copyBtn3" onclick="copyRST('copyBtn3','https://apollo.codio.com/lti/editor_button')">Copy URL</button><br> | | ||
| | | | ||
| | <strong>Editor button</strong><br> | | ||
| | | | ||
| | <span style="color: teal;">Target Link URI:</span> | | ||
| | https://apollo.codio.com/lti/editor_button | | ||
| | <button onclick="copyRSTUrl3()">Copy URL</button><br> | | ||
| | <script> function copyRSTUrl3() { | | ||
| | const url = "https://apollo.codio.com/lti/editor_button"; | | ||
| | navigator.clipboard.writeText(url).then(() => { | | ||
| | alert('URL copied to clipboard!'); }).catch(err => { | | ||
| | console.error('Failed to copy: ', err); }); } </script> | | ||
| | <span style="color: teal;">Icon Url:</span><br> | | ||
| | https://static-assets.codio.com/dashboard/images/icons/favicon-16x16.da14ae918fd9bc3b.png | | ||
| | | | ||
| | <button onclick="copyRSTUrl4()">Copy URL</button><br> | | ||
| | <script> function copyRSTUrl4() { | | ||
| | const url = "https://static-assets.codio.com/dashboard/images/icons/favicon-16x16.da14ae918fd9bc3b.png"; | | ||
| | | | ||
| | navigator.clipboard.writeText(url).then(() => { | | ||
| | alert('URL copied to clipboard!'); }).catch(err => { | | ||
| | console.error('Failed to copy: ', err); }); } </script> | | ||
| | <span style="color: teal;">Icon URL:</span><br> | | ||
| | https://static-assets.codio.com/dashboard/images/icons/favicon-16x16.da14ae918fd9bc3b.png | | ||
| | <button id="copyBtn4" onclick="copyRST('copyBtn4','https://static-assets.codio.com/dashboard/images/icons/favicon-16x16.da14ae918fd9bc3b.png')">Copy URL</button><br> | | ||
| | </div> | |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consistency: apply the same accessibility tweaks to all copy buttons.
Ensure all buttons have descriptive aria-labels and the teal spans are replaced with semantic <strong> labels throughout these blocks.
Also applies to: 175-185, 192-201
🤖 Prompt for AI Agents
In source/instructors/admin/integration/lti1-3Canvas.rst around lines 160-168
(also apply same changes at 175-185 and 192-201), the copy buttons lack
descriptive accessibility attributes and the teal-colored spans should be
semantic labels; update each button to include an appropriate aria-label (e.g.,
"Copy Target Link URL" or "Copy Icon URL") and replace the <span style="color:
teal;"> elements with semantic <strong> labels so screen-readers convey purpose
and the UI uses proper semantic markup.
shajason
left a comment
shajason
left a comment
There was a problem hiding this comment.
Looks good just one more place that still has the two-word language -you only see this page in the student docs.
in student-source/accessing-codio.rst
(you only see this page in the student docs)
it says:
Send you a two-word token
It should say:
Send you a multi-word token
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
source/instructors/admin/integration/lti1-3Canvas.rst (1)
115-121: Accessibility: replace color‑dependent labels and add descriptive aria‑labels to all “Copy URL” buttons.Relying on teal color for labels isn’t accessible, and multiple “Copy URL” buttons lack context for screen readers. Use semantic labels and aria-labels. Apply consistently to all blocks below.
- <span style="color: teal;">Target Link URI:</span><br> + <strong>Target Link URI:</strong><br> https://apollo.codio.com/lti/resource_selection - <button id="copyBtn1" onclick="copyRST('copyBtn1','https://apollo.codio.com/lti/resource_selection')">Copy URL</button><br> + <button id="copyBtn1" type="button" aria-label="Copy Target Link URI" onclick="copyRST('copyBtn1','https://apollo.codio.com/lti/resource_selection')">Copy URL</button><br> @@ - <span style="color: teal;">Icon URL:</span><br> + <strong>Icon URL:</strong><br> https://static-assets.codio.com/dashboard/images/icons/favicon-16x16.da14ae918fd9bc3b.png - <button id="copyBtn2" onclick="copyRST('copyBtn2','https://static-assets.codio.com/dashboard/images/icons/favicon-16x16.da14ae918fd9bc3b.png')">Copy URL</button><br> + <button id="copyBtn2" type="button" aria-label="Copy Icon URL" onclick="copyRST('copyBtn2','https://static-assets.codio.com/dashboard/images/icons/favicon-16x16.da14ae918fd9bc3b.png')">Copy URL</button><br>Apply the same replacements for:
- copyBtn3/4 (Editor button)
- copyBtn5/6 (Assignment Selection)
- copyBtn7/8 (Course Navigation)
- copyBtn9 (Platform ID)
- copyBtn10 (Public Keyset URL)
- copyBtn11 (Access Token URL)
- copyBtn12 (Authentication Request URL)
Also applies to: 161-167, 178-185, 194-201, 351-353, 357-369, 370-375
🧹 Nitpick comments (7)
source/instructors/getstarted/howto.rst (3)
21-21: Split long embed line and load E‑v1.js once for readability.The combined script/embed line is hard to maintain. Split tags onto separate lines and keep the E‑v1.js include only once near the top of the page.
- <script src="https://fast.wistia.com/embed/medias/5z8sv6nw5q.jsonp" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script> <div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><div class="wistia_embed wistia_async_5z8sv6nw5q videoFoam=true muted=true" style="height:100%;position:relative;width:100%"><div class="wistia_swatch" style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;"><img src="https://fast.wistia.com/embed/medias/5z8sv6nw5q/swatch" style="filter:blur(5px);height:100%;object-fit:contain;width:100%;" alt="" aria-hidden="true" onload="this.parentNode.style.opacity=1;" /></div></div></div></div><script>window._wq = window._wq || [];_wq.push({ id: "5z8sv6nw5q", onReady: function(video) {video.mute(); video.time(8);}});</script> + <script src="https://fast.wistia.com/assets/external/E-v1.js" async></script> + <script src="https://fast.wistia.com/embed/medias/5z8sv6nw5q.jsonp" async></script> + <div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;"> + <div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"> + <div class="wistia_embed wistia_async_5z8sv6nw5q videoFoam=true muted=true" style="height:100%;position:relative;width:100%"> + <div class="wistia_swatch" style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;"> + <img src="https://fast.wistia.com/embed/medias/5z8sv6nw5q/swatch" style="filter:blur(5px);height:100%;object-fit:contain;width:100%;" alt="" aria-hidden="true" onload="this.parentNode.style.opacity=1;" /> + </div> + </div> + </div> + </div> + <script> + window._wq = window._wq || []; + _wq.push({ id: "5z8sv6nw5q", onReady: function(video) { video.mute(); video.time(8); }}); + </script>
52-52: Good consistency across embeds.Same behavior applied uniformly. Consider adding a brief caption under each video summarizing its purpose to aid skimming.
56-63: Add a one‑sentence intro and optional transcript link.Add a short description below the heading and, if available, a “View transcript” link to improve accessibility and scannability.
Creating a Standard Code Test in Codio ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ .. raw:: html @@ <script src="https://fast.wistia.com/embed/medias/rsmrdwd2y2.jsonp" async></script><div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><div class="wistia_embed wistia_async_rsmrdwd2y2 videoFoam=true muted=true" style="height:100%;position:relative;width:100%"><div class="wistia_swatch" style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;"><img src="https://fast.wistia.com/embed/medias/rsmrdwd2y2/swatch" style="filter:blur(5px);height:100%;object-fit:contain;width:100%;" alt="" aria-hidden="true" onload="this.parentNode.style.opacity=1;" /></div></div></div></div><script>window._wq = window._wq || [];_wq.push({ id: "rsmrdwd2y2", onReady: function(video) {video.mute(); video.time(8); }});</script> +A quick walkthrough of creating and configuring a standard code test in Codio. If you prefer text, see the step‑by‑step guide below. Optional: add a link to a transcript if available.source/instructors/admin/integration/lti1-3Canvas.rst (4)
98-98: Improve scannability with bullets and a serial comma.List placements as bullets to reduce ambiguity and add a serial comma.
- Link Selection, Editor Button, Assignment Selection and Course Navigation. + The following placements should be included: + <ul> + <li>Link Selection</li> + <li>Editor Button</li> + <li>Assignment Selection</li> + <li>Course Navigation</li> + </ul>
123-147: Live region enhancement and graceful clipboard fallback.Add role="status" to the live region and include a fallback when navigator.clipboard is unavailable (older browsers or restricted contexts).
- el.setAttribute('aria-live', 'polite'); + el.setAttribute('aria-live', 'polite'); + el.setAttribute('role', 'status'); @@ - navigator.clipboard.writeText(url).then(() => { + const doCopy = () => navigator.clipboard.writeText(url).catch(() => { + // Fallback for environments without Clipboard API + const ta = document.createElement('textarea'); + ta.value = url; + ta.setAttribute('readonly', ''); + ta.style.position = 'absolute'; + ta.style.left = '-9999px'; + document.body.appendChild(ta); + ta.select(); + document.execCommand && document.execCommand('copy'); + document.body.removeChild(ta); + }); + + doCopy().then(() => { btn.textContent = 'Copied'; status.textContent = 'URL copied to clipboard'; setTimeout(() => (btn.textContent = original), 2000); }).catch(err => {
205-229: DRY: duplicate copyRST() blocks — keep a single definition.The copyRST function is defined three times. Define it once (preferably near the end of the page) and remove duplicates to avoid future drift.
- <script> - function copyRST(btnId, url) { - const btn = document.getElementById(btnId); - const original = btn.textContent; - const status = document.getElementById('copyStatus') || (function () { - const el = document.createElement('div'); - el.id = 'copyStatus'; - el.setAttribute('aria-live', 'polite'); - el.style.position = 'absolute'; el.style.left = '-9999px'; - document.body.appendChild(el); - return el; - })(); - - navigator.clipboard.writeText(url).then(() => { - btn.textContent = 'Copied'; - status.textContent = 'URL copied to clipboard'; - setTimeout(() => (btn.textContent = original), 2000); - }).catch(err => { - console.error('Failed to copy: ', err); - btn.textContent = 'Copy failed'; - setTimeout(() => (btn.textContent = original), 2000); - status.textContent = 'Copy failed'; - }); - } - </script> + <!-- duplicate copyRST removed; single definition kept below -->Also applies to: 381-405
418-419: Match Canvas UI label: “+ Assignment”.Use the exact button label to avoid confusion.
- 1. Go to <strong>Assignments</strong> in your course, then click <strong> - Assignment</strong>.<br><br> + 1. Go to <strong>Assignments</strong> in your course, then click <strong>+ Assignment</strong>.<br><br>
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
source/img/intercomnotification.pngis excluded by!**/*.png,!**/*.png
📒 Files selected for processing (3)
source/instructors/admin/integration/lti1-3Canvas.rst(4 hunks)source/instructors/getstarted/howto.rst(5 hunks)source/instructors/getstarted/support/support.rst(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- source/instructors/getstarted/support/support.rst
🧰 Additional context used
📓 Path-based instructions (1)
**/*.rst
⚙️ CodeRabbit configuration file
**/*.rst: Review files for:
- Consistent formatting (e.g., headings, lists, links).
- Clear and concise language.
- Correct grammar and spelling.
- Proper use of rst syntax (e.g., avoid broken links or invalid code blocks).
- Adherence to style guides (e.g., consistent tone, terminology).
Suggest improvements to enhance readability and accessibility.
Files:
source/instructors/getstarted/howto.rstsource/instructors/admin/integration/lti1-3Canvas.rst
🔇 Additional comments (4)
source/instructors/getstarted/howto.rst (3)
32-32: Consistent mute + start-at-8s behavior — looks good.
42-42: LGTM on accessibility default (muted) and consistent start time.
99-100: Nice global note. Consider applying the same standard across related pages.This clarifies behavior plainly. Ensure other docs with Wistia embeds adopt the same default for consistency.
source/instructors/admin/integration/lti1-3Canvas.rst (1)
248-291: Alt text and dimensions for images — solid improvements.Descriptive alt text and consistent widths aid accessibility and visual consistency.
| | <button id="copyBtn12" | | | ||
| | onclick="copyRST ('copyBtn12','https://[CANVAS DOMAIN]/api/lti/authorize_redirect'| | | ||
| | )">Copy URL</button><br><br> | | |
There was a problem hiding this comment.
Broken onclick attribute (malformed JS due to line break) — copy button 12 won’t work.
The closing parenthesis is outside the attribute value. Keep the entire function call within the same quoted attribute.
- <button id="copyBtn12"
- onclick="copyRST ('copyBtn12','https://[CANVAS DOMAIN]/api/lti/authorize_redirect'
- )">Copy URL</button><br><br>
+ <button id="copyBtn12" type="button" aria-label="Copy Authentication Request URL"
+ onclick="copyRST('copyBtn12','https://[CANVAS DOMAIN]/api/lti/authorize_redirect')">
+ Copy URL
+ </button><br><br>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| | <button id="copyBtn12" | | | |
| | onclick="copyRST ('copyBtn12','https://[CANVAS DOMAIN]/api/lti/authorize_redirect'| | | |
| | )">Copy URL</button><br><br> | | | |
| <button id="copyBtn12" type="button" aria-label="Copy Authentication Request URL" | |
| onclick="copyRST('copyBtn12','https://[CANVAS DOMAIN]/api/lti/authorize_redirect')"> | |
| Copy URL | |
| </button><br><br> |
🤖 Prompt for AI Agents
In source/instructors/admin/integration/lti1-3Canvas.rst around lines 372 to
374, the onclick attribute for the copy button is broken by a line break so the
closing parenthesis and quote fall outside the attribute value; fix by placing
the entire copyRST function call (including closing parenthesis and closing
quote) on the same line inside the onclick attribute so the JavaScript is a
single valid string value.
2 participants
Summary by CodeRabbit
Documentation
Accessibility
Style