Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improved accessibility for static labels and chips #8239

Closed
wants to merge 8 commits into from
Closed

Improved accessibility for static labels and chips #8239

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
2b99023
[frontend] Monochromatic and accessible labels
Bonsai8863 Aug 29, 2024
e938daa
[frontend] More accesible and monochromatic confidence levels and opi…
Bonsai8863 Sep 3, 2024
2931d55
[frontend] Removed icons from Threat Actor details lists
Bonsai8863 Sep 3, 2024
f0bfd07
[frontend] Various monochromatic chips
Bonsai8863 Sep 3, 2024
64077a1
[frontend] Knowledge graph node labels white/black depending on theme
Bonsai8863 Sep 4, 2024
21fa66d
[frontend] Pentagonal opinion radar in lightmode using more readable …
Bonsai8863 Sep 4, 2024
a1ff176
[frontend] Monochromatic itemColor
Bonsai8863 Sep 11, 2024
80669ec
[frontend] Addressing PR feedback
Bonsai8863 Sep 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion opencti-platform/opencti-front/src/components/ItemAccountStatus.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import React, { FunctionComponent } from 'react';
import Chip from '@mui/material/Chip';
import makeStyles from '@mui/styles/makeStyles';
import { useTheme } from '@mui/material';
import useAuth from '../utils/hooks/useAuth';
import type { Theme } from './Theme';

// Deprecated - https://mui.com/system/styles/basics/
// Do not use it for new code.
Expand Down Expand Up @@ -72,6 +75,8 @@ const ItemAccountStatus: FunctionComponent<ItemAccountStatusProps> = ({
account_status,
variant,
}) => {
const { me: { monochrome_labels } } = useAuth();
const theme = useTheme<Theme>();
const classes = useStyles();
const style = classes.chip;
const classStyle = computeAccountStatusStyle(account_status);
Expand All @@ -80,7 +85,12 @@ const ItemAccountStatus: FunctionComponent<ItemAccountStatusProps> = ({
classes={{ root: style }}
variant={variant}
label={label}
style={classStyle}
style={{
...classStyle,
color: theme.palette.chip.main,
borderColor: monochrome_labels ? theme.palette.background.accent : classStyle.borderColor,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just having a thought right now : wouldn't it be better to have a attribute in the chip if we want the monochrome or the normal behavior and have the theme.palette.... inside all chips directly ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like we're using the MUI chip, so we could create a wrapper for it to determine monochromatic label status and apply the appropriate colors/styling.

Ideally, at least in my opinion, we'd extend the Theme interface and then be able to create a custom theme like light mode or dark mode then be able to switch to a monochromatic theme instead of all these ternary checks. At the moment, I think the platform is currently set to only handle dark or light mode themes.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That actually is a good idea, why don't we chose that path ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I talked to @Jipegien about it over email/conversation and he said to wait for feedback before implementing this expanded theme approach.

background: monochrome_labels ? theme.palette.background.accent : classStyle.backgroundColor,
}}
/>
);
};
Expand Down
20 changes: 11 additions & 9 deletions opencti-platform/opencti-front/src/components/ItemBoolean.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { compose } from 'ramda';
import CircularProgress from '@mui/material/CircularProgress';
import { useTheme } from '@mui/styles';
import inject18n from './i18n';
import useAuth from '../utils/hooks/useAuth';

const styles = () => ({
chip: {
Expand Down Expand Up @@ -38,35 +39,36 @@ const styles = () => ({
},
});

const computeInlineStyles = (theme) => ({
const computeInlineStyles = (theme, isMonochrome = false) => ({
green: {
backgroundColor: 'rgba(76, 175, 80, 0.08)',
color: '#4caf50',
backgroundColor: isMonochrome ? theme.palette.background.accent : 'rgba(76, 175, 80, 0.08)',
color: theme.palette.chip.main,
},
red: {
backgroundColor: 'rgba(244, 67, 54, 0.08)',
color: '#f44336',
backgroundColor: isMonochrome ? theme.palette.background.accent : 'rgba(244, 67, 54, 0.08)',
color: theme.palette.chip.main,
},
blue: {
backgroundColor: 'rgba(92, 123, 245, 0.08)',
color: '#5c7bf5',
backgroundColor: isMonochrome ? theme.palette.background.accent : 'rgba(92, 123, 245, 0.08)',
color: theme.palette.chip.main,
},
ee: {
backgroundColor: theme.palette.ee.lightBackground,
backgroundColor: isMonochrome ? theme.palette.background.accent : theme.palette.ee.lightBackground,
color: theme.palette.ee.main,
},
});

const renderChip = (props) => {
const { classes, label, neutralLabel, status, variant, t, reverse } = props;
const { me: { monochrome_labels } } = useAuth();
const theme = useTheme();
let style = classes.chip;
if (variant === 'inList') {
style = classes.chipInList;
} else if (variant === 'large') {
style = classes.chipLarge;
}
const inlineStyles = computeInlineStyles(theme);
const inlineStyles = computeInlineStyles(theme, monochrome_labels);
if (status === true) {
return (
<Chip
Expand Down
Loading