[rdar://105598877] feat: add refactor to ariaDescribedBy in NavigatorCardItem (#593)

Co-authored-by: Hanqing Huang <[email protected]>

Author: marinaaisa

src/components/Navigator/NavigatorCardItem.vue

@@ -65,16 +65,26 @@
         v-if="isParent"
         hidden
         :id="parentLabel"
-      >, {{ $tc(
-        'filter.containing-symbols',
+      >{{ $tc(
+        'filter.parent-label',
         item.childUIDs.length,
-        { number: item.childUIDs.length }
+        {
+          'number-siblings': item.index + 1,
+          'total-siblings': item.siblingsCount,
+          'parent-siblings': item.parent,
+          'number-parent': item.childUIDs.length
+        }
       ) }}</span>
       <span
+        v-if="!isParent"
         :id="siblingsLabel"
         hidden
       >
-        {{ $t('filter.symbols-inside', { number: item.index + 1, total: item.siblingsCount }) }}
+        {{ $t('filter.siblings-label', {
+          'number-siblings': item.index + 1,
+          'total-siblings': item.siblingsCount,
+          'parent-siblings': item.parent
+        }) }}
       </span>
       <component
         :is="refComponent"
@@ -181,13 +191,11 @@ export default {
     parentLabel: ({ item }) => `label-parent-${item.uid}`,
     siblingsLabel: ({ item }) => `label-${item.uid}`,
     usageLabel: ({ item }) => `usage-${item.uid}`,
-    ariaDescribedBy({
-      item, siblingsLabel, parentLabel, isParent,
-    }) {
-      const baseLabel = `${siblingsLabel} ${item.parent}`;
-      if (!isParent) return `${baseLabel}`;
-      return `${baseLabel} ${parentLabel}`;
-    },
+    ariaDescribedBy: ({
+      isParent, parentLabel, siblingsLabel,
+    }) => (
+      isParent ? `${parentLabel}` : `${siblingsLabel}`
+    ),
     isBeta: ({ item: { beta } }) => !!beta,
     isDeprecated: ({ item: { deprecated } }) => !!deprecated,
     refComponent: ({ isGroupMarker }) => (isGroupMarker ? 'h3' : Reference),

src/lang/locales/ja-JP.json

@@ -118,8 +118,8 @@
     "add-tag": "タグを追加",
     "tag-select-remove": "タグ。選択してリストから削除します。",
     "navigate": "シンボルを移動するには、上下左右の矢印キーを押します。",
-    "containing-symbols": "1個のシンボルを含む | {number}個のシンボルを含む",
-    "symbols-inside": "{total}個中{number}個のシンボルが中にあります",
+    "siblings-label": "{number-siblings}個中{total-siblings} 個のシンボルが中にあります {parent-siblings}",
+    "parent-label": "@:filter.siblings-label 1個のシンボルを含む | @:filter.siblings-label {number-parent} 個のシンボルを含む",
     "reset-filter": "フィルタをリセット"
   },
   "navigator": {

src/lang/locales/zh-CN.json

@@ -118,8 +118,8 @@
     "add-tag": "添加标签",
     "tag-select-remove": "标签。选择以从列表中移除。",
     "navigate": "若要导航符号，请按下上箭头、下箭头、左箭头或右箭头。",
-    "containing-symbols": "包含 1 个符号 | 包含 {number} 个符号",
-    "symbols-inside": "内含 {number} 个符号（共 {total} 个）",
+    "siblings-label": "内含 {number-siblings} 个符号（共 {total-siblings} 个）{parent-siblings}",
+    "parent-label": "@:filter.siblings-label 包含 1 个符号 | @:filter.siblings-label 包含 {number-parent} 个符号",
     "reset-filter": "还原过滤条件"
   },
   "navigator": {

tests/unit/components/Navigator/NavigatorCardItem.spec.js

@@ -463,7 +463,7 @@ describe('NavigatorCardItem', () => {
       expect(btn.attributes('tabindex')).toBe('-1');
       expect(btn.attributes('aria-labelledby')).toBe(`${defaultProps.item.uid}`);
       expect(btn.attributes('aria-describedby'))
-        .toBe(`label-${defaultProps.item.uid} Foo label-parent-${defaultProps.item.uid}`);
+        .toBe(`label-parent-${defaultProps.item.uid}`);
     });
 
     it('renders aria-expanded true in button when component is expanded', () => {
@@ -475,22 +475,14 @@ describe('NavigatorCardItem', () => {
       expect(wrapper.find('.tree-toggle').attributes('aria-expanded')).toBe('true');
     });
 
-    it('renders a hidden span telling the user the position of a symbol', () => {
-      const wrapper = createWrapper();
-      const label = wrapper.find(`#label-${defaultProps.item.uid}`);
-      expect(label.attributes('hidden')).toBe('hidden');
-      expect(label.text())
-        .toBe('filter.symbols-inside 2 5');
-    });
-
-    it('renders a hidden span telling the containing number of symbols', () => {
+    it('renders a aria-describedby with parent label if it is a parent', () => {
       const wrapper = createWrapper();
       const label = wrapper.find(`#label-parent-${defaultProps.item.uid}`);
       expect(label.attributes('hidden')).toBe('hidden');
-      expect(label.text()).toBe(', filter.containing-symbols');
+      expect(label.text()).toBe('filter.parent-label');
     });
 
-    it('renders a aria-describedby without parent label if it is not a parent', () => {
+    it('renders a aria-describedby with sibling label if it is not a parent', () => {
       const wrapper = createWrapper({
         propsData: {
           item: {
@@ -499,8 +491,13 @@ describe('NavigatorCardItem', () => {
           },
         },
       });
+      const label = wrapper.find(`#label-${defaultProps.item.uid}`);
+      expect(label.attributes('hidden')).toBe('hidden');
+      expect(label.text())
+        .toBe('filter.siblings-label 2 5 Foo');
+
       expect(wrapper.find('.leaf-link').attributes('aria-describedby'))
-        .toBe(`label-${defaultProps.item.uid} Foo usage-${defaultProps.item.uid}`);
+        .toBe(`label-${defaultProps.item.uid} usage-${defaultProps.item.uid}`);
     });
 
     it('focuses its link, if `isFocused`, `isRendered` and `enableFocus` is `true`', async () => {