U/sgriffin/a11y (#984)

* Fix link focus highlights * Ensures the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds * add button role * Ensures every HTML document has a lang attribute. * Add missing tooltips * Add hover/focus highlight to checkboxes and radio and a in toggle * Add border and darken clear/copy buttons * Darken all links * Add border and darken diagnostics button * better contrasting table borders * Further iterate on non-primary button colors/borders Consolidate fabric overrides * Add expansion state to original headers button * Remvoe extra initialization * Add id for checkbox * Radio button overhaul - allow radio button focus to update properly on arrow keys, fix up tab orders * remove debug spew * Fix radio button counts * Set focus on OK in diagnostics * Don't let tab escape settings dialog * fix tabbing in diagnostics * Fix up tabbing a bit in classic * Fix focus loss after copy/clear * thicken outlines * add some focus higlights * add focus indicators to new-mobile * simplify fabric css * Truly hide accordioned content * add comment * add name/role to settings/diagnostics dialogs * Rebuild classic table headers as buttons Consolidate resizable code add aria-expanded to sections * High contrast touch ups * Add label hints for urls in new view * more spam labels * Restore tableheader * fix whtiespace * Convert table headers to proper buttons * rebuild sort arrows using after * convert switches to also use css after effect * initial focus on new desktop frame * default focus on ios page * Accessibility Bug Fixes for MHA web/windows (#1215) * bug fix for 1691247,1691683,1697464,1696469 * Update newDesktopFrame.html spelling --------- Co-authored-by: Stephen Griffin <[email protected]> * Accessibility Bug Fixes for 1691252 (#1236) * bug fix for 1697464 * removing extra line and spaces * removing extra spaces * small formatting tweaks --------- Co-authored-by: Stephen Griffin <[email protected]> * Fix chevron colors * Accessibility Bug fix 1846002 Keyboard focus to move to the received content (#1243) * Bug fix 1846002 Keyboard focus to move to the received content * Removed code setting focus on selecting header as it's inconsistent with other tabs. Cleaned up formatting --------- Co-authored-by: Stephen Griffin <[email protected]> * Fix Bug 1691235: [Screen Reader - Message Header Analyzer- Summary page]: Headings are not defined in the 'summary page'. * Fix quotes * rehydrate logElement * Fix newDesktopFrame tab orders --------- Co-authored-by: PragyaPriya30 <[email protected]>
microsoft · Sep 20, 2024 · 34b7c0c · 34b7c0c
1 parent 6a5cedd
commit 34b7c0c
Show file tree

Hide file tree

Showing 23 changed files with 655 additions and 214 deletions.
diff --git a/src/Content/App.css b/src/Content/App.css
@@ -1,5 +1,6 @@
 body {
     padding: 0;
+    background-color: canvas;
 }
 
 .aspNetHidden {
@@ -47,27 +48,18 @@ input {
     padding-bottom: 0;
 }
 
-    #response table {
-        color: #333333;
-        border-width: 1px;
-        border-color: #A8B2B2;
-        border-collapse: collapse;
-        margin-bottom: 0;
-    }
+table {
+    color: #333333;
+    border-collapse: collapse;
+    margin-bottom: 0;
+}
 
-    #response th {
-        border-width: 1px;
-        border-style: solid;
-        border-color: #A8B2B2;
-        padding: 8px;
-        text-align: center;
-        cursor: pointer;
-    }
+#response th {
+    padding: 0;
+}
 
 td {
-    border-width: 1px;
-    border-style: solid;
-    border-color: #A8B2B2;
+    border: 1px solid black;
     padding-left: 2px;
 }
 
@@ -82,10 +74,10 @@ td {
     table-layout: fixed;
 }
 
