[FE] Hide tag removal and tag adding for competency tags on Course Outline

User Story

As a course author, I want competency tags on my content to be shown without controls for removing or adding them, in order to not break competency configuration from a page that is not meant to manage it.

Acceptance Criteria

Scenario: A competency tag is shown without a remove control
  Given a content object tagged with a competency
  When its tags are shown on the Course Outline page
  Then the competency is listed
  And no control for removing it is shown

Scenario: Ordinary tags keep their remove control
  Given a content object tagged from a taxonomy that is not a competency taxonomy
  When its tags are shown on the Course Outline page
  Then each of those tags is shown with its remove control as it is today

Scenario: An object carrying both kinds shows controls only for the ordinary tags
  Given a content object tagged with both a competency and an ordinary tag
  When its tags are shown
  Then the ordinary tag has a remove control
  And the competency does not

Scenario: Competency taxonomies are not offered for adding tags
  Given a content object
  When the author opens the control for adding a tag
  Then competency taxonomies are not offered as a choice
  And every other taxonomy is offered as it is today

Scenario: A competency tag is still readable
  Given a content object tagged with a competency
  When its tags are shown
  Then the competency's name is shown and legible
  And it is not visually presented as an error or a warning

Scenario: An author using a keyboard or screen reader is not offered the hidden controls
  Given a content object tagged with a competency
  When the author moves through the tag list using a keyboard
  Then no removal control for the competency receives focus
  And no removal control for it is announced

Description

Course Outline show each tag with a remove control, plus an add-tag control for any taxonomy. Competency tags get no special treatment today, so an author can remove or add one from a page that knows nothing about the competency criteria built on it.

Two payloads, two gating tickets. Removing reads the per-object tag payload, gated by #783. Adding reads the taxonomy list (useTaxonomyList), gated by #618. The two halves are independent. This ticket uses the taxonomy type from the tagging payloads to disallow users from adding or removing tag associations from the Course Outline pages.

Figma Links:
Add Course Outline competency tags.

Screenshots:

Technical Details

This section is background and a suggested approach, not the ticket's source of truth. The User Story and Acceptance Criteria define what must be true when the work is done.

In short

What is hidden and what is not. The competency tag itself stays visible, because an author needs to see what a piece of content is tagged with. What disappears is the control for removing it, and competency taxonomies stop appearing in the list of taxonomies an author can add a tag from. Managing competency associations happens on the Competency Management page instead.

How the frontend tells the two apart, per control. The remove control gates on each tag's taxonomy type in the per-object tag payload, which #783 adds. The add-tag control gates on each taxonomy's type in the taxonomy list payload, which #618 adds. Gate on the type field in each case, rather than on a hardcoded taxonomy name or identifier.

Hiding has to mean removed, not visually suppressed. A control that is merely styled out of sight is still focusable by keyboard and still announced by a screen reader, and in this case it is still clickable, so it would remain a route to breaking competency configuration for exactly the authors least able to recover from it. The control must not be rendered.

Implementation specifics

