awsui-screenreader-text

Author: pan-kot

src/__integ__/__snapshots__/themes.test.ts.snap

@@ -510,6 +510,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "motion-duration-avatar-gen-ai-gradient": "3600ms",
   "motion-duration-avatar-loading-dots": "1200ms",
   "motion-duration-complex": "270ms",
+  "motion-duration-expand-toggle": "135ms",
+  "motion-duration-expandable-section": "180ms",
   "motion-duration-expressive": "180ms",
   "motion-duration-extra-slow": "270ms",
   "motion-duration-fast": "90ms",
@@ -528,6 +530,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "motion-duration-transition-show-quick": "90ms",
   "motion-easing-avatar-gen-ai-gradient": "cubic-bezier(0.7, 0, 0.3, 1)",
   "motion-easing-ease-out-quart": "cubic-bezier(0.165, 0.84, 0.44, 1)",
+  "motion-easing-expand-toggle": "cubic-bezier(0.165, 0.84, 0.44, 1)",
+  "motion-easing-expandable-section": "ease-out",
   "motion-easing-expressive": "ease-out",
   "motion-easing-refresh-only-a": "cubic-bezier(0, 0, 0, 1)",
   "motion-easing-refresh-only-b": "cubic-bezier(1, 0, 0.83, 1)",
@@ -1175,6 +1179,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "motion-duration-avatar-gen-ai-gradient": "3600ms",
   "motion-duration-avatar-loading-dots": "1200ms",
   "motion-duration-complex": "270ms",
+  "motion-duration-expand-toggle": "135ms",
+  "motion-duration-expandable-section": "180ms",
   "motion-duration-expressive": "180ms",
   "motion-duration-extra-slow": "270ms",
   "motion-duration-fast": "90ms",
@@ -1193,6 +1199,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "motion-duration-transition-show-quick": "90ms",
   "motion-easing-avatar-gen-ai-gradient": "cubic-bezier(0.7, 0, 0.3, 1)",
   "motion-easing-ease-out-quart": "cubic-bezier(0.165, 0.84, 0.44, 1)",
+  "motion-easing-expand-toggle": "cubic-bezier(0.165, 0.84, 0.44, 1)",
+  "motion-easing-expandable-section": "ease-out",
   "motion-easing-expressive": "ease-out",
   "motion-easing-refresh-only-a": "cubic-bezier(0, 0, 0, 1)",
   "motion-easing-refresh-only-b": "cubic-bezier(1, 0, 0.83, 1)",
@@ -1840,6 +1848,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "motion-duration-avatar-gen-ai-gradient": "3600ms",
   "motion-duration-avatar-loading-dots": "1200ms",
   "motion-duration-complex": "270ms",
+  "motion-duration-expand-toggle": "135ms",
+  "motion-duration-expandable-section": "180ms",
   "motion-duration-expressive": "180ms",
   "motion-duration-extra-slow": "270ms",
   "motion-duration-fast": "90ms",
@@ -1858,6 +1868,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "motion-duration-transition-show-quick": "90ms",
   "motion-easing-avatar-gen-ai-gradient": "cubic-bezier(0.7, 0, 0.3, 1)",
   "motion-easing-ease-out-quart": "cubic-bezier(0.165, 0.84, 0.44, 1)",
+  "motion-easing-expand-toggle": "cubic-bezier(0.165, 0.84, 0.44, 1)",
+  "motion-easing-expandable-section": "ease-out",
   "motion-easing-expressive": "ease-out",
   "motion-easing-refresh-only-a": "cubic-bezier(0, 0, 0, 1)",
   "motion-easing-refresh-only-b": "cubic-bezier(1, 0, 0.83, 1)",
@@ -2505,6 +2517,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "motion-duration-avatar-gen-ai-gradient": "0ms",
   "motion-duration-avatar-loading-dots": "0ms",
   "motion-duration-complex": "0ms",
+  "motion-duration-expand-toggle": "0ms",
+  "motion-duration-expandable-section": "0ms",
   "motion-duration-expressive": "0ms",
   "motion-duration-extra-slow": "0ms",
   "motion-duration-fast": "0ms",
@@ -2523,6 +2537,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "motion-duration-transition-show-quick": "0ms",
   "motion-easing-avatar-gen-ai-gradient": "cubic-bezier(0.7, 0, 0.3, 1)",
   "motion-easing-ease-out-quart": "cubic-bezier(0.165, 0.84, 0.44, 1)",
