fix: hide indicator and support native collapse on click (#35439)

Author: chrisdholt

change/@fluentui-web-components-c89f77cc-f531-4970-93b5-68d3d70511bf.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: hide dropdown indicator and support native collapse behavior on click",
+  "packageName": "@fluentui/web-components",
+  "email": "13071055+chrisdholt@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/web-components/src/dropdown/dropdown.base.ts

@@ -650,7 +650,7 @@ export class BaseDropdown extends FASTElement {
 
     this.focus();
 
-    if (target === this.control && !this.isCombobox) {
+    if ((target === this.control || e.composedPath().includes(this.indicator)) && !this.isCombobox) {
       this.listbox.togglePopover();
       return true;
     }

packages/web-components/src/dropdown/dropdown.template.ts

@@ -4,7 +4,7 @@ import type { BaseDropdown } from './dropdown.base.js';
 import type { DropdownOptions } from './dropdown.options.js';
 
 const dropdownIndicatorTemplate = html<BaseDropdown>`
-  <svg class="chevron-down-20-regular" role="button" slot="indicator" viewBox="0 0 20 20" ${ref('indicator')}>
+  <svg class="chevron-down-20-regular" aria-hidden="true" slot="indicator" viewBox="0 0 20 20" ${ref('indicator')}>
     <path
       d="M15.85 7.65a.5.5 0 0 1 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16a.5.5 0 0 1 .7 0"
       fill="currentColor"