diff --git a/src/collection-preferences/content-display/index.tsx b/src/collection-preferences/content-display/index.tsx index 173522ee6d..21a4ef90a1 100644 --- a/src/collection-preferences/content-display/index.tsx +++ b/src/collection-preferences/content-display/index.tsx @@ -69,105 +69,107 @@ export default function ContentDisplayPreference({ }; return ( -
-

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

-

- {i18n('contentDisplayPreference.description', description)} -

+
+
+

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

+

+ {i18n('contentDisplayPreference.description', description)} +

- {/* Filter input */} - {enableColumnFiltering && ( -
- setColumnFilteringText(detail.filteringText)} - countText={i18n( - 'contentDisplayPreference.i18nStrings.columnFilteringCountText', - i18nStrings?.columnFilteringCountText - ? i18nStrings?.columnFilteringCountText(sortedAndFilteredOptions.length) - : undefined, - format => format({ count: sortedAndFilteredOptions.length }) - )} - /> -
- )} - - {/* No match */} - {sortedAndFilteredOptions.length === 0 && ( -
- - - {i18n( - 'contentDisplayPreference.i18nStrings.columnFilteringNoMatchText', - i18nStrings?.columnFilteringNoMatchText + {/* Filter input */} + {enableColumnFiltering && ( +
+ - setColumnFilteringText('')}> - {i18n( + filteringClearAriaLabel={i18n( 'contentDisplayPreference.i18nStrings.columnFilteringClearFilterText', i18nStrings?.columnFilteringClearFilterText )} - - -
- )} + onChange={({ detail }) => setColumnFilteringText(detail.filteringText)} + countText={i18n( + 'contentDisplayPreference.i18nStrings.columnFilteringCountText', + i18nStrings?.columnFilteringCountText + ? i18nStrings?.columnFilteringCountText(sortedAndFilteredOptions.length) + : undefined, + format => format({ count: sortedAndFilteredOptions.length }) + )} + /> +
+ )} + + {/* No match */} + {sortedAndFilteredOptions.length === 0 && ( +
+ + + {i18n( + 'contentDisplayPreference.i18nStrings.columnFilteringNoMatchText', + i18nStrings?.columnFilteringNoMatchText + )} + + setColumnFilteringText('')}> + {i18n( + 'contentDisplayPreference.i18nStrings.columnFilteringClearFilterText', + i18nStrings?.columnFilteringClearFilterText + )} + + +
+ )} - ({ - id: item.id, - content: , - announcementLabel: item.label, - })} - disableItemPaddings={true} - sortable={true} - sortDisabled={columnFilteringText.trim().length > 0} - onSortingChange={({ detail: { items } }) => { - onChange(items); - }} - ariaDescribedby={descriptionId} - ariaLabelledby={titleId} - i18nStrings={{ - liveAnnouncementDndStarted: i18n( - 'contentDisplayPreference.liveAnnouncementDndStarted', - liveAnnouncementDndStarted, - formatDndStarted - ), - liveAnnouncementDndItemReordered: i18n( - 'contentDisplayPreference.liveAnnouncementDndItemReordered', - liveAnnouncementDndItemReordered, - formatDndItemReordered - ), - liveAnnouncementDndItemCommitted: i18n( - 'contentDisplayPreference.liveAnnouncementDndItemCommitted', - liveAnnouncementDndItemCommitted, - formatDndItemCommitted - ), - liveAnnouncementDndDiscarded: i18n( - 'contentDisplayPreference.liveAnnouncementDndDiscarded', - liveAnnouncementDndDiscarded - ), - dragHandleAriaLabel: i18n('contentDisplayPreference.dragHandleAriaLabel', dragHandleAriaLabel), - dragHandleAriaDescription: i18n( - 'contentDisplayPreference.dragHandleAriaDescription', - dragHandleAriaDescription - ), - }} - /> + ({ + id: item.id, + content: , + announcementLabel: item.label, + })} + disableItemPaddings={true} + sortable={true} + sortDisabled={columnFilteringText.trim().length > 0} + onSortingChange={({ detail: { items } }) => { + onChange(items); + }} + ariaDescribedby={descriptionId} + ariaLabelledby={titleId} + i18nStrings={{ + liveAnnouncementDndStarted: i18n( + 'contentDisplayPreference.liveAnnouncementDndStarted', + liveAnnouncementDndStarted, + formatDndStarted + ), + liveAnnouncementDndItemReordered: i18n( + 'contentDisplayPreference.liveAnnouncementDndItemReordered', + liveAnnouncementDndItemReordered, + formatDndItemReordered + ), + liveAnnouncementDndItemCommitted: i18n( + 'contentDisplayPreference.liveAnnouncementDndItemCommitted', + liveAnnouncementDndItemCommitted, + formatDndItemCommitted + ), + liveAnnouncementDndDiscarded: i18n( + 'contentDisplayPreference.liveAnnouncementDndDiscarded', + liveAnnouncementDndDiscarded + ), + dragHandleAriaLabel: i18n('contentDisplayPreference.dragHandleAriaLabel', dragHandleAriaLabel), + dragHandleAriaDescription: i18n( + 'contentDisplayPreference.dragHandleAriaDescription', + dragHandleAriaDescription + ), + }} + /> +
); } 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'],