Add aria-label attributes to fluent-select elements in mgt-planner for accessibility

Co-authored-by: gavinbarron <[email protected]>

Author: Copilot

packages/mgt-components/src/components/mgt-planner/mgt-planner.ts

@@ -824,7 +824,7 @@ export class MgtPlanner extends MgtTemplatedTaskComponent {
             <span>${this.getPlanTitle(this._currentGroup)}</span>
           </span>`
       : html`
-            <fluent-select>
+            <fluent-select aria-label="${this.strings.selectPlan}">
               <span slot="start">${this.renderPlannerIcon(iconColor)}</span>
               ${this._groups.length > 0 ? groupOptions : html`<fluent-option selected>No groups found</fluent-option>`}
             </fluent-select>`;
@@ -853,7 +853,7 @@ export class MgtPlanner extends MgtTemplatedTaskComponent {
           </span>
         `
       : html`
-         <fluent-select>
+         <fluent-select aria-label="${this.strings.selectBucket}">
           <span slot="start">${this.renderBucketIcon(iconColor)}</span>
           ${folders.length > 0 ? folderOptions : html`<fluent-option selected>No folders found</fluent-option>`}
         </fluent-select>`;

packages/mgt-components/src/components/mgt-planner/strings.ts

@@ -17,5 +17,7 @@ export const strings = {
   plansSelfAssigned: 'All Plans',
   bucketNotFound: 'Bucket not found',
   bucketsSelfAssigned: 'All Tasks',
-  baseSelfAssigned: 'Assigned to Me'
+  baseSelfAssigned: 'Assigned to Me',
+  selectPlan: 'Select plan',
+  selectBucket: 'Select bucket'
 };