fix(Select): update to match installed version of material/select

silinternational · Apr 11, 2024 · a739d35 · a739d35
1 parent 8017412
commit a739d35
Showing 1 changed file with 10 additions and 10 deletions.
diff --git a/components/mdc/Select/Select.svelte b/components/mdc/Select/Select.svelte
@@ -63,11 +63,18 @@ afterUpdate(() => {
 
 <div class="mdc-select mdc-select--outlined {$$props.class || ''}" bind:this={element} style="width: {width}">
   <div class="mdc-select__anchor" role="button" aria-haspopup="listbox" aria-labelledby="{labelID} {selectedTextID}">
+    <span class="mdc-notched-outline">
+      <span class="mdc-notched-outline__leading" />
+      <span class="mdc-notched-outline__notch">
+        <span id={labelID} class="mdc-floating-label">{label}</span>
+      </span>
+      <span class="mdc-notched-outline__trailing" />
+    </span>
     <span class="mdc-select__selected-text-container">
       <span id={selectedTextID} class="mdc-select__selected-text" />
     </span>
     <span class="mdc-select__dropdown-icon">
-      <svg class="mdc-select__dropdown-icon-graphic" viewBox="7 10 10 5">
+      <svg class="mdc-select__dropdown-icon-graphic" viewBox="7 10 10 5" focusable="false">
         <polygon
           class="mdc-select__dropdown-icon-inactive"
           stroke="none"
@@ -77,17 +84,10 @@ afterUpdate(() => {
         <polygon class="mdc-select__dropdown-icon-active" stroke="none" fill-rule="evenodd" points="7 15 12 10 17 15" />
       </svg>
     </span>
-    <span class="mdc-notched-outline">
-      <span class="mdc-notched-outline__leading" />
-      <span class="mdc-notched-outline__notch">
-        <span id={labelID} class="mdc-floating-label">{label}</span>
-      </span>
-      <span class="mdc-notched-outline__trailing" />
-    </span>
   </div>
 
-  <div class="mdc-select__menu mdc-menu mdc-menu-surface" style="width: {width}" role="listbox">
-    <ul class="mdc-deprecated-list">
+  <div class="mdc-select__menu mdc-menu mdc-menu-surface" style="width: {width}">
+    <ul class="mdc-deprecated-list" role="listbox" aria-label={label + ' picker listbox'}>
       {#each options as { id, name } (id)}
         <li class="mdc-deprecated-list-item" data-value={id} role="option" aria-selected={isOptionSelected(id)}>
           <span class="mdc-deprecated-list-item__text">{name}</span>