Course Details Tabs

[ajrodenborn]

Hello Community,

I am an instructional designer at my institution, developing a training course for faculty. I'm wondering if it's possible to create a tabbed interaction like the one that appears on the Details/Certificates page in Catalog.

I'm familiar with the "enhanceable content tabs" method used by many others. However, I also know that is expected to be deprecated. For this reason and for accessibility, I'd like to use the design that appears in Catalog Details. From what I can tell by using the inspect tool and through manual accessibility testing, the tabs on this page in Catalog rely on different code. This interaction has an accessible color scheme (albeit exactly at the minimum necessary 3:1 for UI) unlike enhanceable content tabs (1.6:1). With enhanceable tabs, I cannot change the border color that appears around the active tab (unless I create a static border, which then doesn't indicate which is active except by color alone) or change the color scheme of active/inactive tabs if I want to keep the hover effect. The Details tabs also maintain the default browser focus indicator unlike enhanceable content tabs, and the keyboard functionality is as it should be for these types of interactions. So, this tab interaction is far superior.

Will or has Canvas shared this code at all so we can use it, or are my only options to (1) work with my admin on custom CSS or (2) abandon tabs altogether? I know there are some good cases against them, but I also think they can be implemented well in certain instances. 

Thanks in advance!

[jsowalsk]

@ajrodenborn Unfortunately, Canvas/Instructure does not support customizations. I honestly have never heard tabs working with Catalog.

[James · Accepted solution]

If I'm reading this correctly, @ajrodenborn wants to create tabs within a Canvas course that are similar to tabs in Catalog, not the other way around. I don't have Catalog to know what those look like.

Canvas wants developers to use their Instructure UI React library. They do not, however, expose that so that people wanting to customize their courses can use it. If you were submitting code to Canvas or writing your own LTI and wanted it to look like Canvas, then that would be helpful.

For people who just want to improve their courses but want to do fancy stuff, you can use enhanceable content, but the jQuery-UI getting loaded to support those is being deprecated. At the 2024 InstructureCon, I learned that they will probably deprecate automatic loading of jQuery as well. There's nothing to keep you from using the enhanceable content, but I would avoid it unless you want to revisit the whole process again. I'd love to say "soon", but Canvas announced deprecation of the jQuery-UI in late 2016 and most of it is still there.

There is nothing that says you cannot load your own React library and use Instructure-UI through the custom JavaScript. I wouldn't, but I don't know if that's because I don't understand React, because I'm worried about multiple instances of it being loaded, or because I'm upset they make us load it twice even though they're already loading it. If you understand the consequences, the Instructure-UI has a tabs component that could be used. I do not know if that's the same one being used in Catalog, but they pushed Instructure UI (formerly Inst-UI) as being the accessible solution, so it would make sense if they used in in their entire ecosystem.

You could implement your own tab solution. There are lots of them out there including some pure CSS and pure JavaScript ones. You load those through the custom CSS or JavaScript and then add a class to your element so it gets marked up when rendered. The JavaScript approach requires care as the content is not visible on the page when the page is ready. The content comes inside a JavaScript element that is then parsed and rendered. I use MutationObservers to wait for the content to be there and ready before I try to modify it. With CSS, it would work as soon as the content was added and you wouldn't have to wait for additional processing.

As for issues with tabs, I agree there are lots of pros and cons. I've got another website that earlier this week decided to set tabindex=-1 on all of the tabs. That completely broke keyboard interaction with their website. Their AI bot wasn't able to answer the question and escalated it to support. Now that a real person is looking at it, they still cannot tell me how how to use the keyboard to move between tabs. Thankfully, I know enough about userscripts that I was able to write a userscript that goes through their tabs everytime one of them changes and reset the tabindex to 0. Now I can use the keyboard again. It makes me appreciate Canvas all the more that they value accessibility and design around it -- even if that sometimes means a slightly clunkier interface for non-keyboard users.

[ajrodenborn]

Thank you so much, @James for your detailed response. I was wondering if you'd weigh in, as I noticed your responses on many of the related enhanceable tabs threads. 😀 You are correct in what my question was asking. I'm attaching a screenshot of what the tabs look like in Catalog, but I do think I'll end up abandoning them based on your response. I figured that was the case but thought it worth the ask. Thank you again!