diff --git a/pages/common/i18n-strings.ts b/pages/common/i18n-strings.ts index 0df7313c49..5b6c57edda 100644 --- a/pages/common/i18n-strings.ts +++ b/pages/common/i18n-strings.ts @@ -14,7 +14,7 @@ export const contentDisplayPreferenceI18nStrings: Partial { 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(); diff --git a/src/collection-preferences/content-display/index.tsx b/src/collection-preferences/content-display/index.tsx index 173522ee6d..b0465188a9 100644 --- a/src/collection-preferences/content-display/index.tsx +++ b/src/collection-preferences/content-display/index.tsx @@ -69,7 +69,13 @@ export default function ContentDisplayPreference({ }; return ( -
+

{i18n('contentDisplayPreference.title', title)}

diff --git a/src/i18n/messages/all.ar.json b/src/i18n/messages/all.ar.json index 624aba2e07..87404538d2 100644 --- a/src/i18n/messages/all.ar.json +++ b/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": "أعمدة التصفية", diff --git a/src/i18n/messages/all.de.json b/src/i18n/messages/all.de.json index 4a8fd3bf9c..b6c5549e90 100644 --- a/src/i18n/messages/all.de.json +++ b/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", diff --git a/src/i18n/messages/all.en-GB.json b/src/i18n/messages/all.en-GB.json index a2ff3305fd..dd45937e1b 100644 --- a/src/i18n/messages/all.en-GB.json +++ b/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", diff --git a/src/i18n/messages/all.en.json b/src/i18n/messages/all.en.json index 8987f49208..8187003788 100644 --- a/src/i18n/messages/all.en.json +++ b/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", diff --git a/src/i18n/messages/all.es.json b/src/i18n/messages/all.es.json index a89191be2f..1c881aa4b2 100644 --- a/src/i18n/messages/all.es.json +++ b/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", diff --git a/src/i18n/messages/all.fr.json b/src/i18n/messages/all.fr.json index 2f6089ff04..c68eff6ad8 100644 --- a/src/i18n/messages/all.fr.json +++ b/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", diff --git a/src/i18n/messages/all.id.json b/src/i18n/messages/all.id.json index 87184a0f3a..85e6c1272f 100644 --- a/src/i18n/messages/all.id.json +++ b/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", diff --git a/src/i18n/messages/all.it.json b/src/i18n/messages/all.it.json index c27609c5d2..aee93f3a9d 100644 --- a/src/i18n/messages/all.it.json +++ b/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", diff --git a/src/i18n/messages/all.ja.json b/src/i18n/messages/all.ja.json index 2cd78e396c..f4bb9b7308 100644 --- a/src/i18n/messages/all.ja.json +++ b/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": "フィルター列", diff --git a/src/i18n/messages/all.ko.json b/src/i18n/messages/all.ko.json index d0af2e87a8..d5917edce4 100644 --- a/src/i18n/messages/all.ko.json +++ b/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": "열 필터링", diff --git a/src/i18n/messages/all.pt-BR.json b/src/i18n/messages/all.pt-BR.json index a187396a75..00b4764fdb 100644 --- a/src/i18n/messages/all.pt-BR.json +++ b/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", diff --git a/src/i18n/messages/all.zh-CN.json b/src/i18n/messages/all.zh-CN.json index 197c1148de..b44c097dc0 100644 --- a/src/i18n/messages/all.zh-CN.json +++ b/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": "筛选列", diff --git a/src/i18n/messages/all.zh-TW.json b/src/i18n/messages/all.zh-TW.json index 91310b26a7..54d9f4c945 100644 --- a/src/i18n/messages/all.zh-TW.json +++ b/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": "篩選欄", diff --git a/src/internal/components/drag-handle/__tests__/drag-handle-button.test.tsx b/src/internal/components/drag-handle/__tests__/drag-handle-button.test.tsx index 13d915ed12..05f15cbe83 100644 --- a/src/internal/components/drag-handle/__tests__/drag-handle-button.test.tsx +++ b/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(); - 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', () => { diff --git a/src/internal/components/drag-handle/button.tsx b/src/internal/components/drag-handle/button.tsx index b048b6887d..03da884862 100644 --- a/src/internal/components/drag-handle/button.tsx +++ b/src/internal/components/drag-handle/button.tsx @@ -58,7 +58,7 @@ const DragHandleButton = forwardRef( // when it is being dragged.
{ isDragGhost: false, isSortingActive: false, dragHandleProps: { + active: false, ariaLabel: `Drag handle ${items[i].label}`, ariaDescribedby: expect.any(String), disabled: false, diff --git a/src/internal/components/sortable-area/index.tsx b/src/internal/components/sortable-area/index.tsx index b2eb82df74..77dc592d4a 100644 --- a/src/internal/components/sortable-area/index.tsx +++ b/src/internal/components/sortable-area/index.tsx @@ -177,6 +177,7 @@ function DraggableItem({ isDragGhost: false, dragHandleProps: { ...dragHandleListeners, + active: isDragging, ariaLabel: joinStrings(dragHandleAriaLabel, itemDefinition.label(item)) ?? '', ariaDescribedby: attributes['aria-describedby'], disabled: attributes['aria-disabled'],