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

[Copilot]

This PR resolves an accessibility issue where fluent-select elements in the mgt-planner component were missing accessible names, causing screen readers and other assistive technologies to fail the "aria-input-field-name" accessibility requirement.

Problem

The accessibility testing tool identified that fluent-select elements at the following element path were not providing accessible names:

#storybook-preview-iframe;#iframe--components-mgt-planner--tasks;iframe;mgt-planner,fluent-select[current-value="BaOG6AQ3nkWSrqiG9WM2PGUAA3IX"]

Solution

Added appropriate aria-label attributes to both fluent-select elements in the renderNewTask() method:

Before:

<fluent-select>
  <span slot="start">${this.renderPlannerIcon(iconColor)}</span>
  ${groupOptions}
</fluent-select>

After:

<fluent-select aria-label="${this.strings.selectPlan}">
  <span slot="start">${this.renderPlannerIcon(iconColor)}</span>
  ${groupOptions}
</fluent-select>

Changes Made

1. strings.ts: Added two new localized strings:

   • selectPlan: 'Select plan' - for the plan/group selector
   • selectBucket: 'Select bucket' - for the bucket/folder selector

2. mgt-planner.ts: Added aria-label attributes to both fluent-select elements:

   • Plan selector: aria-label="${this.strings.selectPlan}"
   • Bucket selector: aria-label="${this.strings.selectBucket}"

Impact

• ✅ Screen readers can now properly identify and announce both select controls
• ✅ Users with assistive technologies receive clear context about each dropdown's purpose
• ✅ Complies with ARIA accessibility guidelines (aria-input-field-name)
• ✅ Maintains existing functionality with zero visual changes
• ✅ Follows established patterns in the codebase for internationalization

This minimal change ensures that the mgt-planner component meets accessibility standards while preserving all existing functionality.

Fixes #3371.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• googlechromelabs.github.io
  • Triggering command: /usr/local/bin/node install.mjs (dns block)
• https://storage.googleapis.com/chrome-for-testing-public/140.0.7339.80/linux64/chrome-linux64.zip
  • Triggering command: /usr/local/bin/node install.mjs (http block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[Copilot]

@gavinbarron 👋 This repository doesn't have Copilot instructions. With Copilot instructions, I can understand the repository better, work faster and produce higher quality PRs.

I can generate a .github/copilot-instructions.md file for you automatically. Click here to open a pre-filled issue and assign it to me. I'll write the instructions, and then tag you for review.

[microsoft-github-policy-service]

Thank you for creating a Pull Request @@Copilot.

This is a checklist for the PR reviewer(s) to complete before approving and merging this PR:

• I have verified a documentation PR has been linked and is approved (or not applicable)
• I have ran this PR locally and have tested the fix/feature
• I have verified that stories have been added to storybook (or not applicable)
• I have tested existing stories in storybook to verify no regression has occured
• I have tested the solution in at least two browsers (Edge + 1 non-Chromium based browser)

[github-actions]

📖 The updated storybook is available here

[gavinbarron]

@vagpt please review this proposed fix, https://mgt.dev/next/pr/3466 , for #3371