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'],