Accessibility fixes for windows high contrast buttons (#2826)

cRui861 · Rena Chen · web-flow · commit 8de3de2e93e2 · 2023-10-30T16:53:45.000-07:00
* AB#1060 general fix for disabled buttons in windows high contrast mode

* AB#1051 narrator will read aloud favorites dropdown options now

---------

Co-authored-by: Rena Chen &lt;rechen@microsoft.com&gt;
diff --git a/desktop/src/@batch-flask/ui/buttons/button.scss b/desktop/src/@batch-flask/ui/buttons/button.scss
@@ -180,5 +180,9 @@ bl-button {
 @media (forced-colors: active) {
     bl-button {
         border: 1px solid currentColor;
+
+        &.disabled {
+            opacity: 0.3;
+        }
     }
 }
diff --git a/desktop/src/app/components/layout/pinned-entity-dropdown/pinned-dropdown.html b/desktop/src/app/components/layout/pinned-entity-dropdown/pinned-dropdown.html
@@ -11,7 +11,7 @@
             (contextmenu)="onContextMenu(favorite)">
 
             <bl-clickable class="dropdown-item favorite-item" (do)="gotoFavorite(favorite)">
-                <span aria-hidden="true">
+                <span attr.aria-label="{{favorite.name || favorite.id}}">
                     <i class="entity-type fa" [ngClass]="entityIcon(favorite)"
                     [title]="entityType(favorite)"></i>
                     {{favorite.name || favorite.id}}

Original file line number	Diff line number	Diff line change
`@@ -180,5 +180,9 @@ bl-button {`
`180`	`180`	`@media (forced-colors: active) {`
`181`	`181`	`bl-button {`
`182`	`182`	`border: 1px solid currentColor;`
	`183`	`+`
	`184`	`+ &.disabled {`
	`185`	`+ opacity: 0.3;`
	`186`	`+ }`
`183`	`187`	`}`
`184`	`188`	`}`