+  "motion-easing-expand-toggle": "cubic-bezier(0.165, 0.84, 0.44, 1)",
+  "motion-easing-expandable-section": "ease-out",
   "motion-easing-expressive": "ease-out",
   "motion-easing-refresh-only-a": "cubic-bezier(0, 0, 0, 1)",
   "motion-easing-refresh-only-b": "cubic-bezier(1, 0, 0.83, 1)",
@@ -3170,6 +3186,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "motion-duration-avatar-gen-ai-gradient": "3600ms",
   "motion-duration-avatar-loading-dots": "1200ms",
   "motion-duration-complex": "250ms",
+  "motion-duration-expand-toggle": "135ms",
+  "motion-duration-expandable-section": "180ms",
   "motion-duration-expressive": "165ms",
   "motion-duration-extra-slow": "270ms",
   "motion-duration-fast": "90ms",
@@ -3188,6 +3206,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "motion-duration-transition-show-quick": "90ms",
   "motion-easing-avatar-gen-ai-gradient": "cubic-bezier(0.7, 0, 0.3, 1)",
   "motion-easing-ease-out-quart": "cubic-bezier(0.165, 0.84, 0.44, 1)",
+  "motion-easing-expand-toggle": "cubic-bezier(0.165, 0.84, 0.44, 1)",
+  "motion-easing-expandable-section": "ease-out",
   "motion-easing-expressive": "cubic-bezier(0.84, 0, 0.16, 1)",
   "motion-easing-refresh-only-a": "cubic-bezier(0, 0, 0, 1)",
   "motion-easing-refresh-only-b": "cubic-bezier(1, 0, 0.83, 1)",
@@ -3835,6 +3855,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "motion-duration-avatar-gen-ai-gradient": "3600ms",
   "motion-duration-avatar-loading-dots": "1200ms",
   "motion-duration-complex": "250ms",
+  "motion-duration-expand-toggle": "135ms",
+  "motion-duration-expandable-section": "180ms",
   "motion-duration-expressive": "165ms",
   "motion-duration-extra-slow": "270ms",
   "motion-duration-fast": "90ms",
@@ -3853,6 +3875,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "motion-duration-transition-show-quick": "90ms",
   "motion-easing-avatar-gen-ai-gradient": "cubic-bezier(0.7, 0, 0.3, 1)",
   "motion-easing-ease-out-quart": "cubic-bezier(0.165, 0.84, 0.44, 1)",
+  "motion-easing-expand-toggle": "cubic-bezier(0.165, 0.84, 0.44, 1)",
+  "motion-easing-expandable-section": "ease-out",
   "motion-easing-expressive": "cubic-bezier(0.84, 0, 0.16, 1)",
   "motion-easing-refresh-only-a": "cubic-bezier(0, 0, 0, 1)",
   "motion-easing-refresh-only-b": "cubic-bezier(1, 0, 0.83, 1)",
@@ -4500,6 +4524,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "motion-duration-avatar-gen-ai-gradient": "3600ms",
   "motion-duration-avatar-loading-dots": "1200ms",
   "motion-duration-complex": "250ms",
+  "motion-duration-expand-toggle": "135ms",
+  "motion-duration-expandable-section": "180ms",
   "motion-duration-expressive": "165ms",
   "motion-duration-extra-slow": "270ms",
   "motion-duration-fast": "90ms",
@@ -4518,6 +4544,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "motion-duration-transition-show-quick": "90ms",
   "motion-easing-avatar-gen-ai-gradient": "cubic-bezier(0.7, 0, 0.3, 1)",
   "motion-easing-ease-out-quart": "cubic-bezier(0.165, 0.84, 0.44, 1)",
+  "motion-easing-expand-toggle": "cubic-bezier(0.165, 0.84, 0.44, 1)",
+  "motion-easing-expandable-section": "ease-out",
   "motion-easing-expressive": "cubic-bezier(0.84, 0, 0.16, 1)",
   "motion-easing-refresh-only-a": "cubic-bezier(0, 0, 0, 1)",
   "motion-easing-refresh-only-b": "cubic-bezier(1, 0, 0.83, 1)",
@@ -5165,6 +5193,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "motion-duration-avatar-gen-ai-gradient": "3600ms",
   "motion-duration-avatar-loading-dots": "1200ms",
   "motion-duration-complex": "250ms",
+  "motion-duration-expand-toggle": "135ms",
+  "motion-duration-expandable-section": "180ms",
   "motion-duration-expressive": "165ms",
   "motion-duration-extra-slow": "270ms",
   "motion-duration-fast": "90ms",
