[A11y] Call out the 'select scopes' field label (#8252)

Update the API key form to call out the `select scopes` label after tabbing to inputs within that field group.

Addresses #8182

Author: loic-sharma

src/NuGetGallery/Views/Users/ApiKeys.cshtml

@@ -335,16 +335,16 @@
 
         <div class="row">
             <div class="col-sm-12 form-group">
-                <b class="ms-fontSize-xl">Select Scopes</b>
+                <b id="select-scopes" class="ms-fontSize-xl">Select Scopes</b>
                 <br />
                 <span class="has-error">
                     <span class="help-block" data-bind="text: ScopesError" aria-live="polite" role="alert"></span>
                 </span>
                 <ul role="presentation">
                     <li>
                         <div class="checkbox">
-                            <label>
-                                <input type="checkbox" data-bind="checked: PushEnabled, enable: PushAnyEnabled" />
+                            <label id="select-scopes-push">
+                                <input type="checkbox" data-bind="checked: PushEnabled, enable: PushAnyEnabled" aria-labelledby="select-scopes-push select-scopes" />
                                 Push
                             </label>
                         </div>
@@ -353,10 +353,11 @@
                                 <div class="radio">
                                     <div class="label-sibling">
                                         <input name="PushScope" type="radio" value="@NuGetScopes.PackagePush"
+                                               aria-labelledby="select-scopes-push-package select-scopes"
                                                data-bind="checked: PushScope, enable: PushNewEnabled,
                                                           attr: { id: PackagePushId }" />
                                     </div>
-                                    <label data-bind="attr: { for: PackagePushId }">
+                                    <label id="select-scopes-push-package" data-bind="attr: { for: PackagePushId }">
                                         @NuGetScopes.Describe(NuGetScopes.PackagePush)
                                     </label>
                                 </div>
@@ -365,10 +366,11 @@
                                 <div class="radio">
                                     <div class="label-sibling">
                                         <input name="PushScope" type="radio" value="@NuGetScopes.PackagePushVersion"
+                                               aria-labelledby="select-scopes-push-package-version select-scopes"
                                                data-bind="checked: PushScope, enable: PushExistingEnabled,
                                                           attr: { id: PackagePushVersionId }" />
                                     </div>
-                                    <label data-bind="attr: { for: PackagePushVersionId }">
+                                    <label id="select-scopes-push-package-version" data-bind="attr: { for: PackagePushVersionId }">
                                         @NuGetScopes.Describe(NuGetScopes.PackagePushVersion)
                                     </label>
                                 </div>
@@ -377,8 +379,9 @@
                     </li>
                     <li>
                         <div class="checkbox">
-                            <label>
+                            <label id="select-scopes-unlist">
                                 <input type="checkbox" value="@NuGetScopes.PackageUnlist"
+                                       aria-labelledby="select-scopes-unlist select-scopes"
                                        data-bind="checked: UnlistScopeChecked, enable: UnlistEnabled" />
                                 @NuGetScopes.Describe(NuGetScopes.PackageUnlist)
                             </label>