mirror of
https://github.com/HeyPuter/firefox.git
synced 2026-11-13 20:14:57 -10:00
Nicolas Chevobbe
c2f7c23432
The data were presented in a table-like fashion, but weren't using accessible elements for this, making it impossible to understand when using a screenreader. We switch to use `<table>` and proper internal elements. The pie-chart wasn't accessible at all, so we create groups and adds proper role to items, and wrap slices in an interactive element so they can be interacted with through the keyboard. This allow us to remove the fail-if annotation on the browser_net_statistics-02.js test. Some items were missing, both in the table and the pie-chart, to make the panel cleaner. The downside is that it was hard for a keyboard-only user to understand the whole thing. So now, we do put all the data in the DOM, and label them with 'aria-label' attribute when needed.. Finally, we take this opportuniy to cleanup the implementation a bit, removing unnecessary CSS and properties. Differential Revision: https://phabricator.services.mozilla.com/D155364
136 lines
2.5 KiB
CSS
136 lines
2.5 KiB
CSS
/* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
|
|
|
/* Chart */
|
|
|
|
.generic-chart-container {
|
|
/* Hack: force hardware acceleration */
|
|
transform: translateZ(1px);
|
|
}
|
|
|
|
.theme-dark .generic-chart-container {
|
|
color: var(--theme-selection-color);
|
|
}
|
|
|
|
.theme-light .generic-chart-container {
|
|
color: var(--theme-text-color-alt);
|
|
}
|
|
|
|
.chart-colored-blob {
|
|
fill: var(--theme-body-color);
|
|
background: var(--theme-body-color);
|
|
}
|
|
|
|
/* Chart: Pie */
|
|
|
|
.pie-chart-slice {
|
|
stroke-width: 1px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.theme-dark .pie-chart-slice {
|
|
stroke: rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.theme-light .pie-chart-slice {
|
|
stroke: rgba(255,255,255,0.8);
|
|
}
|
|
|
|
.theme-dark .pie-chart-slice[largest] {
|
|
stroke-width: 2px;
|
|
stroke: #fff;
|
|
}
|
|
|
|
.theme-light .pie-chart-slice[largest] {
|
|
stroke: #000;
|
|
}
|
|
|
|
.pie-chart-label {
|
|
text-anchor: middle;
|
|
dominant-baseline: middle;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.theme-dark .pie-chart-label {
|
|
fill: #000;
|
|
}
|
|
|
|
.theme-light .pie-chart-label {
|
|
fill: #fff;
|
|
}
|
|
|
|
.pie-chart-container[slices="1"] > .pie-chart-slice {
|
|
stroke-width: 0px;
|
|
}
|
|
|
|
.pie-chart-slice,
|
|
.pie-chart-label {
|
|
transition: all 0.1s ease-out;
|
|
}
|
|
|
|
.pie-chart-slice:not(:hover, [focused]),
|
|
.pie-chart-slice:not(:hover, [focused]) + .pie-chart-label {
|
|
transform: none !important;
|
|
}
|
|
|
|
/* Chart: Table */
|
|
|
|
.table-chart-title {
|
|
padding-bottom: 10px;
|
|
font-size: 120%;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.table-chart-row {
|
|
margin-top: 1px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.table-chart-grid:hover .table-chart-row {
|
|
transition: opacity 0.1s ease-in-out;
|
|
}
|
|
|
|
.table-chart-grid:not(:hover) .table-chart-row {
|
|
transition: opacity 0.2s ease-in-out;
|
|
}
|
|
|
|
.generic-chart-container:hover > .table-chart-grid:hover .table-chart-row:not(:hover),
|
|
.generic-chart-container:hover ~ .table-chart-container > .table-chart-grid .table-chart-row:not([focused]) {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.table-chart-row-box {
|
|
width: 8px;
|
|
height: 1.5em;
|
|
margin-inline-end: 10px;
|
|
}
|
|
|
|
.table-chart-row-label {
|
|
width: 8em;
|
|
padding-inline-end: 6px;
|
|
cursor: inherit;
|
|
}
|
|
|
|
.table-chart-totals {
|
|
margin-top: 8px;
|
|
padding-top: 6px;
|
|
}
|
|
|
|
.table-chart-totals {
|
|
border-top: 1px solid var(--theme-splitter-color);
|
|
}
|
|
|
|
.table-chart-summary-label {
|
|
font-weight: 600;
|
|
padding: 1px 0px;
|
|
}
|
|
|
|
.theme-dark .table-chart-summary-label {
|
|
color: var(--theme-selection-color);
|
|
}
|
|
|
|
.theme-light .table-chart-summary-label {
|
|
color: var(--theme-body-color);
|
|
}
|