@@ -5183,6 +5213,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "motion-duration-transition-show-quick": "90ms",
   "motion-easing-avatar-gen-ai-gradient": "cubic-bezier(0.7, 0, 0.3, 1)",
   "motion-easing-ease-out-quart": "cubic-bezier(0.165, 0.84, 0.44, 1)",
+  "motion-easing-expand-toggle": "cubic-bezier(0.165, 0.84, 0.44, 1)",
+  "motion-easing-expandable-section": "ease-out",
   "motion-easing-expressive": "cubic-bezier(0.84, 0, 0.16, 1)",
   "motion-easing-refresh-only-a": "cubic-bezier(0, 0, 0, 1)",
   "motion-easing-refresh-only-b": "cubic-bezier(1, 0, 0.83, 1)",

src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap

@@ -349,6 +349,7 @@ exports[`test-utils selectors 1`] = `
     "awsui_application_1fcus",
     "awsui_axis-label--x_f0fot",
     "awsui_axis-label--y_f0fot",
+    "awsui_body_dgs8z",
     "awsui_button-trigger_18eso",
     "awsui_button_m5h9f",
     "awsui_chart-filter_1px7g",
@@ -359,8 +360,10 @@ exports[`test-utils selectors 1`] = `
     "awsui_dropdown_qwoo0",
     "awsui_filter-container_z5mul",
     "awsui_filtering-match-highlight_1p2cx",
+    "awsui_footer_dgs8z",
     "awsui_handle_sdha6",
     "awsui_has-background_15o6u",
+    "awsui_header_dgs8z",
     "awsui_highlighted_15o6u",
     "awsui_inner-list-item_10ipo",
     "awsui_key_10ipo",

src/expandable-section/internal.tsx

@@ -109,7 +109,7 @@ export default function InternalExpandableSection({
         <ExpandableSectionHeader
           id={triggerControlId}
           descriptionId={descriptionId}
-          className={clsx(styles.header, styles[`header-${baseVariant}`])}
+          className={clsx(styles.header, styles[`header-${baseVariant}`], 'awsui-screenreader-text')}
           variant={baseVariant}
           expanded={!!expanded}
           header={header}

src/internal/components/chart-popover/index.tsx

@@ -141,7 +141,7 @@ function ChartPopover(
           <PopoverBody
             dismissButton={dismissButton}
             dismissAriaLabel={dismissAriaLabel}
-            header={<div className={testClasses.header}>{title}</div>}
+            header={<span className={testClasses.header}>{title}</span>}
             onDismiss={onDismiss}
             overflowVisible="content"
             className={styles['popover-body']}

src/internal/components/chart-series-details/index.tsx

@@ -123,7 +123,7 @@ function SubItems({
           className={clsx(
             styles['inner-list-item'],
             styles['key-value-pair'],
-            (expanded || !expandable) && styles.announced
+            (expanded || !expandable) && 'awsui-screenreader-text'
           )}
         >
           <span className={styles.key}>{key}</span>
@@ -168,7 +168,7 @@ function ExpandableSeries({
 function NonExpandableSeries({ itemKey, value, subItems, markerType, color }: ListItemProps) {
   return (
     <>
-      <div className={clsx(styles['key-value-pair'], styles.announced)}>
+      <div className={clsx(styles['key-value-pair'], 'awsui-screenreader-text')}>
         <div className={styles.key}>
           {markerType && color && <ChartSeriesMarker type={markerType} color={color} />}
           <span>{itemKey}</span>

src/internal/components/chart-series-details/series-details-text.ts

@@ -1,12 +1,8 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import expandabeleSectionHeaderStyles from '../../../expandable-section/styles.css.js';
-import styles from './styles.css.js';
 
 export default function getSeriesDetailsText(element: HTMLElement) {
-  const elementsWithText = Array.from(
-    element.querySelectorAll(`.${styles.announced},.${expandabeleSectionHeaderStyles.header}`)
-  );
+  const elementsWithText = Array.from(element.querySelectorAll('awsui-screenreader-text'));
   return elementsWithText
     .map(element => {
       if (element instanceof HTMLElement) {

src/internal/components/chart-series-details/styles.scss

@@ -88,7 +88,3 @@ $font-weight-bold: awsui.$font-weight-heading-s;
 .full-width {
   inline-size: 100%;
 }
-
-.announced {
-  /* Used by getSeriesDetailText to select text to be announced by screen readers */
-}