feat: Add aria labels for folder/file icons in S3 resource selector

cloudscape-design · Feb 4, 2025 · c56b7b3 · c56b7b3
1 parent 33c1fcf
commit c56b7b3
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 1 deletion.
diff --git a/src/s3-resource-selector/__tests__/fixtures.ts b/src/s3-resource-selector/__tests__/fixtures.ts
@@ -82,6 +82,8 @@ export const i18nStrings: S3ResourceSelectorProps.I18nStrings = {
   labelRefresh: 'Refresh the data',
   labelModalDismiss: 'Dismiss the modal',
   labelBreadcrumbs: 'S3 navigation',
+  labelIconFolder: 'Folder',
+  labelIconFile: 'File',
 };
 
 export const buckets: ReadonlyArray<S3ResourceSelectorProps.Bucket> = [

diff --git a/src/s3-resource-selector/interfaces.ts b/src/s3-resource-selector/interfaces.ts
@@ -267,6 +267,8 @@ export namespace S3ResourceSelectorProps {
     labelBreadcrumbs?: string;
     labelExpandBreadcrumbs?: string;
     labelClearFilter?: string;
+    labelIconFile?: string;
+    labelIconFolder?: string;
   }
 
   export interface ChangeDetail {

diff --git a/src/s3-resource-selector/s3-modal/__tests__/objects-table.test.tsx b/src/s3-resource-selector/s3-modal/__tests__/objects-table.test.tsx
@@ -99,7 +99,9 @@ test('Renders correct table content', async () => {
 
 test('renders separate icons for folder and file', async () => {
   const wrapper = await renderTable(<ObjectsTable {...defaultProps} />);
+  expect(wrapper.findBodyCell(1, 2)!.findIcon()!.getElement()).toHaveAccessibleName('Folder');
   expect(wrapper.findBodyCell(1, 2)!.findIcon()!.getElement()).toContainHTML(getIconHTML('folder'));
+  expect(wrapper.findBodyCell(2, 2)!.findIcon()!.getElement()).toHaveAccessibleName('File');
   expect(wrapper.findBodyCell(2, 2)!.findIcon()!.getElement()).toContainHTML(getIconHTML('file'));
 });
 

diff --git a/src/s3-resource-selector/s3-modal/objects-table.tsx b/src/s3-resource-selector/s3-modal/objects-table.tsx
@@ -3,6 +3,7 @@
 import React from 'react';
 
 import { useInternalI18n } from '../../i18n/context';
+import { IconProps } from '../../icon/interfaces';
 import InternalIcon from '../../icon/internal';
 import { ForwardFocusRef } from '../../internal/hooks/forward-focus';
 import InternalLink from '../../link/internal';
@@ -92,9 +93,12 @@ export function ObjectsTable({
           sortingField: 'Key',
           cell: item => {
             const isClickable = item.IsFolder || includes(selectableItemsTypes, 'versions');
+            const iconProps: IconProps = item.IsFolder
+              ? { name: 'folder', ariaLabel: i18nStrings?.labelIconFolder }
+              : { name: 'file', ariaLabel: i18nStrings?.labelIconFile };
             return (
               <>
-                <InternalIcon name={item.IsFolder ? 'folder' : 'file'} />{' '}
+                <InternalIcon {...iconProps} />{' '}
                 {isClickable ? (
                   <InternalLink onFollow={() => item.Key && onDrilldown(item)} variant="link">
                     {item.Key}