Skip to content

Commit

Permalink
users: Add screen reader accessible column
Browse files Browse the repository at this point in the history
Current users page lists the users in a table together with a column
for actions. However, the table header doesn't include the last actions
column and instead shows the table header line ending preemptively.

As we likely don't want a visibly named column for the actions this will
instead visually just extend the line so it is consistent while also
adding a screen reader friendly text to indicate what the column is
portraying.

This does mean we need to include
`@patternfly/patternfly/patternfly-addons.css` in the PatternFly CSS
import.
  • Loading branch information
Venefilyn committed Jan 23, 2025
1 parent fa91d69 commit 122bcbf
Show file tree
Hide file tree
Showing 2 changed files with 2 additions and 0 deletions.
1 change: 1 addition & 0 deletions pkg/lib/patternfly/patternfly-5-cockpit.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ $pf-v5-global--fonticon-path: "patternfly-icons-fake-path";
$pf-v5-global--disable-fontawesome: true !default; // Disable Font Awesome 5 Free

@import "@patternfly/patternfly/patternfly-base.scss";
@import "@patternfly/patternfly/patternfly-addons.css"; // Accessibility features

/* Import our own fonts since the PF4 font-face rules are filtered out in build.js */
@import "./fonts";
1 change: 1 addition & 0 deletions pkg/users/accounts-list.js
Original file line number Diff line number Diff line change
Expand Up @@ -382,6 +382,7 @@ const AccountsList = ({ accounts, current_user, groups, min_uid, max_uid, shells
{ title: _("ID"), sortable: true },
{ title: _("Last active"), sortable: true },
{ title: _("Group") },
{ title: <span className="pf-v5-u-screen-reader">{_("Actions")}</span> },
];

const sortRows = (rows, direction, idx) => {
Expand Down

0 comments on commit 122bcbf

Please sign in to comment.