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.

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