Fixed several accessibility issues. (#1195)

* Added asterisks to required form fields. * Fixed luminosity contrast ratio for the form group toggle button. * Unified hyperlink selector controls across components. Fixed tooltip binding. * Added setting the aria-selected tag to code samples tabs.
Azure · Mar 22, 2021 · 9827e0a · 9827e0a
1 parent c00a8fc
commit 9827e0a
Show file tree

Hide file tree

Showing 17 changed files with 65 additions and 70 deletions.
diff --git a/community/widgets/document-details/ko/documentDetailsEditorView.html b/community/widgets/document-details/ko/documentDetailsEditorView.html
@@ -3,7 +3,7 @@
         <label class="form-label">
             File Name
             <button class="btn btn-info" type="button" title="Help"
-                data-bind="tooltipToggle: 'Name of the file'"></button>
+                data-bind="tooltip: 'Name of the file'"></button>
         </label>
         <input type="string" class="form-control" data-bind="textInput: fileName" />
     </div>

diff --git a/examples/widgets/conference-session/ko/conferenceSessionEditorView.html b/examples/widgets/conference-session/ko/conferenceSessionEditorView.html
@@ -3,7 +3,7 @@
         <label class="form-label">
             Session #
             <button class="btn btn-info" type="button" title="Help"
-                data-bind="tooltipToggle: 'Number of the session'"></button>
+                data-bind="tooltip: 'Number of the session'"></button>
         </label>
         <input type="string" class="form-control" data-bind="textInput: sessionNumber" />
     </div>

diff --git a/src/components/apis/api-products/ko/apiProductsEditor.html b/src/components/apis/api-products/ko/apiProductsEditor.html
@@ -1,17 +1,16 @@
 <fieldset class="form flex-item flex-item-grow" data-bind="scrollable: {}">
     <div class="form-group">
-        <label class="form-label">
+        <label for="hyperlink" class="form-label">
             Link to product details page
             <button class="btn btn-info" type="button" title="Help"
-                data-bind="tooltipToggle: 'A link to be navigated on click.'"></button>
+                data-bind="tooltip: 'A link to be navigated on click.'"></button>
         </label>
         <div class="input-group">
-            <a href="#" class="form-control" role="button"
-                data-bind="text: hyperlinkTitle, balloon: { component: { name: 'hyperlink-selector', params: { hyperlink: $component.hyperlink, onChange: $component.onHyperlinkChange } } }">
-            </a>
-            <div class="input-group-addon">
+            <input id="hyperlink" type="text" class="form-control" readonly data-bind="value: hyperlinkTitle" />
+            <button class="btn input-group-btn" title="Select hyperlink" aria-label="Select hyperlink"
+                data-bind="balloon: { position: 'right', component: { name: 'hyperlink-selector', params: { hyperlink: $component.hyperlink, onChange: $component.onHyperlinkChange } } }">
                 <i class="paperbits-icon paperbits-link-69-2"></i>
-            </div>
+            </button>
         </div>
     </div>
 </fieldset>
diff --git a/src/components/apis/details-of-api/ko/detailsOfApiEditor.html b/src/components/apis/details-of-api/ko/detailsOfApiEditor.html
@@ -5,11 +5,11 @@
                 Link to API changelog page
             </label>
             <button class="btn btn-info" type="button" title="Help" aria-label="Help"
-                data-bind="tooltipToggle: 'A link to be navigated on click.'"></button>
+                data-bind="tooltip: 'A link to be navigated on click.'"></button>
         </div>
         <div class="input-group">
-            <input id="hyperlink" class="form-control" readonly data-bind="value: hyperlinkTitle" />
-            <button class="btn input-group-btn" aria-label="Select hyperlink"
+            <input id="hyperlink" type="text" class="form-control" readonly data-bind="value: hyperlinkTitle" />
+            <button class="btn input-group-btn" title="Select hyperlink" aria-label="Select hyperlink"
                 data-bind="balloon: { position: 'right', component: { name: 'hyperlink-selector', params: { hyperlink: $component.hyperlink, onChange: $component.onHyperlinkChange } } }">
                 <i class="paperbits-icon paperbits-link-69-2"></i>
             </button>

diff --git a/src/components/apis/history-of-api/ko/historyOfApiEditor.html b/src/components/apis/history-of-api/ko/historyOfApiEditor.html
@@ -1,17 +1,16 @@
 <fieldset class="form flex-item flex-item-grow" data-bind="scrollable: {}">
     <div class="form-group">
-        <label class="form-label">
+        <label for="hyperlink" class="form-label">
             Link to API details page
             <button class="btn btn-info" type="button" title="Help"
-                data-bind="tooltipToggle: 'A link to be navigated on click.'"></button>
+                data-bind="tooltip: 'A link to be navigated on click.'"></button>
         </label>
         <div class="input-group">
-            <a href="#" class="form-control" role="button"
-                data-bind="text: hyperlinkTitle, balloon: { component: { name: 'hyperlink-selector', params: { hyperlink: $component.hyperlink, onChange: $component.onHyperlinkChange } } }">
-            </a>
-            <div class="input-group-addon">
+            <input id="hyperlink" type="text" class="form-control" readonly data-bind="value: hyperlinkTitle" />
+            <button class="btn input-group-btn" title="Select hyperlink" aria-label="Select hyperlink"
+                data-bind="balloon: { position: 'right', component: { name: 'hyperlink-selector', params: { hyperlink: $component.hyperlink, onChange: $component.onHyperlinkChange } } }">
                 <i class="paperbits-icon paperbits-link-69-2"></i>
-            </div>
+            </button>
         </div>
     </div>    
 </fieldset>
diff --git a/src/components/apis/list-of-apis/ko/listOfApisEditor.html b/src/components/apis/list-of-apis/ko/listOfApisEditor.html
@@ -18,8 +18,8 @@
             <label class="form-label">
                 Link to API details page
             </label>
-            <button class="btn btn-info" type="button" title="Help" aria-label="Help"
-                data-bind="tooltipToggle: 'A link to be navigated on click.'">
+            <button class="btn btn-info" type="button" aria-hidden="true" role="tooltip" aria-label="A link to be navigated on click"
+                data-bind="tooltip: 'A link to be navigated on click.'">
             </button>
         </div>
         <div class="input-group">

diff --git a/src/components/operations/operation-details/ko/runtime/operation-console.html b/src/components/operations/operation-details/ko/runtime/operation-console.html
@@ -254,55 +254,55 @@ <h3>Body</h3>
     <ul class="nav" role="tablist">
         <li class="nav-item" role="presentation">
             <a class="nav-link" href="#" role="tab"
-                data-bind="click: $component.selectedLanguage.bind(this, 'http'), css: { 'nav-link-active': $component.selectedLanguage() === 'http' }">
+                data-bind="click: $component.selectedLanguage.bind(this, 'http'), css: { 'nav-link-active': $component.selectedLanguage() === 'http' }, attr: { 'aria-selected': $component.selectedLanguage() === 'http' }">
                 HTTP
             </a>
         </li>
         <li class="nav-item" role="presentation">
             <a class="nav-link" href="#" role="tab"
-                data-bind="click: $component.selectedLanguage.bind(this, 'curl'), css: { 'nav-link-active': $component.selectedLanguage() === 'curl' }">
+                data-bind="click: $component.selectedLanguage.bind(this, 'curl'), css: { 'nav-link-active': $component.selectedLanguage() === 'curl' }, attr: { 'aria-selected': $component.selectedLanguage() === 'curl' }">
                 Curl
             </a>
         </li>
         <li class="nav-item" role="presentation">
             <a class="nav-link" href="#" role="tab"
-                data-bind="click: $component.selectedLanguage.bind(this, 'csharp'), css: { 'nav-link-active': $component.selectedLanguage() === 'csharp' }">
+                data-bind="click: $component.selectedLanguage.bind(this, 'csharp'), css: { 'nav-link-active': $component.selectedLanguage() === 'csharp' }, attr: { 'aria-selected': $component.selectedLanguage() === 'csharp' }">
                 C#
             </a>
         </li>
         <li class="nav-item" role="presentation">
             <a class="nav-link" href="#" role="tab"
-                data-bind="click: $component.selectedLanguage.bind(this, 'java'), css: { 'nav-link-active': $component.selectedLanguage() === 'java' }">
+                data-bind="click: $component.selectedLanguage.bind(this, 'java'), css: { 'nav-link-active': $component.selectedLanguage() === 'java' }, attr: { 'aria-selected': $component.selectedLanguage() === 'java' }">
                 Java
             </a>
         </li>
         <li class="nav-item" role="presentation">
             <a class="nav-link" href="#" role="tab"
-                data-bind="click: $component.selectedLanguage.bind(this, 'javascript'), css: { 'nav-link-active': $component.selectedLanguage() === 'javascript' }">
+                data-bind="click: $component.selectedLanguage.bind(this, 'javascript'), css: { 'nav-link-active': $component.selectedLanguage() === 'javascript' }, attr: { 'aria-selected': $component.selectedLanguage() === 'javascript' }">
                 JavaScript
             </a>
         </li>
         <li class="nav-item" role="presentation">
             <a class="nav-link" href="#" role="tab"
-                data-bind="click: $component.selectedLanguage.bind(this, 'php'), css: { 'nav-link-active': $component.selectedLanguage() === 'php' }">
+                data-bind="click: $component.selectedLanguage.bind(this, 'php'), css: { 'nav-link-active': $component.selectedLanguage() === 'php' }, attr: { 'aria-selected': $component.selectedLanguage() === 'php' }">
                 PHP
             </a>
         </li>
         <li class="nav-item" role="presentation">
             <a class="nav-link" href="#" role="tab"
-                data-bind="click: $component.selectedLanguage.bind(this, 'python'), css: { 'nav-link-active': $component.selectedLanguage() === 'python' }">
+                data-bind="click: $component.selectedLanguage.bind(this, 'python'), css: { 'nav-link-active': $component.selectedLanguage() === 'python' }, attr: { 'aria-selected': $component.selectedLanguage() === 'python' }">
                 Python
             </a>
         </li>
         <li class="nav-item" role="presentation">
             <a class="nav-link" href="#" role="tab"
-                data-bind="click: $component.selectedLanguage.bind(this, 'ruby'), css: { 'nav-link-active': $component.selectedLanguage() === 'ruby' }">
+                data-bind="click: $component.selectedLanguage.bind(this, 'ruby'), css: { 'nav-link-active': $component.selectedLanguage() === 'ruby' }, attr: { 'aria-selected': $component.selectedLanguage() === 'ruby' }">
                 Ruby
             </a>
         </li>
         <li class="nav-item" role="presentation">
             <a class="nav-link" href="#" role="tab"
-                data-bind="click: $component.selectedLanguage.bind(this, 'objc'), css: { 'nav-link-active': $component.selectedLanguage() === 'objc' }">
+                data-bind="click: $component.selectedLanguage.bind(this, 'objc'), css: { 'nav-link-active': $component.selectedLanguage() === 'objc' }, attr: { 'aria-selected': $component.selectedLanguage() === 'objc' }">
                 Objective C
             </a>
         </li>

diff --git a/src/components/operations/operation-list/ko/operationListEditor.html b/src/components/operations/operation-list/ko/operationListEditor.html
@@ -34,18 +34,17 @@
     </div>
 
     <div class="form-group">
-        <label class="form-label">
+        <label for="hyperlink" class="form-label">
             Link to operation details page
             <button class="btn btn-info" type="button" title="Help"
-                data-bind="tooltipToggle: 'A link to be navigated on click.'"></button>
+                data-bind="tooltip: 'A link to be navigated on click.'"></button>
         </label>
         <div class="input-group">
-            <a href="#" class="form-control" role="button"
-                data-bind="text: hyperlinkTitle, balloon: { component: { name: 'hyperlink-selector', params: { hyperlink: $component.hyperlink, onChange: $component.onHyperlinkChange } } }">
-            </a>
-            <div class="input-group-addon">
+            <input id="hyperlink" type="text" class="form-control" readonly data-bind="value: hyperlinkTitle" />
+            <button class="btn input-group-btn" title="Select hyperlink" aria-label="Select hyperlink"
+                data-bind="balloon: { position: 'right', component: { name: 'hyperlink-selector', params: { hyperlink: $component.hyperlink, onChange: $component.onHyperlinkChange } } }">
                 <i class="paperbits-icon paperbits-link-69-2"></i>
-            </div>
+            </button>
         </div>
     </div>
 </fieldset>
diff --git a/src/components/products/product-apis/ko/productApisEditor.html b/src/components/products/product-apis/ko/productApisEditor.html
@@ -1,17 +1,16 @@
 <fieldset class="form flex-item flex-item-grow" data-bind="scrollable: {}">
     <div class="form-group">
-        <label class="form-label">
+        <label for="hyperlink" class="form-label">
             Link to API details page
             <button class="btn btn-info" type="button" title="Help"
-                data-bind="tooltipToggle: 'A link to be navigated on click.'"></button>
+                data-bind="tooltip: 'A link to be navigated on click.'"></button>
         </label>
         <div class="input-group">
-            <a href="#" class="form-control" role="button"
-                data-bind="text: hyperlinkTitle, balloon: { component: { name: 'hyperlink-selector', params: { hyperlink: $component.hyperlink, onChange: $component.onHyperlinkChange } } }">
-            </a>
-            <div class="input-group-addon">
+            <input id="hyperlink" type="text" class="form-control" readonly data-bind="value: hyperlinkTitle" />
+            <button class="btn input-group-btn" title="Select hyperlink" aria-label="Select hyperlink"
+                data-bind="balloon: { position: 'right', component: { name: 'hyperlink-selector', params: { hyperlink: $component.hyperlink, onChange: $component.onHyperlinkChange } } }">
                 <i class="paperbits-icon paperbits-link-69-2"></i>
-            </div>
+            </button>
         </div>
     </div>
 </fieldset>
diff --git a/src/components/products/product-list/ko/productListEditor.html b/src/components/products/product-list/ko/productListEditor.html
@@ -7,18 +7,17 @@
     </div>
 
     <div class="form-group">
-        <label class="form-label">
+        <label for="hyperlink" class="form-label">
             Link to product details page
             <button class="btn btn-info" type="button" title="Help"
-                data-bind="tooltipToggle: 'A link to be navigated on click.'"></button>
+                data-bind="tooltip: 'A link to be navigated on click.'"></button>
         </label>
         <div class="input-group">
-            <a href="#" class="form-control" role="button"
-                data-bind="text: hyperlinkTitle, balloon: { component: { name: 'hyperlink-selector', params: { hyperlink: $component.hyperlink, onChange: $component.onHyperlinkChange } } }">
-            </a>
-            <div class="input-group-addon">
+            <input id="hyperlink" type="text" class="form-control" readonly data-bind="value: hyperlinkTitle" />
+            <button class="btn input-group-btn" title="Select hyperlink" aria-label="Select hyperlink"
+                data-bind="balloon: { position: 'right', component: { name: 'hyperlink-selector', params: { hyperlink: $component.hyperlink, onChange: $component.onHyperlinkChange } } }">
                 <i class="paperbits-icon paperbits-link-69-2"></i>
-            </div>
+            </button>
         </div>
     </div>
 </fieldset>
diff --git a/src/components/users/change-password/ko/runtime/change-password.html b/src/components/users/change-password/ko/runtime/change-password.html
@@ -6,17 +6,17 @@
 <form data-bind="submit: changePassword">
     <fieldset data-bind="attr: { disabled: working}">
         <div class="form-group">
-            <label for="password">Password</label>
+            <label for="password">Password *</label>
             <input aria-required="true" class="form-control" id="password" name="password"
                 autocomplete="password" type="password" data-bind="textInput: password">
         </div>
         <div class="form-group">
-            <label for="new-password">New Password</label>
+            <label for="new-password">New password *</label>
             <input aria-required="true" class="form-control" id="new-password" name="new-password"
                 autocomplete="new-password" type="password" data-bind="textInput: newPassword">
         </div>
         <div class="form-group">
-            <label for="confirmPassword">Confirm password</label>
+            <label for="confirmPassword">Confirm password *</label>
             <input aria-required="true" class="form-control" id="confirmPassword" name="confirm"
                 autocomplete="new-password" type="password"
                 data-bind="textInput: passwordConfirmation">

diff --git a/src/components/users/reset-password/ko/runtime/reset-password.html b/src/components/users/reset-password/ko/runtime/reset-password.html
@@ -7,7 +7,7 @@
 <form data-bind="submit: resetSubmit">
     <fieldset data-bind="attr: { disabled: working}">
         <div class="form-group">
-            <label for="email">Email</label>
+            <label for="email">Email *</label>
             <input aria-required="true" autofocus="autofocus" class="form-control" id="email" name="email"
                 autocomplete="email" placeholder="e.g. name@example.com" type="email" data-bind="textInput: email">
         </div>

diff --git a/src/components/users/signin-social/ko/signinSocialEditor.html b/src/components/users/signin-social/ko/signinSocialEditor.html
@@ -2,23 +2,23 @@
     <div class="form-group">
         <label class="form-label">
             Label on AAD button
-            <button class="btn btn-info" type="button" title="Help" data-bind="tooltipToggle: 'Text on the button'"></button>
+            <button class="btn btn-info" type="button" title="Help" data-bind="tooltip: 'Text on the button'"></button>
         </label>
         <input type="text" class="form-control" data-bind="textInput: aadLabel" maxlength="256" />
     </div>
 
     <div class="form-group">
         <label class="form-label">
             Label on AAD B2C button
-            <button class="btn btn-info" type="button" title="Help" data-bind="tooltipToggle: 'Text on the button'"></button>
+            <button class="btn btn-info" type="button" title="Help" data-bind="tooltip: 'Text on the button'"></button>
         </label>
         <input type="text" class="form-control" data-bind="textInput: aadB2CLabel" maxlength="256" />
     </div>
 
     <div class="form-group">
         <label for="appearanceStyle" class="form-label">
             Appearance
-            <button class="btn btn-info" type="button" title="Help" data-bind="tooltipToggle: 'Predefined appearance from style guide.'"></button>
+            <button class="btn btn-info" type="button" title="Help" data-bind="tooltip: 'Predefined appearance from style guide.'"></button>
         </label>
         <div class="input-group">
             <a href="#" class="form-control" data-bind="text: appearanceStyle() && appearanceStyle().displayName, balloon: { component: { name: 'style-variation-selector', params: { snippetType: 'components/button', onSelect: $component.onVariationSelected } } }">

diff --git a/src/components/users/signin/ko/runtime/signin.html b/src/components/users/signin/ko/runtime/signin.html
@@ -1,14 +1,14 @@
 <form>
      <fieldset data-bind="attr: { disabled : working }">
         <div class="form-group">
-            <label for="email">Email</label>
+            <label for="email">Email *</label>
             <input type="email" id="email" aria-required="true" autofocus="autofocus" class="form-control"
                 autocomplete="email" placeholder="e.g. name@example.com"
                 data-bind="textInput: username">
         </div>
 
         <div class="form-group">
-            <label for="password">Password</label>
+            <label for="password">Password *</label>
             <input type="password" id="password" aria-required="true" class="form-control" name="Password"
                 placeholder="Password" autocomplete="current-password"
                 data-bind="textInput: password">

diff --git a/src/components/users/signup-social/ko/runtime/signup-social.html b/src/components/users/signup-social/ko/runtime/signup-social.html
@@ -1,17 +1,17 @@
 <form data-bind="submit: signup">
     <fieldset>
         <div class="form-group">
-            <label for="email">Email</label>
+            <label for="email">Email *</label>
             <input aria-required="true" autofocus="autofocus" spellcheck="false" class="form-control" id="email" name="email"
                 autocomplete="email" placeholder="e.g. name@example.com" type="email" data-bind="textInput: email">
         </div>
         <div class="form-group">
-            <label for="firstName">First name</label>
+            <label for="firstName">First name *</label>
             <input aria-required="true" class="form-control" id="firstName" name="firstName"
                 placeholder="e.g. John" type="text" data-bind="textInput: firstName">
         </div>
         <div class="form-group">
-            <label for="lastName">Last name</label>
+            <label for="lastName">Last name *</label>
             <input aria-required="true" class="form-control" id="lastName" name="lastName"
                 placeholder="e.g. Doe" type="text" data-bind="textInput: lastName">
         </div>