[terra-pills] Fixed JAWS(SR) providing navigation instructions on empty pill box

packages/terra-framework-docs/CHANGELOG.md

@@ -3,6 +3,7 @@
 ## Unreleased
 
 * Changed
+  * Changed terra-pills example to announce removed state of pills.
   * Updated examples and tests for `terra-folder-tree`.
 
 ## 1.50.0 - (December 5, 2023)

packages/terra-framework-docs/src/terra-dev-site/doc/pills/example/AppliedFiltersExample.jsx

@@ -32,7 +32,6 @@ const AppliedFiltersExample = () => {
   };
 
   const appliedFiltersLabel = 'Applied Filters:';
-  const appliedFiltersLabelId = 'terra-filter-pills-example-applied-filters-label';
 
   return (
     <>
@@ -41,7 +40,6 @@ const AppliedFiltersExample = () => {
           <div className={cx('toolbar-flex-container')}>
             <div className={cx('toolbar-flex-item-start')}>
               <Text
-                id={appliedFiltersLabelId}
                 className={cx('applied-filters-label')}
               >
                 {appliedFiltersLabel}
@@ -50,7 +48,6 @@ const AppliedFiltersExample = () => {
             <div className={cx('toolbar-flex-item-fill')}>
               <FilterPills
                 ariaLabel={appliedFiltersLabel}
-                ariaLabelledBy={appliedFiltersLabelId}
                 isCollapsible
                 onRemove={handleOnRemove}
               >

packages/terra-pills/CHANGELOG.md

@@ -3,8 +3,10 @@
 ## Unreleased
 
 * Fixed
+  * Fixed jaws providing navigation instructions on empty pill box.
   * Fixed bug to set focus on previous pill when delete key is pressed and a pill is deleted.
 
+
 ## 1.15.0 - (November 23, 2023)
 
 * Changed

packages/terra-pills/src/FilterPills.jsx

@@ -94,7 +94,6 @@ const FilterPills = (props) => {
   const isPillDeleted = useRef(false);
   const isRollUpRemoved = useRef(false);
   const removedLabel = useRef();
-  const containerHint = useRef(ariaLabel);
 
   // Identifies the number of pills that needs to be hidden/rolled up
   const generateRollUp = useCallback(() => {
@@ -379,7 +378,7 @@ const FilterPills = (props) => {
   if (isCollapsible && (rollUpCount > 0) && isCollapsed) {
     pillGroupInteractionHint += `, ${intl.formatMessage({ id: 'Terra.pills.hint.rollupNotVisible' }, { pillsNotVisibleCount: rollUpCount })}`;
   } else if (isCollapsible && !isCollapsed && showRollupPillInteraction) {
-    removedPillInteractionHint = intl.formatMessage({ id: 'Terra.pills.hint.rollupVisible' });
+    pillGroupInteractionHint = intl.formatMessage({ id: 'Terra.pills.hint.rollupVisible' });
   }
   if (pillRemoved) {
     removedPillInteractionHint = intl.formatMessage({ id: 'Terra.pills.hint.wasRemoved' }, { pillLabelName: removedLabel.current });
@@ -398,24 +397,28 @@ const FilterPills = (props) => {
     return reducedArray;
   };
 
+  const ariaLabelHint = (!ariaLabelledBy) ? `${removedPillInteractionHint}, ${ariaLabel}` : undefined;
+  const ariaAttrs = (React.Children.count(children)) ? {
+    'aria-live': 'assertive',
+    'aria-label': ariaLabelHint,
+    'aria-labelledby': ariaLabelledBy,
+    'aria-describedby': pillGroupAriaDescribedBy,
+    role: 'list',
+    tabIndex: containerTabindex,
+  } : { role: 'group' };
+
   return (
     <div
       {...customProps}
       {...filterPillsProps}
-      aria-live="assertive"
-      aria-label={!ariaLabelledBy ? `${removedPillInteractionHint} ${containerHint.current}` : undefined}
-      aria-labelledby={ariaLabelledBy}
-      aria-describedby={pillGroupAriaDescribedBy}
+      {...ariaAttrs}
       className={pillListClassNames}
       ref={filterPillsRef}
-      role="list"
-      tabIndex={containerTabindex}
     >
       <VisuallyHiddenText
         aria-live="polite"
         id={pillGroupInteractionHintID}
         text={pillGroupInteractionHint}
-        aria-hidden="true"
       />
       {children ? renderChildren(children) : []}
       {(isCollapsible && rollUpCount > 0) && (