Merge branch 'main' into file-upload-multiple

cloudscape-design · Aug 10, 2023 · bf4f41b · bf4f41b
2 parents fbbcc4f + 974be84
commit bf4f41b
Show file tree

Hide file tree

Showing 11 changed files with 88 additions and 20 deletions.
diff --git a/src/__tests__/__snapshots__/documenter.test.ts.snap b/src/__tests__/__snapshots__/documenter.test.ts.snap
@@ -6522,6 +6522,7 @@ A flash message object contains the following properties:
 When a user clicks on this button the \`onDismiss\` handler is called.
 * \`dismissLabel\` (string) - Specifies an \`aria-label\` for to the dismiss icon button for improved accessibility.
 * \`statusIconAriaLabel\` (string) - Specifies an \`aria-label\` for to the status icon for improved accessibility.
+If not provided, \`i18nStrings.{type}IconAriaLabel\` will be used as a fallback.
 * \`ariaRole\` (string) - For flash messages added after page load, specifies how this message is communicated to assistive
 technology. Use \\"status\\" for status updates or informational content. Use \\"alert\\" for important messages that need the
 user's attention.

diff --git a/src/container/styles.scss b/src/container/styles.scss
@@ -159,7 +159,7 @@
   &.with-paddings {
     padding: shared.$header-padding;
     &.header-variant-cards {
-      padding: awsui.$space-scaled-s awsui.$space-container-horizontal;
+      padding: awsui.$space-container-header-top awsui.$space-container-horizontal;
     }
   }
 

diff --git a/src/expandable-section/styles.scss b/src/expandable-section/styles.scss
@@ -109,6 +109,10 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
     padding-bottom: awsui.$space-container-header-bottom;
     padding-right: container.$header-padding-horizontal;
 
+    &:not(.wrapper-expanded) {
+      // Equal top and bottom padding so standalone header has vertical symmetry.
+      padding-bottom: awsui.$space-container-header-top;
+    }
     &.header-deprecated {
       padding-left: container.$header-padding-horizontal;
     }

diff --git a/src/flashbar/__tests__/collapsible.test.tsx b/src/flashbar/__tests__/collapsible.test.tsx
@@ -301,6 +301,31 @@ describe('Collapsible Flashbar', () => {
         expect(innerCounter!.querySelector(`[title="${ariaLabel}"]`)).toBeTruthy();
       }
     });
+
+    test.each([['success'], ['error'], ['info'], ['warning'], ['in-progress']] as FlashbarProps.Type[][])(
+      'item icon has aria-label from i18nStrings when no statusIconAriaLabel provided: type %s',
+      type => {
+        const wrapper = renderFlashbar({
+          i18nStrings: {
+            successIconAriaLabel: 'success',
+            errorIconAriaLabel: 'error',
+            infoIconAriaLabel: 'info',
+            warningIconAriaLabel: 'warning',
+            inProgressIconAriaLabel: 'in-progress',
+          },
+          items: [
+            {
+              header: 'The header',
+              content: 'The content',
+              type: type === 'in-progress' ? 'info' : type,
+              loading: type === 'in-progress',
+            },
+          ],
+        });
+
+        expect(wrapper.findItems()[0].find('[role="img"]')?.getElement()).toHaveAccessibleName(type);
+      }
+    );
   });
 
   describe('Sticky', () => {

diff --git a/src/flashbar/__tests__/flashbar.test.tsx b/src/flashbar/__tests__/flashbar.test.tsx
@@ -343,7 +343,7 @@ describe('Flashbar component', () => {
       });
 
       test('icon has an aria-label when statusIconAriaLabel is provided', () => {
-        const iconLabel = 'Warning';
+        const iconLabel = 'Info';
         const wrapper = createFlashbarWrapper(
           <Flashbar
             items={[
@@ -357,12 +357,37 @@ describe('Flashbar component', () => {
           />
         );
 
-        expect(wrapper.findItems()[0].find(`:scope [aria-label]`)?.getElement()).toHaveAttribute(
-          'aria-label',
-          iconLabel
-        );
+        expect(wrapper.findItems()[0].find('[role="img"]')?.getElement()).toHaveAccessibleName(iconLabel);
       });
 
+      test.each([['success'], ['error'], ['info'], ['warning'], ['in-progress']] as FlashbarProps.Type[][])(
+        'icon has aria-label from i18nStrings when no statusIconAriaLabel provided: type %s',
+        type => {
+          const wrapper = createFlashbarWrapper(
+            <Flashbar
+              i18nStrings={{
+                successIconAriaLabel: 'success',
+                errorIconAriaLabel: 'error',
+                infoIconAriaLabel: 'info',
+                warningIconAriaLabel: 'warning',
+                inProgressIconAriaLabel: 'in-progress',
+              }}
+              items={[
+                {
+                  header: 'The header',
+                  content: 'The content',
+                  action: <Button>Click me</Button>,
+                  type: type === 'in-progress' ? 'info' : type,
+                  loading: type === 'in-progress',
+                },
+              ]}
+            />
+          );
+
+          expect(wrapper.findItems()[0].find('[role="img"]')?.getElement()).toHaveAccessibleName(type);
+        }
+      );
+
       describe('Accessibility', () => {
         test('renders items in an unordered list', () => {
           const flashbar = createFlashbarWrapper(

diff --git a/src/flashbar/collapsible-flashbar.tsx b/src/flashbar/collapsible-flashbar.tsx
@@ -277,6 +277,7 @@ export default function CollapsibleFlashbar({ items, ...restProps }: FlashbarPro
                     key={getItemId(item)}
                     ref={shouldUseStandardAnimation(item, index) ? transitionRootElement : undefined}
                     transitionState={shouldUseStandardAnimation(item, index) ? state : undefined}
+                    i18nStrings={iconAriaLabels}
                     {...item}
                   />
                 )}

diff --git a/src/flashbar/flash.tsx b/src/flashbar/flash.tsx
@@ -68,6 +68,7 @@ export const focusFlashById = throttle(
 export interface FlashProps extends FlashbarProps.MessageDefinition {
   className: string;
   transitionState?: string;
+  i18nStrings?: FlashbarProps.I18nStrings;
 }
 
 export const Flash = React.forwardRef(
@@ -87,6 +88,7 @@ export const Flash = React.forwardRef(
       className,
       transitionState,
       ariaRole,
+      i18nStrings,
       type = 'info',
     }: FlashProps,
     ref: React.Ref<HTMLDivElement>
@@ -153,7 +155,10 @@ export const Flash = React.forwardRef(
             <div
               className={clsx(styles['flash-icon'], styles['flash-text'])}
               role="img"
-              aria-label={statusIconAriaLabel}
+              aria-label={
+                statusIconAriaLabel ||
+                i18nStrings?.[`${loading || type === 'in-progress' ? 'inProgress' : type}IconAriaLabel`]
+              }
             >
               {icon}
             </div>

diff --git a/src/flashbar/interfaces.ts b/src/flashbar/interfaces.ts
@@ -50,6 +50,7 @@ export interface FlashbarProps extends BaseComponentProps {
    * When a user clicks on this button the `onDismiss` handler is called.
    * * `dismissLabel` (string) - Specifies an `aria-label` for to the dismiss icon button for improved accessibility.
    * * `statusIconAriaLabel` (string) - Specifies an `aria-label` for to the status icon for improved accessibility.
+   * If not provided, `i18nStrings.{type}IconAriaLabel` will be used as a fallback.
    * * `ariaRole` (string) - For flash messages added after page load, specifies how this message is communicated to assistive
    * technology. Use "status" for status updates or informational content. Use "alert" for important messages that need the
    * user's attention.

diff --git a/src/flashbar/non-collapsible-flashbar.tsx b/src/flashbar/non-collapsible-flashbar.tsx
@@ -22,6 +22,13 @@ export default function NonCollapsibleFlashbar({ items, i18nStrings, ...restProp
 
   const i18n = useInternalI18n('flashbar');
   const ariaLabel = i18n('i18nStrings.ariaLabel', i18nStrings?.ariaLabel);
+  const iconAriaLabels = {
+    errorIconAriaLabel: i18n('i18nStrings.errorIconAriaLabel', i18nStrings?.errorIconAriaLabel),
+    inProgressIconAriaLabel: i18n('i18nStrings.inProgressIconAriaLabel', i18nStrings?.inProgressIconAriaLabel),
+    infoIconAriaLabel: i18n('i18nStrings.infoIconAriaLabel', i18nStrings?.infoIconAriaLabel),
+    successIconAriaLabel: i18n('i18nStrings.successIconAriaLabel', i18nStrings?.successIconAriaLabel),
+    warningIconAriaLabel: i18n('i18nStrings.warningIconAriaLabel', i18nStrings?.warningIconAriaLabel),
+  };
 
   /**
    * All the flash items should have ids so we can identify which DOM element is being
@@ -99,6 +106,7 @@ export default function NonCollapsibleFlashbar({ items, i18nStrings, ...restProp
         key={key}
         ref={transitionRootElement}
         transitionState={transitionState}
+        i18nStrings={iconAriaLabels}
         {...item}
       />
     );

diff --git a/src/header/internal.tsx b/src/header/internal.tsx
@@ -55,14 +55,7 @@ export default function InternalHeader({
       ref={__internalRootRef}
     >
       <div className={clsx(styles.main, styles[`main-variant-${variantOverride}`], isRefresh && styles.refresh)}>
-        <div
-          className={clsx(
-            styles.title,
-            styles[`title-variant-${variantOverride}`],
-            isRefresh && styles.refresh,
-            description && [styles[`root-has-description`]]
-          )}
-        >
+        <div className={clsx(styles.title, styles[`title-variant-${variantOverride}`], isRefresh && styles.refresh)}>
           <HeadingTag className={clsx(styles.heading, styles[`heading-variant-${variantOverride}`])}>
             <span
               {...{ [DATA_ATTR_FUNNEL_KEY]: FUNNEL_KEY_SUBSTEP_NAME }}

diff --git a/src/header/styles.scss b/src/header/styles.scss
@@ -6,6 +6,10 @@
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles' as styles;
 
+@function space-heading-button-diff($heading-height) {
+  @return calc((#{awsui.$size-vertical-input} - #{$heading-height}) / 2);
+}
+
 .root {
   @include styles.styles-reset();
   cursor: inherit;
@@ -44,7 +48,7 @@
   &.refresh {
     display: flex;
     flex-direction: column;
-    // Can't use justify-content: center because it won't align with configurable dashboard handle icon
+    // Can't use justify-content: center because it won't align with configurable dashboard fixed handle icon
   }
 
   &-variant-h1 {
@@ -106,22 +110,23 @@
 
   &-variant-h1 {
     font-size: awsui.$font-heading-xl-size;
-    // Use padding rather than center align so that all headers of the same size start at the same height in the container,
+    // Use padding rather than center align with min height to avoid having extra bottom space when no actions are present.
+    // Having top padding always present ensures that all headers of the same variant start at the same height in the container,
     // whether there are buttons present or not; otherwise configurable dashboard handles are misaligned.
     &.refresh {
-      padding-top: calc((#{awsui.$size-vertical-input} - #{awsui.$font-heading-xl-line-height}) / 2);
+      padding-top: space-heading-button-diff(awsui.$font-heading-xl-line-height);
     }
   }
   &-variant-h2 {
     font-size: awsui.$font-heading-l-size;
     &.refresh {
-      padding-top: calc((#{awsui.$size-vertical-input} - #{awsui.$font-heading-l-line-height}) / 2);
+      padding-top: space-heading-button-diff(awsui.$font-heading-l-line-height);
     }
   }
   &-variant-h3 {
     font-size: awsui.$font-heading-m-size;
     &.refresh {
-      padding-top: calc((#{awsui.$size-vertical-input} - #{awsui.$font-heading-m-line-height}) / 2);
+      padding-top: space-heading-button-diff(awsui.$font-heading-m-line-height);
     }
   }
   &-variant-h2:not(.refresh),