Remove <LetterCircle>

.github/actions/build-and-test-branch/action.yml

@@ -33,7 +33,7 @@ runs:
 
     - name: Ensure frontend configuration files exist
       run: |
-        python manage.py check --tag=compatibility
+        python manage.py check
       shell: bash
 
     - name: Install Arches applications
@@ -74,7 +74,7 @@ runs:
 
     - name: Check for missing migrations
       run: |
-        python manage.py makemigrations --check --skip-checks
+        python manage.py makemigrations --check
       shell: bash
 
     - name: Ensure previous Python coverage data is erased

arches_references/src/arches_references/components/editor/ItemHeader.vue

@@ -8,17 +8,14 @@ import {
     selectedLanguageKey,
     systemLanguageKey,
 } from "@/arches_references/constants.ts";
-import LetterCircle from "@/arches_references/components/misc/LetterCircle.vue";
 
 import type { Ref } from "vue";
 import type { Language } from "@/arches_vue_utils/types";
 import type { ControlledListItem } from "@/arches_references/types";
 
 const selectedLanguage = inject(selectedLanguageKey) as Ref<Language>;
 const systemLanguage = inject(systemLanguageKey) as Language;
-const item = inject(
-    itemKey,
-) as Ref<ControlledListItem> as Ref<ControlledListItem>;
+const item = inject(itemKey) as Ref<ControlledListItem>;
 
 const { $gettext } = useGettext();
 