-    .summaryList td {
-        border-width: 0;
-        padding-bottom: 0;
-    }
+.summaryList td {
+    border-width: 0;
+    padding-bottom: 0;
+}
 
 .summaryHeader {
     text-align: right;
@@ -103,11 +95,28 @@ td {
     background-color: #CDE6F7; /* 2013 light background color */
 }
 
-.tableHeader {
+.tableHeaderButton {
     background-color: #0072C6; /*2013 hero color*/
     color: #FFFFFF;
+    border: 0;
+    font-weight: bold;
+    width: 100%;
+    cursor: pointer;
+    padding: 1em 1.2em 1em 1.2em;
+}
+
+.tableHeaderButton[aria-sort="descending"] .sortArrow::after {
+    content: "\2193"; /* Down arrow */
 }
 
+.tableHeaderButton[aria-sort="ascending"] .sortArrow::after {
+    content: "\2191"; /* Up arrow */
+}
+
+.tableHeader td + td,
+.tableHeader th + th { border-left: 1px solid white; }
+.tableHeader tr + tr { border-top: 1px solid black; }
+
 #inputHeaders {
     width: 100%;
     -webkit-box-sizing: border-box;
@@ -121,7 +130,10 @@ td {
     padding-top: 8px;
     padding-bottom: 8px;
     font-weight: bold;
+    text-align: left;
     cursor: pointer;
+    width: 100%;
+    border: none;
 }
 
 .tableCaption {
@@ -130,14 +142,36 @@ td {
     padding-top: 8px;
     padding-bottom: 8px;
     font-weight: bold;
-    display: block;
     text-align: left;
     cursor: pointer;
+    width: 100%;
+    border: none;
+}
+
+.sectionHeader:focus,
+.sectionHeader:hover {
+    outline: black solid 2px;
+    outline-offset: -2px;
+}
+
+.tableCaption:focus, 
+.tableCaption:hover {
+    outline: #0072cc solid 2px;
+    outline-offset: -2px;
+}
+@media screen and (-ms-high-contrast:active) {
+    .sectionHeader:focus,
+    .sectionHeader:hover,
+    .tableCaption:focus
+    .tableCaption:hover {
+        background-color: buttonface;
+    }
 }
 
 .collapsibleArrow {
     float: right;
     cursor: pointer;
+    font-size: smaller;
 }
 
 .collapsibleSwitch {
@@ -153,6 +187,25 @@ td {
     box-sizing: border-box;
 }
 
+.header-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+}
+
+button[aria-expanded="true"] .collapsibleSwitch::after {
+    content: "\2013"; /* Minus (ndash) */
+}
+
+button[aria-expanded="false"] .collapsibleSwitch::after {
+    content: "+"; /* Plus */
+}
+
 .collapsibleWrapper {
     padding-bottom: 0;
     margin-bottom: 1em;
@@ -163,6 +216,7 @@ td {
 
 .hiddenElement {
     display: none;
+    border:0;
 }
 
 .emptyColumn {
@@ -184,6 +238,12 @@ td {
     border-radius: 3px;
 }
 
+@media screen and (-ms-high-contrast:active) {
+    .hotBarBar {
+        background-color: highlight;
+    }
+}
+
 .hotBarLabel {
     padding: 0.4em 1.2em 2px 0;
     white-space: nowrap;
@@ -193,6 +253,12 @@ td {
     color: #E44D4D; /* A nice red */
 }
 
+@media screen and (-ms-high-contrast:active) {
+    .negativeCell {
+        color: highlight;
+    }
+}
+
 #hop {
     min-width: 3em;
 }
@@ -223,6 +289,13 @@ td {
     padding: 0;
 }
 
-.ms-Button-icon {
-    display: inline-block;
+@media screen and (-ms-high-contrast:active) {
+    .tableHeaderButton .sortArrow::after { color: buttontext; }
+    button .collapsibleSwitch::after { color: buttontext; }
 }
+
+/* bug fix 1691247 */
+.ms-Button.ms-Button--primary {
+    color: #FFFFFF;
+    background-color: #0677D3;
+}
diff --git a/src/Content/MobilePane-ios.css b/src/Content/MobilePane-ios.css
@@ -1,4 +1,5 @@
-.code-box > pre {
+/* Framework7 specific overrides */
+.code-box>pre {
     background-color: #eaeaea;
     border: 1px solid #ccc;
     padding: 5px 10px;
@@ -10,7 +11,8 @@
     display: none;
 }
 
-.timeline-item-subtitle, .timeline-item-text {
+.timeline-item-subtitle,
+.timeline-item-text {
     word-wrap: break-word;
 }
 
@@ -27,11 +29,55 @@
     background: #f4f4f4;
 }
 
-.content-block-title{
-    text-transform:none;
-    white-space:normal;
+.content-block-title {
+    text-transform: none;
+    white-space: normal;
 }
 
 .content-block {
     word-wrap: break-word;
 }
+
+a,
+a:visited {
+    color: #000000;
+    text-decoration: underline;
+}
+
+a:hover {
+    color: #444;
+}
+
+a:focus,
+div:focus {
+    outline: #0072cc solid 2px;
+    outline-offset: 2px;
+}
+
+a.item-content,
+a.tab-link {
+    outline-offset: -4px;
+    text-decoration: none;
+}
+
+.content-block-title {
+    overflow: visible;
+}
+/* See MutationObserver in renderItem to see how we set the height back to auto after this */
+.accordion-item:not(.accordion-item-expanded) .accordion-item-content {
+        display: none;
+}
+
+@media screen and (-ms-high-contrast:active) {
+    .progressbar span {
+        background: highlight;
+    }
+}
+
+.list-block .item-link .item-inner, .list-block .list-button .item-inner {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%270%200%2060%20120%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20d%3D%27m60%2061.5-38.25%2038.25-9.75-9.75%2029.25-28.5-29.25-28.5%209.75-9.75z%27%20fill%3D%27%23000000%27%2F%3E%3C%2Fsvg%3E");
+}
+
+.list-block .accordion-item-expanded.media-item .accordion-item-toggle .item-title-row,.list-block .accordion-item-expanded.media-item>.item-link .item-title-row,.list-block.media-list .accordion-item-expanded .accordion-item-toggle .item-title-row,.list-block.media-list .accordion-item-expanded>.item-link .item-title-row,.list-block:not(.media-list) .accordion-item-expanded:not(.media-item) .accordion-item-toggle .item-inner,.list-block:not(.media-list) .accordion-item-expanded:not(.media-item)>.item-link .item-inner {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%2060%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'm60%2061.5-38.25%2038.25-9.75-9.75%2029.25-28.5-29.25-28.5%209.75-9.75z'%20transform%3D'translate(115%2C%2030)%20rotate(90)'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
+}
diff --git a/src/Content/Office.css b/src/Content/Office.css
@@ -19,10 +19,13 @@ blockquote { font-style: italic; margin-left: 1em; }
 
 /* Links
 ***************************************************************/
-a { color: #898989; text-decoration: underline; }
-a:visited { color: #898989; }
+a { color: #000000; text-decoration: underline; }
+a:visited { color: #000000; }
 a:hover { color: #444; text-decoration: none; }
-a:focus { outline: 0; }
+a:focus {
+    outline: #0072cc solid 2px;
+    outline-offset: 2px;
+}
 a:hover, a:active { outline: 0; }
 h1 a { text-decoration: none; }
 
@@ -47,7 +50,7 @@ input[type="submit"], input[type="button"] { height: 24px; padding-left: 1em; pa
 
 /* Tables
 ***************************************************************/
-th, td { text-align: left; vertical-align: top; padding: .4em 1.2em 1em 0; line-height: 1.2em; }
+th, td { text-align: left; vertical-align: top; padding: .4em 1.2em 1em 0; line-height: 1.3em; }
 
 /* Tiles
 ***************************************************************/