Fixed announcing correct state information for tab items (#2066)

* Fixed announcing correct state information for tab items * fixed formatting * fixed formatting * whitespaces
Azure · Jan 17, 2023 · e5f5675 · e5f5675
1 parent effbd87
commit e5f5675
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 11 deletions.
diff --git a/...ts/operations/operation-details/ko/runtime/graphql-documentation/graphql-doc-details.html b/...ts/operations/operation-details/ko/runtime/graphql-documentation/graphql-doc-details.html
@@ -29,14 +29,14 @@ <h3>Response type</h3>
         <h3 data-bind="text: $component.headerName()"></h3>
         <ul class="nav nav-pills" role="tablist">
             <li class="nav-item" role="presentation">
-                <button role="tab" class="nav-link active" title="Table view"
-                    data-bind="activate: () => {switchToTable(graphSelectedSchemaView)}, css: { active: graphSelectedSchemaView() === 'table' }">
+                <button role="tab" class="nav-link active" title="Table view" aria-label="Table view"
+                    data-bind="activate: () => {switchToTable(graphSelectedSchemaView)}, css: { active: graphSelectedSchemaView() === 'table' }, tab: { isSelected: graphSelectedSchemaView() === 'table' }"">
                     <i class="icon-emb icon-emb-list"></i>
                 </button>
             </li>
             <li class="nav-item" role="presentation">
-                <button role="tab" class="nav-link" title="Raw schema view"
-                    data-bind="activate: () => {switchToRaw(graphSelectedSchemaView)}, css: { active: graphSelectedSchemaView() === 'raw' }">
+                <button role="tab" class="nav-link" title="Raw schema view" aria-label="Raw schema view" data-bind=" activate: () => { switchToRaw(graphSelectedSchemaView) }, css: { active:
+                    graphSelectedSchemaView() === 'raw' }, tab: { isSelected: graphSelectedSchemaView() === 'raw' }"">
                     <i class="icon-emb icon-emb-brackets"></i>
                 </button>
             </li>
@@ -125,14 +125,14 @@ <h3>Types</h3>
         <span data-bind="text: $component.getDescription(reference)"></span>
         <ul class="nav nav-pills" role="tablist">
             <li class="nav-item" role="presentation">
-                <button role="tab" class="nav-link active" title="Table view"
-                    data-bind="activate: () => {$component.switchToTable(reference.schemaView)}, css: { active: reference.schemaView() === 'table' }">
+                <button role="tab" class="nav-link active" title="Table view" aria-label="Table view"
+                    data-bind="activate: () => {$component.switchToTable(reference.schemaView)}, css: { active: reference.schemaView() === 'table' }, tab: { isSelected: reference.schemaView() === 'table' }"">
                     <i class="icon-emb icon-emb-list"></i>
                 </button>
             </li>
             <li class="nav-item" role="presentation">
-                <button role="tab" class="nav-link" title="Raw schema view"
-                    data-bind="activate: () => {$component.switchToRaw(reference.schemaView)}, css: { active: reference.schemaView() === 'raw' }">
+                <button role="tab" class="nav-link" title="Raw schema view" aria-label="Raw schema view" data-bind=" activate: () => { $component.switchToRaw(reference.schemaView) }, css: { active:
+                    reference.schemaView() === 'raw' }, tab: { isSelected: reference.schemaView() === 'raw' }"">
                     <i class="icon-emb icon-emb-brackets"></i>
                 </button>
             </li>

diff --git a/src/components/operations/operation-details/ko/runtime/type-definition.html b/src/components/operations/operation-details/ko/runtime/type-definition.html
@@ -12,13 +12,15 @@ <h4 class="text-truncate flex-grow" data-bind="text: $component.name"></h4>
 <!-- /ko -->
 
 <ul class="nav nav-pills" role="tablist">
-      <li class="nav-item" role="presentation">
-        <button role="tab" class="nav-link active" title="Table view" data-bind="activate: $component.switchToTable, css: { active: $component.schemaView() === 'table' }">
+    <li class="nav-item" role="presentation">
+        <button role="tab" class="nav-link active" title="Table view" aria-label="Table view"
+            data-bind="activate: $component.switchToTable, css: { active: $component.schemaView() === 'table' },  tab: { isSelected: $component.schemaView() === 'table' }">
             <i class="icon-emb icon-emb-list"></i>
         </button>
     </li>
     <li class="nav-item" role="presentation">
-        <button role="tab" class="nav-link" title="Raw schema view" data-bind="activate: $component.switchToRaw, css: { active: $component.schemaView() === 'raw' }">
+        <button role="tab" class="nav-link" title="Raw schema view" aria-label="Raw schema view"
+            data-bind="activate: $component.switchToRaw, css: { active: $component.schemaView() === 'raw' }, tab: { isSelected: $component.schemaView() === 'raw' }">
             <i class="icon-emb icon-emb-brackets"></i>
         </button>
     </li>