Merge pull request #278 from silinternational/develop

Release 11.4.2 fix Drawer A11y warning

Author: hobbitronics

.github/workflows/deepfactor.yml

@@ -1,3 +1,14 @@
+# Changelog
+All notable changes to this project will be documented in this file.
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html), enforced with [semantic-release](https://github.com/semantic-release/semantic-release).
+
+### [11.4.2](https://github.com/silinternational/ui-components/compare/v11.4.1...v11.4.2) (2024-08-19)
+
+
+### Fixed
+
+* **Drawer:** fix A11y warning in Drawer ([275d2b9](https://github.com/silinternational/ui-components/commit/275d2b9f0944e82da7b275f043afc11b6e9296c1))
+
 # Changelog
 
 All notable changes to this project will be documented in this file.

CHANGELOG.md

@@ -118,6 +118,11 @@ main {
 .main-content-height {
   height: var(--mdc-drawer-height);
 }
+.drawer-menu {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+}
 </style>
 
 <svelte:window on:resize={showAppropriateThings} />
@@ -138,50 +143,52 @@ main {
     <slot name="drawer-content-top" />
     <!-- override built-in padding so height 100 works correctly without creating a vertical scroller -->
     <!-- changing the list to flex causes the margins to not collapse -->
-    <nav
-      class="mdc-deprecated-list flex column p-0"
-      class:h-100={isFullHeightMenu}
-      on:click={onListClick}
-      on:keyup={onListClick}
-      bind:this={listElement}
-    >
-      {#each menuItems as { icon, label, url, urlPattern, hide, button, tooltip }, i}
-        {#if label === '--break--'}
-          <span class="grow-1" />
-        {:else if !hide}
-          <Tooltip.Wrapper ariaDescribedBy={label + '-tooltip'}>
-            {#if button && isNotMini}
-              <Button class="m-1" raised prependIcon={icon} {url}>{label}</Button>
-            {:else if button}
-              <IconButton class="mdc-theme--primary pl-1" {icon} ariaLabel={label} {url} />
-            {:else if url}
-              <a
-                class="mdc-deprecated-list-item"
-                class:mdc-deprecated-list-item--activated={isMenuItemActive(currentUrl, url, urlPattern)}
-                href={url}
-                aria-current={isMenuItemActive(currentUrl, url, urlPattern) ? 'page' : null}
-                tabindex={i === 0 ? 0 : undefined}
-              >
-                <span class="mdc-deprecated-list-item__ripple" />
-                {#if icon}
-                  <i class="material-icons mdc-deprecated-list-item__graphic" aria-hidden="true">{icon}</i>
-                {/if}
-
-                {#if label && isNotMini}
-                  <span class="mdc-deprecated-list-item__text">{label}</span>
-                {/if}
-              </a>
-            {:else}
-              <hr
-                class="mdc-deprecated-list-divider mdc-deprecated-list-divider--inset-leading mdc-deprecated-list-divider--inset-trailing"
-              />
+    <nav class:h-100={isFullHeightMenu} bind:this={listElement}>
+      <div
+        class="drawer-menu mdc-deprecated-list"
+        role="button"
+        tabindex="-1"
+        on:click={onListClick}
+        on:keyup={onListClick}
+      >
+        {#each menuItems as { icon, label, url, urlPattern, hide, button, tooltip }, i}
+          {#if label === '--break--'}
+            <span class="grow-1" />
+          {:else if !hide}
+            <Tooltip.Wrapper ariaDescribedBy={label + '-tooltip'}>
+              {#if button && isNotMini}
+                <Button class="m-1" raised prependIcon={icon} {url}>{label}</Button>
+              {:else if button}
+                <IconButton class="mdc-theme--primary pl-1" {icon} ariaLabel={label} {url} />
+              {:else if url}
+                <a
+                  class="mdc-deprecated-list-item"
+                  class:mdc-deprecated-list-item--activated={isMenuItemActive(currentUrl, url, urlPattern)}
+                  href={url}
+                  aria-current={isMenuItemActive(currentUrl, url, urlPattern) ? 'page' : null}
+                  tabindex={i === 0 ? 0 : undefined}
+                >
+                  <span class="mdc-deprecated-list-item__ripple" />
+                  {#if icon}
+                    <i class="material-icons mdc-deprecated-list-item__graphic" aria-hidden="true">{icon}</i>
+                  {/if}
+
+                  {#if label && isNotMini}
+                    <span class="mdc-deprecated-list-item__text">{label}</span>
+                  {/if}
+                </a>
+              {:else}
+                <hr
+                  class="mdc-deprecated-list-divider mdc-deprecated-list-divider--inset-leading mdc-deprecated-list-divider--inset-trailing"
+                />
+              {/if}
+            </Tooltip.Wrapper>
+            {#if tooltip}
+              <Tooltip tooltipID={label + '-tooltip'}>{tooltip}</Tooltip>
             {/if}
-          </Tooltip.Wrapper>
-          {#if tooltip}
-            <Tooltip tooltipID={label + '-tooltip'}>{tooltip}</Tooltip>
           {/if}
-        {/if}
-      {/each}
+        {/each}
+      </div>
     </nav>
   </div>
 </aside>

components/mdc/Drawer/Drawer.svelte

@@ -1,6 +1,6 @@
 {
   "name": "@silintl/ui-components",
-  "version": "11.4.1",
+  "version": "11.4.2",
   "description": "Reusable Svelte components for some internal applications",
   "main": "index.mjs",
   "module": "index.mjs",