fix(filter-panel) Fixing the placement/display of the clear button | … (

carbon-design-system#10812) * fix(filter-panel) Fixing the placement/display of the clear button | Fixing the focus handling of the mobile version's popup window Co-authored-by: Matthew Oliveira <m4olivei@gmail.com> Co-authored-by: Anna Wen <54281166+annawen1@users.noreply.github.com> Co-authored-by: Ariella Gilmore <ariellalgilmore@gmail.com> Co-authored-by: ibmdotcom-bot <digdes@us.ibm.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com> Co-authored-by: John Kaeser <jakaeser44@gmail.com> Co-authored-by: Pauline <pauline.judge@lullabot.com> Co-authored-by: Sangeetha Babu <sangeetha9223@gmail.com> Co-authored-by: Sangeetha Babu <sangeetha@Sangeethas-MBP.bbrouter> Co-authored-by: Sangeetha Babu <sangeetha@Sangeethas-MacBook-Pro.local>
jkaeser · Sep 15, 2023 · 194f9d0 · 194f9d0
1 parent db17bd9
commit 194f9d0
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 61 deletions.
diff --git a/packages/styles/scss/components/filter-panel/_filter-panel.scss b/packages/styles/scss/components/filter-panel/_filter-panel.scss
@@ -134,7 +134,8 @@
 
     &:not([has-selections]) {
       .#{$prefix}--clear {
-        display: none;
+        color: $disabled-02;
+        cursor: not-allowed;
       }
     }
     @include carbon--breakpoint-down('lg') {

diff --git a/packages/web-components/src/components/expressive-modal/expressive-modal.ts b/packages/web-components/src/components/expressive-modal/expressive-modal.ts
@@ -42,52 +42,6 @@ const FOLLOWING =
 const WITHIN = Node.DOCUMENT_POSITION_CONTAINED_BY;
 /* eslint-enable no-bitwise */
 
-/**
- * Tries to focus on the given elements and bails out if one of the is successful.
- *
- * @param elems The elements.
- * @param reverse `true` to go through the list in reverse order.
- * @param fallback element to focus on if none
- * @returns `true` if one of the attempts is successful, `false` otherwise.
- */
-function tryFocusElems(
-  elems: NodeListOf<HTMLElement> | [HTMLElement],
-  reverse: boolean = false,
-  fallback: HTMLElement | null = null
-) {
-  if (!reverse) {
-    for (let i = 0; i < elems.length; ++i) {
-      const elem = elems[i];
-      if (
-        elem.offsetWidth ||
-        elem.offsetHeight ||
-        elem.getClientRects().length
-      ) {
-        elem.focus();
-        if ((elem.getRootNode() as Document).activeElement === elem) {
-          return true;
-        }
-      }
-    }
-  } else {
-    for (let i = elems.length - 1; i >= 0; --i) {
-      const elem = elems[i];
-      if (
-        elem.offsetWidth ||
-        elem.offsetHeight ||
-        elem.getClientRects().length
-      ) {
-        elem.focus();
-        if ((elem.getRootNode() as Document).activeElement === elem) {
-          return true;
-        }
-      }
-    }
-  }
-  fallback?.focus();
-  return false;
-}
-
 // TODO: Wait for `.d.ts` update to support `ResizeObserver`
 // @ts-ignore
 const onResize: ResizeObserverCallback = ([entry]) => {
@@ -171,7 +125,7 @@ class DDSExpressiveModal extends StableSelectorMixin(
     ];
   }
 
-  private get _focusableElements() {
+  get _focusableElements() {
     const { hasFocusableElements } = this;
 
     const focusableElements: [HTMLElement?] = [];
@@ -242,7 +196,8 @@ class DDSExpressiveModal extends StableSelectorMixin(
    *
    * @param event The event.
    */
-  private _handleFocusIn = ({ target, relatedTarget }) => {
+  protected _handleFocusIn = ({ target, relatedTarget }) => {
+    const { tryFocusElems } = this.constructor as typeof DDSExpressiveModal;
     let focusFromWithin = false;
     if (target && relatedTarget) {
       const comparedToThis = this.compareDocumentPosition(relatedTarget);
@@ -284,6 +239,7 @@ class DDSExpressiveModal extends StableSelectorMixin(
     // If no target/relatedTarget, focus has entered/left the window. Do nothing.
     if (!target || !relatedTarget) return;
 
+    const { tryFocusElems } = this.constructor as typeof DDSExpressiveModal;
     const { _focusableElements: focusableElements } = this;
 
     // See if element gaining focus is inside `this` or `this.shadowRoot`.
@@ -514,7 +470,7 @@ class DDSExpressiveModal extends StableSelectorMixin(
 
   async updated(changedProperties) {
     const { _focusableElements: focusableElements, size } = this;
-    const { selectorCloseButton } = this
+    const { selectorCloseButton, tryFocusElems } = this
       .constructor as typeof DDSExpressiveModal;
 
     if (changedProperties.has('size')) {
@@ -601,6 +557,52 @@ class DDSExpressiveModal extends StableSelectorMixin(
     return `${ddsPrefix}-expressive-modal-closed`;
   }
 
+  /**
+   * Tries to focus on the given elements and bails out if one of the is successful.
+   *
+   * @param elems The elements.
+   * @param reverse `true` to go through the list in reverse order.
+   * @param fallback element to focus on if none
+   * @returns `true` if one of the attempts is successful, `false` otherwise.
+   */
+  static tryFocusElems(
+    elems: NodeListOf<HTMLElement> | [HTMLElement],
+    reverse: boolean = false,
+    fallback: HTMLElement | null = null
+  ) {
+    if (!reverse) {
+      for (let i = 0; i < elems.length; ++i) {
+        const elem = elems[i];
+        if (
+          elem.offsetWidth ||
+          elem.offsetHeight ||
+          elem.getClientRects().length
+        ) {
+          elem.focus();
+          if ((elem.getRootNode() as Document).activeElement === elem) {
+            return true;
+          }
+        }
+      }
+    } else {
+      for (let i = elems.length - 1; i >= 0; --i) {
+        const elem = elems[i];
+        if (
+          elem.offsetWidth ||
+          elem.offsetHeight ||
+          elem.getClientRects().length
+        ) {
+          elem.focus();
+          if ((elem.getRootNode() as Document).activeElement === elem) {
+            return true;
+          }
+        }
+      }
+    }
+    fallback?.focus();
+    return false;
+  }
+
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 

diff --git a/packages/web-components/src/components/filter-panel/filter-panel-modal.ts b/packages/web-components/src/components/filter-panel/filter-panel-modal.ts
@@ -13,7 +13,7 @@ import HostListenerMixin from '../../internal/vendor/@carbon/web-components/glob
 import './filter-group';
 import './filter-modal-button';
 import './filter-modal-heading';
-import BXModal from '../../internal/vendor/@carbon/web-components/components/modal/modal.js';
+import DDSExpressiveModal from '../expressive-modal/expressive-modal';
 import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import './filter-modal-footer';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
@@ -33,7 +33,7 @@ const { stablePrefix: ddsPrefix } = ddsSettings;
  */
 @customElement(`${ddsPrefix}-filter-panel-modal`)
 class DDSFilterPanelModal extends HostListenerMixin(
-  StableSelectorMixin(BXModal)
+  StableSelectorMixin(DDSExpressiveModal)
 ) {
   /**
    * Renders the selected values.
@@ -91,26 +91,32 @@ class DDSFilterPanelModal extends HostListenerMixin(
       if (
         this.dispatchEvent(
           new CustomEvent(
-            (this.constructor as typeof BXModal).eventBeforeClose,
+            (this.constructor as typeof DDSExpressiveModal).eventBeforeClose,
             init
           )
         )
       ) {
         this.open = false;
         this.dispatchEvent(
-          new CustomEvent((this.constructor as typeof BXModal).eventClose, init)
+          new CustomEvent(
+            (this.constructor as typeof DDSExpressiveModal).eventClose,
+            init
+          )
         );
       }
     }
   }
 
   render() {
+    const { _handleFocusIn: handleFocusIn } = this;
+
     return html`
-      <a
+      <button
         id="start-sentinel"
         class="${prefix}--visually-hidden"
-        href="javascript:void 0"
-        role="navigation"></a>
+        @focusin="${handleFocusIn}">
+        START
+      </button>
       <section class="${prefix}--filter-panel__section bx--modal-container">
         <bx-modal-header>
           <bx-modal-close-button
@@ -132,11 +138,12 @@ class DDSFilterPanelModal extends HostListenerMixin(
           >
         </dds-filter-modal-footer>
       </section>
-      <a
+      <button
         id="end-sentinel"
         class="${prefix}--visually-hidden"
-        href="javascript:void 0"
-        role="navigation"></a>
+        @focusin="${handleFocusIn}">
+        END
+      </button>
     `;
   }
 

diff --git a/packages/web-components/src/components/filter-panel/filter-panel.ts b/packages/web-components/src/components/filter-panel/filter-panel.ts
@@ -73,7 +73,10 @@ class DDSFilterPanel extends HostListenerMixin(
       <section class="${prefix}--filter-panel__section">
         <div class="${prefix}--heading-clear">
           <div class="${prefix}--filter__heading">${this.heading}</div>
-          <button class="${prefix}--clear" @click=${this._handleClear}>
+          <button
+            class="${prefix}--clear"
+            @click=${this._handleClear}
+            ?disabled="${!this.hasSelections}">
             <div class="${prefix}--clear__container">
               Clear
               <div class="${prefix}--reset__icon">${Reset()}</div>