@@ -29,7 +26,10 @@ const iconLabel = (item: ControlledListItem) => {
 
 <template>
     <span class="item-header">
-        <LetterCircle :labelled="item" />
+        <i
+            class="pi pi-tag"
+            :aria-label="$gettext('Item')"
+        ></i>
         <h3>
             {{
                 getItemLabel(item, selectedLanguage.code, systemLanguage.code)

arches_references/src/arches_references/components/editor/ItemImages.vue

@@ -32,9 +32,7 @@ interface FileUploadInternals {
     state: FileUploadState;
 }
 
-const item = inject(
-    itemKey,
-) as Ref<ControlledListItem> as Ref<ControlledListItem>;
+const item = inject(itemKey) as Ref<ControlledListItem>;
 
 const { $gettext } = useGettext();
 const toast = useToast();

arches_references/src/arches_references/components/editor/ListCharacteristics.vue

@@ -3,7 +3,6 @@ import { inject } from "vue";
 import { useGettext } from "vue3-gettext";
 
 import { displayedRowKey } from "@/arches_references/constants.ts";
-import LetterCircle from "@/arches_references/components/misc/LetterCircle.vue";
 import ListCharacteristic from "@/arches_references/components/editor/ListCharacteristic.vue";
 import ReferenceNodeLink from "@/arches_references/components/editor/ReferenceNodeLink.vue";
 
@@ -20,10 +19,10 @@ const { $gettext } = useGettext();
 <template>
     <template v-if="list">
         <span class="controlled-list-header">
-            <LetterCircle
-                v-if="list"
-                :labelled="list"
-            />
+            <i
+                class="pi pi-folder"
+                :aria-label="$gettext('List')"
+            ></i>
             <h3>{{ list.name }}</h3>
         </span>
         <div>

arches_references/src/arches_references/components/tree/AddDeleteControls.vue

@@ -35,6 +35,7 @@ import type { Language } from "@/arches_vue_utils/types";
 import type {
     ControlledList,
     ControlledListItem,
+    IconLabels,
     RowSetter,
     Selectable,
 } from "@/arches_references/types";
@@ -101,6 +102,11 @@ const deleteSelectOptions = [
     },
 ];
 
+const iconLabels: IconLabels = {
+    list: $gettext("List"),
+    item: $gettext("Item"),
+};
+
 const createList = () => {
     const newList: ControlledList = {
         id: newListCounter.value.toString(),
@@ -114,7 +120,7 @@ const createList = () => {
     nextNewList.value = newList;
     newListCounter.value += 1;
 
-    tree.value.push(listAsNode(newList, selectedLanguage.value));
+    tree.value.push(listAsNode(newList, selectedLanguage.value, iconLabels));
 
     selectedKeys.value = { [newList.id]: true };
     setDisplayedRow(newList);
@@ -231,7 +237,9 @@ const fetchListsAndPopulateTree = async () => {
         .then(
             ({ controlled_lists }: { controlled_lists: ControlledList[] }) => {
                 tree.value = controlled_lists
-                    .map((list) => listAsNode(list, selectedLanguage.value))
+                    .map((list) =>
+                        listAsNode(list, selectedLanguage.value, iconLabels),
+                    )
                     .sort(
                         (a, b) =>
                             priorSortedListIds.indexOf(a.key) -

arches_references/src/arches_references/components/tree/ListTree.vue

@@ -13,7 +13,6 @@ import {
 } from "@/arches_references/constants.ts";
 import { routeNames } from "@/arches_references/routes.ts";
 import { findNodeInTree, nodeIsList } from "@/arches_references/utils.ts";
-import LetterCircle from "@/arches_references/components/misc/LetterCircle.vue";
 import ListTreeControls from "@/arches_references/components/tree/ListTreeControls.vue";
 import TreeRow from "@/arches_references/components/tree/TreeRow.vue";
 
@@ -31,12 +30,17 @@ import type {
 
 const { $gettext } = useGettext();
 
+// Defining these in the parent avoids re-running $gettext in thousands of children.
 const moveLabels = Object.freeze({
     addChild: $gettext("Add child item"),
     moveUp: $gettext("Move item up"),
     moveDown: $gettext("Move item down"),
     changeParent: $gettext("Change item parent"),
 });
+const iconLabels = Object.freeze({
+    list: $gettext("List"),
+    item: $gettext("Item"),
+});
 
 const tree: Ref<TreeNode[]> = ref([]);
 const selectedKeys: Ref<TreeSelectionKeys> = ref({});
@@ -227,14 +231,6 @@ function lazyLabelLookup(node: TreeNode) {
         ).value;
     }
 }
-
-// Factored out because of vue-tsc problems inside the pt object
-const ptNodeContent = ({ instance }: TreePassThroughMethodOptions) => {
-    if (instance.$el && instance.node.key === movingItem.value?.key) {
-        instance.$el.classList.add("is-adjusting-parent");
-    }
-    return { style: { height: "4rem" } };
-};
 </script>
 
 <template>
@@ -288,7 +284,15 @@ const ptNodeContent = ({ instance }: TreePassThroughMethodOptions) => {
                 },
             },
             container: { style: { fontSize: '1.4rem' } },
-            nodeContent: ptNodeContent,
+            nodeContent: ({ instance }: TreePassThroughMethodOptions) => {
+                if (instance.$el && instance.node.key === movingItem?.key) {
+                    instance.$el.classList.add('is-adjusting-parent');
+                }
+                return { style: { height: '4rem' } };
+            },
+            nodeIcon: ({ instance }: TreePassThroughMethodOptions) => {
+                return { ariaLabel: instance.node.iconLabel };
+            },
             nodeLabel: {
                 style: {
                     textWrap: 'nowrap',
@@ -304,9 +308,6 @@ const ptNodeContent = ({ instance }: TreePassThroughMethodOptions) => {
         @node-collapse="nextFilterChangeNeedsExpandAll = true"
         @node-select="updateSelectedAndExpanded"
     >
-        <template #nodeicon="slotProps">
-            <LetterCircle :labelled="slotProps.node.data" />
-        </template>
         <template #default="slotProps">
             <TreeRow
                 v-model:tree="tree"
@@ -319,6 +320,7 @@ const ptNodeContent = ({ instance }: TreePassThroughMethodOptions) => {
                 v-model:new-label-form-value="newLabelFormValue"
                 v-model:new-list-form-value="newListFormValue"
                 v-model:filter-value="filterValue"
+                :icon-labels
                 :move-labels
                 :node="slotProps.node"
                 :is-multi-selecting="isMultiSelecting"

arches_references/src/arches_references/components/tree/MoveRow.vue

@@ -33,6 +33,7 @@ import type { Language } from "@/arches_vue_utils/types";
 import type {
     ControlledList,
     ControlledListItem,
+    IconLabels,
     MoveLabels,
     RowSetter,
     Selectable,
@@ -55,7 +56,8 @@ const {
     setDisplayedRow: RowSetter;
 };
 
-const { moveLabels, node } = defineProps<{
+const { iconLabels, moveLabels, node } = defineProps<{
+    iconLabels: IconLabels;
     moveLabels: MoveLabels;
     node: TreeNode;
 }>();
@@ -107,6 +109,7 @@ const setMovingItem = (node: TreeNode) => {
             itemAsNode(
                 displayedRow.value as ControlledListItem,
                 selectedLanguage.value,
+                iconLabels,
             ),
         ],
         node.key,
@@ -138,7 +141,9 @@ const addItem = (parent: TreeNode) => {
     nextNewItem.value = newItem;
     newLabelCounter.value += 1;
 
-    parent.children!.push(itemAsNode(newItem, selectedLanguage.value));
+    parent.children!.push(
+        itemAsNode(newItem, selectedLanguage.value, iconLabels),
+    );
 
     expandedKeys.value = {
         ...expandedKeys.value,
@@ -181,7 +186,7 @@ const reorder = async (item: ControlledListItem, up: boolean) => {
     );
     tree.value = [
         ...tree.value.slice(0, oldListIndex),
-        listAsNode(list, selectedLanguage.value),
+        listAsNode(list, selectedLanguage.value, iconLabels),
         ...tree.value.slice(oldListIndex + 1),
     ];
     selectedKeys.value = {

arches_references/src/arches_references/components/tree/TreeRow.vue

@@ -41,6 +41,7 @@ import type { Language } from "@/arches_vue_utils/types";
 import type {
     ControlledList,
     ControlledListItem,
+    IconLabels,
     MoveLabels,
     NewControlledListItem,
     NewValue,
@@ -72,8 +73,9 @@ const newListFormValue = defineModel<string>("newListFormValue", {
 });
 const filterValue = defineModel<string>("filterValue", { required: true });
 
-const { isMultiSelecting, node, moveLabels } = defineProps<{
+const { isMultiSelecting, node, iconLabels, moveLabels } = defineProps<{
     isMultiSelecting: boolean;
+    iconLabels: IconLabels;
     moveLabels: MoveLabels;
     node: TreeNode;
 }>();
@@ -226,7 +228,7 @@ const acceptNewItemShortcutEntry = async () => {
 
     parent.children = [
         ...parent.children!.filter((child: TreeNode) => !dataIsNew(child.data)),
-        itemAsNode(newItem, selectedLanguage.value),
+        itemAsNode(newItem, selectedLanguage.value, iconLabels),
     ];
     if (nodeIsList(parent)) {
         parent.data.items.push(newItem);
@@ -266,7 +268,7 @@ const acceptNewListShortcutEntry = async () => {
     }
     tree.value = [
         ...tree.value.filter((cList) => !dataIsNew(cList.data)),
-        listAsNode(newList, selectedLanguage.value),
+        listAsNode(newList, selectedLanguage.value, iconLabels),
     ];
     selectedKeys.value = { [newList.id]: true };
     setDisplayedRow(newList);
@@ -346,6 +348,7 @@ const acceptNewListShortcutEntry = async () => {
                 v-model:moving-item="movingItem"
                 v-model:next-new-item="nextNewItem"
                 :node
+                :icon-labels
                 :move-labels
             />
         </div>

arches_references/src/arches_references/types.ts

@@ -107,3 +107,8 @@ export interface MoveLabels {
     moveDown: string;
     changeParent: string;
 }
+
+export interface IconLabels {
+    list: string;
+    item: string;
+}