fix: A11Y Improvement Content Display Screen Reader

pages/common/i18n-strings.ts

@@ -14,7 +14,7 @@ export const contentDisplayPreferenceI18nStrings: Partial<CollectionPreferencesP
       ? `Item moved back to its original position ${initialPosition} of ${total}`
       : `Item moved from position ${initialPosition} to position ${finalPosition} of ${total}`,
   dragHandleAriaDescription:
-    "Use Space or Enter to activate drag for an item, then use the arrow keys to move the item's position. To complete the position move, use Space or Enter, or to discard the move, use Escape.",
+    "Use Space or Enter to activate drag for an item, then use the arrow keys to move the item's position. To complete the position move, use Space or Enter, or to discard the move, use Escape. You may need to toggle your browsing mode on your screen reader.",
   dragHandleAriaLabel: 'Drag handle',
   i18nStrings: {
     columnFilteringPlaceholder: 'Filter columns',

src/collection-preferences/__tests__/shared.tsx

@@ -18,7 +18,7 @@ const i18nMessages = {
       '{count, select, zero {0 matches} one {1 match} other {{count} matches}}',
     'contentDisplayPreference.dragHandleAriaLabel': 'Drag handle',
     'contentDisplayPreference.dragHandleAriaDescription':
-      "Use Space or Enter to activate drag for an item, then use the arrow keys to move the item's position. To complete the position move, use Space or Enter, or to discard the move, use Escape.",
+      "Use Space or Enter to activate drag for an item, then use the arrow keys to move the item's position. To complete the position move, use Space or Enter, or to discard the move, use Escape. You may need to toggle your browsing mode on your screen reader.",
     'contentDisplayPreference.liveAnnouncementDndStarted': 'Picked up item at position {position} of {total}',
     'contentDisplayPreference.liveAnnouncementDndDiscarded': 'Reordering canceled',
     'contentDisplayPreference.liveAnnouncementDndItemReordered':

src/collection-preferences/content-display/__tests__/content-display.test.tsx

@@ -38,6 +38,16 @@ describe('Content Display preference', () => {
       expect(list.getAttribute('aria-describedby')).toBe(descriptionId);
     });
 
+    it('wraps content in a group role with aria-labelledby and aria-describedby', () => {
+      const wrapper = renderContentDisplay();
+      const titleId = wrapper.findTitle().getElement().id;
+      const descriptionId = wrapper.findDescription().getElement().id;
+      const group = wrapper.getElement().closest('[role="group"]')!;
+      expect(group).not.toBeNull();
+      expect(group.getAttribute('aria-labelledby')).toBe(titleId);
+      expect(group.getAttribute('aria-describedby')).toBe(descriptionId);
+    });
+
     it('displays list of options with correct semantics', () => {
       const wrapper = renderContentDisplay(undefined, true);
       const options = wrapper.findOptions();

src/collection-preferences/content-display/index.tsx

@@ -69,7 +69,13 @@ export default function ContentDisplayPreference({
   };
 
   return (
-    <div className={styles[componentPrefix]} {...getAnalyticsInnerContextAttribute('contentDisplay')}>
+    <div
+      role="group"
+      aria-labelledby={titleId}
+      aria-describedby={descriptionId}
+      className={styles[componentPrefix]}
+      {...getAnalyticsInnerContextAttribute('contentDisplay')}
+    >
       <h3 className={getClassName('title')} id={titleId}>
         {i18n('contentDisplayPreference.title', title)}
       </h3>

src/i18n/messages/all.ar.json

@@ -116,7 +116,7 @@
     "contentDisplayPreference.title": "تفضيلات الأعمدة",
     "contentDisplayPreference.description": "تخصيص رؤية الأعمدة وترتيبها.",
     "contentDisplayPreference.dragHandleAriaLabel": "مؤشر السحب للتعبئة التلقائية",
-    "contentDisplayPreference.dragHandleAriaDescription": "استخدم زر Space أو Enter لتنشيط السحب لأحد العناصر، ثم استخدم مفاتيح الأسهم لتحريك موضع العنصر. لإكمال تحريك الموضع، استخدم زر Space أو Enter، أو استخدم Escape لتجاهل الحركة.",
+    "contentDisplayPreference.dragHandleAriaDescription": "استخدم زر المسافة (Space) أو زر الإدخال (Enter) لتنشيط سحب العنصر، ثم استخدم مفاتيح الأسهم في تحريك موضع العنصر. لإكمال نقل الموضع، استخدم زر المسافة (Space) أو زر الإدخال (Enter)، أو استخدم زر Escape لتجاهل الحركة. قد تحتاج إلى تبديل وضع التصفح على قارئ الشاشة.",
     "contentDisplayPreference.liveAnnouncementDndStarted": "العنصر المسحوب في الموضع {position} من أصل {total}",
     "contentDisplayPreference.liveAnnouncementDndDiscarded": "تم إلغاء إعادة الترتيب",
     "contentDisplayPreference.i18nStrings.columnFilteringPlaceholder": "أعمدة التصفية",

src/i18n/messages/all.de.json

@@ -116,7 +116,7 @@
     "contentDisplayPreference.title": "Spalteneinstellungen",
     "contentDisplayPreference.description": "Passen Sie die Sichtbarkeit und Reihenfolge der Spalten an.",
     "contentDisplayPreference.dragHandleAriaLabel": "Ziehpunkt",
-    "contentDisplayPreference.dragHandleAriaDescription": "Verwenden Sie Space (Leertaste) oder Enter (Eingabetaste), um das Ziehen für ein Element zu aktivieren. Verwenden Sie dann die Pfeiltasten, um die Position abzuschließen. Verwenden Sie Space (Leertaste) oder Enter (Eingabetaste) oder, um den Zug zu verwerfen, verwenden Sie Escape (Escape).",
+    "contentDisplayPreference.dragHandleAriaDescription": "Drücken Sie die Leertaste oder die Eingabetaste, um das Ziehen eines Elements zu aktivieren, und verwenden Sie anschließend die Pfeiltasten, um die Position des Elements zu verschieben. Um die Positionsänderung abzuschließen, drücken Sie die Leertaste oder die Eingabetaste; um die Verschiebung abzubrechen, drücken Sie die Escape-Taste. Möglicherweise müssen Sie den Navigationsmodus Ihres Screenreaders umschalten.",
     "contentDisplayPreference.liveAnnouncementDndStarted": "Aufgeholtes Element an Position {position} von {total}",
     "contentDisplayPreference.liveAnnouncementDndDiscarded": "Neuanordnung storniert",
     "contentDisplayPreference.i18nStrings.columnFilteringPlaceholder": "Spalten filtern",

src/i18n/messages/all.en-GB.json

@@ -116,7 +116,7 @@
     "contentDisplayPreference.title": "Column preferences",
     "contentDisplayPreference.description": "Customise the visibility and order of the columns.",
     "contentDisplayPreference.dragHandleAriaLabel": "Drag handle",
-    "contentDisplayPreference.dragHandleAriaDescription": "Use Space or Enter to activate drag for an item, then use the arrow keys to move the item's position. To complete the position move, use Space or Enter, or to discard the move, use Escape.",
+    "contentDisplayPreference.dragHandleAriaDescription": "Use Space or Enter to activate drag for an item, then use the arrow keys to move the item's position. To complete the position move, use Space or Enter, or to discard the move, use Escape. You may need to toggle your browsing mode on your screen reader.",
     "contentDisplayPreference.liveAnnouncementDndStarted": "Picked up item at position {position} of {total}",
     "contentDisplayPreference.liveAnnouncementDndDiscarded": "Reordering cancelled",
     "contentDisplayPreference.i18nStrings.columnFilteringPlaceholder": "Filter columns",

src/i18n/messages/all.en.json

@@ -116,7 +116,7 @@
     "contentDisplayPreference.title": "Column preferences",
     "contentDisplayPreference.description": "Customize the visibility and order of the columns.",
     "contentDisplayPreference.dragHandleAriaLabel": "Drag handle",
-    "contentDisplayPreference.dragHandleAriaDescription": "Use Space or Enter to activate drag for an item, then use the arrow keys to move the item's position. To complete the position move, use Space or Enter, or to discard the move, use Escape.",
+    "contentDisplayPreference.dragHandleAriaDescription": "Use Space or Enter to activate drag for an item, then use the arrow keys to move the item's position. To complete the position move, use Space or Enter, or to discard the move, use Escape. You may need to toggle your browsing mode on your screen reader.",
     "contentDisplayPreference.liveAnnouncementDndStarted": "Picked up item at position {position} of {total}",
     "contentDisplayPreference.liveAnnouncementDndDiscarded": "Reordering canceled",
     "contentDisplayPreference.i18nStrings.columnFilteringPlaceholder": "Filter columns",

src/i18n/messages/all.es.json

@@ -116,7 +116,7 @@
     "contentDisplayPreference.title": "Preferencias de columnas",
     "contentDisplayPreference.description": "Personalice la visibilidad y el orden de las columnas.",
     "contentDisplayPreference.dragHandleAriaLabel": "Arrastrar controlador",
-    "contentDisplayPreference.dragHandleAriaDescription": "Utilice la barra espaciadora o Enter para activar el arrastre de un elemento y, a continuación, utilice las teclas de flecha para mover la posición del elemento. Para completar el movimiento de la posición, utilice la barra espaciadora o Enter, o para descartar el movimiento, utilice Escape.",
+    "contentDisplayPreference.dragHandleAriaDescription": "Utilice la barra espaciadora o Enter para activar el arrastre de un elemento y, a continuación, utilice las teclas de flecha para mover la posición del elemento. Para completar el movimiento de la posición, utilice la barra espaciadora o Enter, o para descartar el movimiento, utilice Escape. Es posible que necesite cambiar el modo de navegación en el lector de pantalla.",
     "contentDisplayPreference.liveAnnouncementDndStarted": "Recogida del elemento en la posición {position} de {total}",
     "contentDisplayPreference.liveAnnouncementDndDiscarded": "Reordenación cancelada",
     "contentDisplayPreference.i18nStrings.columnFilteringPlaceholder": "Filtrar columnas",

src/i18n/messages/all.fr.json

@@ -116,7 +116,7 @@
     "contentDisplayPreference.title": "Préférences de colonne",
     "contentDisplayPreference.description": "Personnalisez la visibilité et l’ordre des colonnes.",
     "contentDisplayPreference.dragHandleAriaLabel": "Faire glisser",
-    "contentDisplayPreference.dragHandleAriaDescription": "Utilisez Espace ou Entrée pour activer le glissement pour un élément, puis utilisez les touches fléchées pour déplacer la position de l'élément. Pour terminer le déplacement de la position, utilisez Espace ou Entrée. Pour ignorer le déplacement, utilisez Échap.",
+    "contentDisplayPreference.dragHandleAriaDescription": "Utilisez la touche Espace ou Entrée pour activer le déplacement d’un élément, puis utilisez les touches fléchées pour en modifier la position. Afin de valider le déplacement, utilisez Espace ou Entrée, pour l’annuler, utilisez Échap. Selon votre lecteur d’écran, vous devrez peut-être changer de mode de navigation.",
     "contentDisplayPreference.liveAnnouncementDndStarted": "Élément sélectionné à la position {position} de {total}",
     "contentDisplayPreference.liveAnnouncementDndDiscarded": "Réorganisation annulée",
     "contentDisplayPreference.i18nStrings.columnFilteringPlaceholder": "Filtrer les colonnes",

src/i18n/messages/all.id.json

@@ -116,7 +116,7 @@
     "contentDisplayPreference.title": "Preferensi kolom",
     "contentDisplayPreference.description": "Sesuaikan visibilitas dan urutan kolom.",
     "contentDisplayPreference.dragHandleAriaLabel": "Tuas seret",
-    "contentDisplayPreference.dragHandleAriaDescription": "Gunakan Spasi atau Enter untuk mengaktifkan seret item, lalu gunakan tombol panah untuk memindahkan posisi item. Untuk menyelesaikan perpindahan posisi, gunakan Spasi atau Enter, atau untuk membatalkan perpindahan, gunakan Escape.",
+    "contentDisplayPreference.dragHandleAriaDescription": "Gunakan Spasi atau Enter untuk mengaktifkan seret untuk item, lalu gunakan tombol panah untuk memindahkan posisi item. Untuk menyelesaikan perpindahan posisi, gunakan Spasi atau Enter, atau untuk membuang perpindahan, gunakan Escape. Anda mungkin perlu beralih mode penelusuran di pembaca layar Anda.",
     "contentDisplayPreference.liveAnnouncementDndStarted": "Mengambil item pada posisi {position} dari {total}",
     "contentDisplayPreference.liveAnnouncementDndDiscarded": "Pengurutan ulang dibatalkan",
     "contentDisplayPreference.i18nStrings.columnFilteringPlaceholder": "Filter kolom",

src/i18n/messages/all.it.json

@@ -116,7 +116,7 @@
     "contentDisplayPreference.title": "Preferenze di colonna",
     "contentDisplayPreference.description": "Personalizza la visibilità e l'ordine delle colonne.",
     "contentDisplayPreference.dragHandleAriaLabel": "Punto di trascinamento",
-    "contentDisplayPreference.dragHandleAriaDescription": "Utilizza Spazio o Invio per attivare il trascinamento di un elemento, quindi usa i tasti freccia per spostare la posizione dell'elemento. Per completare lo spostamento della posizione, utilizza Spazio o Invio oppure per annullare lo spostamento, usa Esc.",
+    "contentDisplayPreference.dragHandleAriaDescription": "Utilizza Spazio o Invio per attivare il trascinamento di un elemento, quindi usa i tasti freccia per spostare la posizione dell'elemento. Per completare lo spostamento della posizione, utilizza Spazio o Invio oppure per annullare lo spostamento, premi Esc. Potrebbe essere necessario attivare la modalità di navigazione sullo screen reader.",
     "contentDisplayPreference.liveAnnouncementDndStarted": "Elemento raccolto nella posizione {position} di {total}",
     "contentDisplayPreference.liveAnnouncementDndDiscarded": "Riordinamento annullato",
     "contentDisplayPreference.i18nStrings.columnFilteringPlaceholder": "Filtra le colonne",

src/i18n/messages/all.ja.json

@@ -116,7 +116,7 @@
     "contentDisplayPreference.title": "列の詳細設定",
     "contentDisplayPreference.description": "列の表示設定と順序をカスタマイズします。",
     "contentDisplayPreference.dragHandleAriaLabel": "ドラッグハンドル",
-    "contentDisplayPreference.dragHandleAriaDescription": "Space または Enter を使用して項目のドラッグをアクティブ化し、矢印キーを使用して項目の位置を移動します。位置の移動を完了するには、Space または Enter を使用します。移動を取り消すには、Escape を使用します。",
+    "contentDisplayPreference.dragHandleAriaDescription": "Space キーまたは Enter キーを使用して項目のドラッグを有効にし、矢印キーを使用して項目の位置を移動します。位置の移動を完了するには Space キーまたは Enter キーを使用し、移動を取り消すには Esc キーを使用します。スクリーンリーダーでブラウジングモードを切り替える必要がある場合があります。画面読み上げソフトの閲覧モードを切り替える必要がある場合があります。",
     "contentDisplayPreference.liveAnnouncementDndStarted": "{position}/{total} の位置で項目をピックアップしました",
     "contentDisplayPreference.liveAnnouncementDndDiscarded": "順序変更をキャンセルしました",
     "contentDisplayPreference.i18nStrings.columnFilteringPlaceholder": "フィルター列",

src/i18n/messages/all.ko.json

@@ -116,7 +116,7 @@
     "contentDisplayPreference.title": "열 기본 설정",
     "contentDisplayPreference.description": "열 표시 여부 및 순서를 사용자 지정합니다.",
     "contentDisplayPreference.dragHandleAriaLabel": "핸들 끌기",
-    "contentDisplayPreference.dragHandleAriaDescription": "스페이스 또는 Enter를 사용하여 항목 끌기 기능을 활성화하고 화살표 키를 사용하여 항목의 위치를 이동합니다. 위치 이동을 완료하려면 스페이스 또는 Enter를 사용하거나 이동을 취소하려면 Escape를 사용합니다.",
+    "contentDisplayPreference.dragHandleAriaDescription": "스페이스 또는 Enter를 사용하여 항목 끌기 기능을 활성화하고 화살표 키를 사용하여 항목의 위치를 이동합니다. 위치 이동을 완료하려면 스페이스 또는 Enter를 사용하고 이동을 취소하려면 Escape를 사용합니다. 스크린 리더에서 탐색 모드를 토글해야 할 수 있습니다.",
     "contentDisplayPreference.liveAnnouncementDndStarted": "{position}/{total}개 위치에서 선택한 항목",
     "contentDisplayPreference.liveAnnouncementDndDiscarded": "재정렬 취소됨",
     "contentDisplayPreference.i18nStrings.columnFilteringPlaceholder": "열 필터링",

src/i18n/messages/all.pt-BR.json

@@ -116,7 +116,7 @@
     "contentDisplayPreference.title": "Preferências de coluna",
     "contentDisplayPreference.description": "Personalize a visibilidade e a ordem das colunas.",
     "contentDisplayPreference.dragHandleAriaLabel": "Ícone de arrastar",
-    "contentDisplayPreference.dragHandleAriaDescription": "Use Space ou Enter para ativar a função de arrastar para um item e, em seguida, use as teclas de setas para movimentar o posicionamento do item. Para completar o movimento de posicionamento, use Space ou Enter, ou para descartar o movimento, use Escape.",
+    "contentDisplayPreference.dragHandleAriaDescription": "Use a barra de espaço ou a tecla Enter para ativar o arrastar de um item e, em seguida, use as setas do teclado para ajustar a posição do item. Para confirmar o ajuste de posição, use a barra de espaço ou a tecla Enter; para cancelar o ajuste, use a tecla Escape. Talvez seja necessário alternar o modo de navegação no seu leitor de tela.",
     "contentDisplayPreference.liveAnnouncementDndStarted": "Item selecionado na posição {position} de {total}",
     "contentDisplayPreference.liveAnnouncementDndDiscarded": "Reordenação cancelada",
     "contentDisplayPreference.i18nStrings.columnFilteringPlaceholder": "Filtrar colunas",

src/i18n/messages/all.zh-CN.json

@@ -116,7 +116,7 @@
     "contentDisplayPreference.title": "列首选项",
     "contentDisplayPreference.description": "自定义列的可见性和顺序。",
     "contentDisplayPreference.dragHandleAriaLabel": "拖动手柄",
-    "contentDisplayPreference.dragHandleAriaDescription": "使用空格键或 Enter 键激活项目拖动功能，然后使用箭头键移动项目的位置。要完成位置移动，请使用空格键或 Enter 键，要放弃移动，请使用 Esc 键。",
+    "contentDisplayPreference.dragHandleAriaDescription": "使用空格键或 Enter 键激活项目拖动功能，然后使用箭头键移动项目的位置。要完成位置移动，请使用空格键或 Enter 键，要放弃移动，请使用 Esc 键。您可能需要在屏幕阅读器上切换浏览模式。",
     "contentDisplayPreference.liveAnnouncementDndStarted": "已选择位于位置 {position}（共 {total} 个位置）的项目",
     "contentDisplayPreference.liveAnnouncementDndDiscarded": "重新排序已取消",
     "contentDisplayPreference.i18nStrings.columnFilteringPlaceholder": "筛选列",

src/i18n/messages/all.zh-TW.json

@@ -116,7 +116,7 @@
     "contentDisplayPreference.title": "欄偏好設定",
     "contentDisplayPreference.description": "自訂欄位的可見性和順序。",
     "contentDisplayPreference.dragHandleAriaLabel": "拖曳控點",
-    "contentDisplayPreference.dragHandleAriaDescription": "使用空白鍵或 ENTER 鍵啟用項目拖曳功能，然後使用方向鍵移動項目的位置。若要完成位置移動，請使用空白鍵或 ENTER 鍵，或者若要捨棄移動，請使用 ESC 鍵。",
+    "contentDisplayPreference.dragHandleAriaDescription": "使用空白鍵或 ENTER 鍵啟用項目拖曳功能，然後使用方向鍵移動項目的位置。若要完成位置移動，請使用空白鍵或 ENTER 鍵，或者若要捨棄移動，請使用 ESC 鍵。您可能需要在螢幕閱讀器上切換瀏覽模式。",
     "contentDisplayPreference.liveAnnouncementDndStarted": "在第 {position} 位置 (共 {total} 個位置) 拾取了項目",
     "contentDisplayPreference.liveAnnouncementDndDiscarded": "重新排序已取消",
     "contentDisplayPreference.i18nStrings.columnFilteringPlaceholder": "篩選欄",

src/internal/components/drag-handle/__tests__/drag-handle-button.test.tsx

@@ -53,10 +53,10 @@ test('assigns aria-labelledby attribute', () => {
   expect(document.querySelector(`.${styles.handle}`)).toHaveAccessibleName('custom label');
 });
 
-test('has role="application" if no ariaValue is provided', () => {
+test('has role="button" if no ariaValue is provided', () => {
   render(<DragHandleButton ariaLabel="drag handle" />);
 
-  expect(screen.getByRole('application')).toHaveAccessibleName('drag handle');
+  expect(screen.getByRole('button')).toHaveAccessibleName('drag handle');
 });
 
 test('has role="slider" and aria-value attributes when ariaValue is set', () => {