Logs A11y: Support keyboard interactions with log lines (#60561)

* Logs A11y: Support keyboard interactions with log lines

* LogRowMessage: specify text align

Co-authored-by: Sven Grossmann <sven.grossmann@grafana.com>

Co-authored-by: Sven Grossmann <sven.grossmann@grafana.com>
This commit is contained in:
Matias Chomicki 2022-12-21 14:45:47 +01:00 committed by GitHub
parent c90756eef5
commit c537d3699c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -77,6 +77,16 @@ const getStyles = (theme: GrafanaTheme2, showContextButton: boolean, isInDashboa
right: ${isInDashboard ? '40px' : `calc(75px + ${theme.spacing()} + ${showContextButton ? '80px' : '40px'})`};
margin-top: -${theme.spacing(0.125)};
`,
logLine: css`
background-color: transparent;
border: none;
diplay: inline;
font-family: ${theme.typography.fontFamilyMonospace};
font-size: ${theme.typography.bodySmall.fontSize};
letter-spacing: ${theme.typography.bodySmall.letterSpacing};
text-align: left;
padding: 0;
`,
};
};
@ -193,9 +203,9 @@ class UnThemedLogRowMessage extends PureComponent<Props> {
}}
/>
)}
<span className={cx(styles.positionRelative, { [styles.rowWithContext]: contextIsOpen })}>
<button className={cx(styles.logLine, styles.positionRelative, { [styles.rowWithContext]: contextIsOpen })}>
{renderLogMessage(hasAnsi, restructuredEntry, row.searchWords, style.logsRowMatchHighLight)}
</span>
</button>
</div>
</td>
{showRowMenu && (