Gate the remove control on the taxonomy type field [BE] Return taxonomy type on the per-object tag endpoint #783 adds to each tag in the per-object tag payload. Do not match on taxonomy name, and do not maintain a client-side list of competency taxonomy ids.
Gate the add-tag taxonomy filtering on the taxonomy type [BE] Update Get endpoint to return Taxonomy Type. #618 adds to the taxonomy list payload (useTaxonomyList), independent of [BE] Return taxonomy type on the per-object tag endpoint #783. Filter competency taxonomies out of that list so the author is not offered a taxonomy they cannot usefully pick. Leave every other taxonomy exactly as it is.
Do not render the removal control for a competency tag, rather than hiding it with CSS or disabling it. A disabled control is still discoverable and still communicates that the action ought to be possible.
Handle the per-object payload not carrying the taxonomy type field. Until [BE] Return taxonomy type on the per-object tag endpoint #783 is deployed, or against an older backend, the type may be absent from that payload. Treat absent as "not a competency" so the remove control behaves as it does today rather than hiding on every tag. The same applies to the add-tag list until [BE] Update Get endpoint to return Taxonomy Type. #618 is deployed.
Do not add an explanatory tooltip or message in this ticket. Telling the author where to manage competency tags instead is a reasonable idea and is not in the approved scope; raise it separately rather than inventing copy here.
Tests: a competency tag renders with no removal control in the DOM; an ordinary tag renders with one; a mixed object renders correctly; competency taxonomies are absent from the add-tag list; the competency's name is still rendered; a per-object payload with the type field absent renders today's remove controls; a keyboard traversal test asserting no removal control for a competency is focusable.
Out of scope: the backend field ([BE] Return taxonomy type on the per-object tag endpoint #783), the Competency Management page's own controls, and any confirmation dialog, which are [FE] Confirm every edit to a competency criterion or criteria group #785 and [FE] Confirm every deletion of a tag association from the Competency Management page #786.

Files to modify

File	Nature of modification
`content-tags-drawer/ContentTagsDrawer.tsx` / `ContentTagsDrawerHelper.jsx`	gate the remove control on the per-object payload's taxonomy type, and the add-tag taxonomy list on its own taxonomy type
the corresponding tests	rendered-without-control, mixed-object, add-list-filtered, absent-field-fallback, and keyboard-traversal tests, for Course Outline

Context

adds the taxonomy type to the per-object tag payload the remove control gates on. [BE] Update Get endpoint to return Taxonomy Type. #618 adds it to the taxonomy list payload the add-tag control gates on; confirm it has landed before starting that half.
The approved implementation approach on [Arch] Implementation approach for competency data delete/edit guardrails #655, for why competency tags must not be removable from these pages.
[FE] Display Competency ID on the Competency Management page #680 and [FE] Add "Apply Competencies" entry point to the taxonomy card menu and footer, with a placeholder Competency Management page #663 for the Competency Management surfaces where competency associations are managed instead.

I worry the end user experience will be confusing without additional messaging and/or a link out to the competency taxonomy page. Is there a low-effort way to do this?

@mgwozdz-unicon

Low-effort visually: a competency tag variant that links out to the competency management page.

Optionally we might be able to add a tooltip on hover showing the demonstration rules: "Inference: Learner must complete this and 2 other assignments at 80% or better to demonstrate competency"

Where it might get complex: what (I think) should happen is to show the competency pre-selected, the course's rule group expanded, and the course itself expanded and scrolled to the tagged content. That implies some deep linking, which I'm uncertain if we have in scope, or how much scope that would add. @mgwozdz-unicon ?

Lowest effort, I think anything that could link directly to the competency tag management page would be helpful.

@illiphilli

@illiphilli Here are some screenshots of the pages for this:

When I click on the tag icon with the 1, it opens the right drawer here:

When I click "Manage tags", it becomes this page:

I think that just the Target icon might be sufficient. I worry that the Competency ID itself might clutter up this page.

Also according to my research, I don't think it will be possible for any competency tags to appear on the Libraries page at all. I think we're planning to filter them out entirely because there should never be competency tags without competency criteria and we won't be able to support Competency Criteria for Libraries. So it should just be the Course Outline page above that needs the treatment. Could you show how you would incorporate it into this view, Phil?

@mgwozdz-unicon

@mgwozdz-unicon here's how I'd incorporate it into the Course Outline view. Figma link

What changes

Sidebar: competency tags get their own "Competency tags" section below the regular taxonomies, marked with the competency (target) icon and no competency ID. They're kept separate on purpose: once competency taxonomies are filtered out of the taxonomy list, the drawer would otherwise drop their tags into "Other tags," whose description tells the author they don't have access. That's not the reason here.
Link out: the section links to the Competency Management page, per @jmakowski1123's request. It's a plain link, with no deep linking to a specific competency or course.
Edit state: regular tags keep their remove (x) control and the "Add a tag" field. Competency tags have neither. The remove control isn't rendered at all (not hidden or disabled), so keyboard and screen reader users can't reach it. The focus order is annotated in Figma's Dev Mode.
Subsection card: a competency count (target icon) sits next to the tag count, so authors can see at a glance that a competency is applied.

Read-only state:

Edit state (regular tags are removable; competency tags aren't):

Open questions

Is the competency count on the card in scope? Showing "tag 1, competency 1" means the tag count leaves out competency tags, which needs a count split by taxonomy type (today's count includes every tag). If it's out of scope, we drop the indicator and the tag count shows 2.
Copy, @jmakowski1123: are "Competency tags", "Competency tags are managed on the Competency Management page." and "Go to Competency Management" OK as written?

Ticket updates, @thelmick-unicon, once those are settled:

Remove the two Libraries scenarios, since competency tags won't appear there (per Mary's research).
Replace "Do not add an explanatory tooltip or message" with the section description and link.
Update the technical approach so competency tags render in their own section instead of falling into "Other tags."
Add the competency count to scope, or note that it's out (question 1).

The target icon isn't in Paragon yet. Developers can use a local SVG from the cbe_target component on the Figma file's Components page for now, and I'll propose adding it to Paragon.

@illiphilli

@illiphilli The competency count is not in scope. Could you please remove this from the designs and screenshots?

@mgwozdz-unicon

@mgwozdz-unicon Done. The competency count is removed from the subsection card in both frames, and the tag count counts every tag again, as it does today, so this example shows 2. I've updated the screenshots in my comment above.

@jmakowski1123

The discussion period for this ticket is now complete, and we appreciate all the feedback. We'll be moving forward with development based on the current ticket pending final Axim sign-off. That said, the conversation doesn't have to stop. If you still have feedback, please continue to add to this ticket. We'll review anything new and determine whether it fits within the current timeline or makes more sense as its own ticket for future work. Thanks again for helping make this better!

@jmakowski1123 This is ready for your final review. Please also note Phil's question above:

Copy: are "Competency tags", "Competency tags are managed on the Competency Management page." and "Go to Competency Management" OK as written?

Navigation Menu

Repository navigation

[FE] Hide tag removal and tag adding for competency tags on Course Outline #784

User Story

Acceptance Criteria