storage: Add aria-label for usage bars

Fixes cockpit-project#15858
ryelo · May 27, 2021 · 00da54e · 00da54e
1 parent c7909bc
commit 00da54e
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 3 deletions.
diff --git a/pkg/storaged/fsys-panel.jsx b/pkg/storaged/fsys-panel.jsx
@@ -64,7 +64,7 @@ export class FilesystemsPanel extends React.Component {
                     { title: mount_point || "-" },
                     {
                         title: fsys_size
-                            ? <StorageUsageBar stats={fsys_size} critical={0.95} />
+                            ? <StorageUsageBar stats={fsys_size} critical={0.95} block={block.IdLabel || block_name(block)} />
                             : fmt_size(block.Size)
                     }
                 ]

diff --git a/pkg/storaged/nfs-details.jsx b/pkg/storaged/nfs-details.jsx
@@ -339,7 +339,7 @@ export class NFSDetails extends React.Component {
                             <DescriptionListTerm className="control-DescriptionListTerm">{_("Size")}</DescriptionListTerm>
                             <DescriptionListDescription>
                                 { entry.mounted
-                                    ? <StorageUsageBar stats={fsys_size} critical={0.95} />
+                                    ? <StorageUsageBar stats={fsys_size} critical={0.95} block={entry.fields[1]} />
                                     : "--"
                                 }
                             </DescriptionListDescription>

diff --git a/pkg/storaged/storage-controls.jsx b/pkg/storaged/storage-controls.jsx
@@ -193,7 +193,7 @@ export class StorageOnOff extends React.Component {
  * in a dangerous color.
  */
 
-export const StorageUsageBar = ({ stats, critical }) => {
+export const StorageUsageBar = ({ stats, critical, block }) => {
     if (!stats)
         return null;
 
@@ -204,6 +204,7 @@ export const StorageUsageBar = ({ stats, critical }) => {
         <Progress value={stats[0]} max={stats[1]}
             valueText={labelText}
             label={labelText}
+            aria-label={cockpit.format(_("Usage of $0"), block)}
             variant={fraction > critical ? ProgressVariant.danger : ProgressVariant.info}
             measureLocation={ProgressMeasureLocation.outside} />
     );