mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
A11y: Fixes some fastpass errors for /datasources/* routes (#39577)
* A11y: Fixes some fastpass errors for /datasources/* routes See #39429
This commit is contained in:
parent
f61c8d3eed
commit
75a55379f1
@ -12,7 +12,7 @@ const addDataSource = () => {
|
||||
e2e.components.DataSourcePicker.container()
|
||||
.should('be.visible')
|
||||
.within(() => {
|
||||
e2e.components.Select.input().should('be.visible').click({ force: true });
|
||||
e2e.components.DataSourcePicker.input().should('be.visible').click({ force: true });
|
||||
});
|
||||
|
||||
e2e().contains('gdev-tempo').scrollIntoView().should('be.visible').click();
|
||||
@ -53,7 +53,7 @@ describe('Exemplars', () => {
|
||||
e2e.components.DataSourcePicker.container()
|
||||
.should('be.visible')
|
||||
.within(() => {
|
||||
e2e.components.Select.input().should('be.visible').click();
|
||||
e2e.components.DataSourcePicker.input().should('be.visible').click();
|
||||
});
|
||||
e2e().contains(dataSourceName).scrollIntoView().should('be.visible').click();
|
||||
e2e.components.TimePicker.openButton().click();
|
||||
|
@ -11,7 +11,7 @@ e2e.scenario({
|
||||
e2e.components.DataSourcePicker.container()
|
||||
.should('be.visible')
|
||||
.within(() => {
|
||||
e2e.components.Select.input().should('be.visible').click();
|
||||
e2e.components.DataSourcePicker.input().should('be.visible').click();
|
||||
});
|
||||
|
||||
cy.contains('gdev-prometheus').scrollIntoView().should('be.visible').click();
|
||||
|
@ -50,8 +50,11 @@ e2e.scenario({
|
||||
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('p2').should('be.visible').click();
|
||||
|
||||
e2e.components.PageToolbar.container().click();
|
||||
|
||||
e2e.components.DashboardLinks.dropDown().should('be.visible').click().wait('@tagsTemplatingSearch');
|
||||
e2e.components.DashboardLinks.dropDown()
|
||||
.scrollIntoView()
|
||||
.should('be.visible')
|
||||
.click()
|
||||
.wait('@tagsTemplatingSearch');
|
||||
|
||||
// verify all links, should have p2 value
|
||||
verifyLinks('p2');
|
||||
|
@ -14,7 +14,7 @@ describe('Trace view', () => {
|
||||
e2e.components.DataSourcePicker.container()
|
||||
.should('be.visible')
|
||||
.within(() => {
|
||||
e2e.components.Select.input().should('be.visible').click();
|
||||
e2e.components.DataSourcePicker.input().should('be.visible').click();
|
||||
});
|
||||
|
||||
e2e().contains('gdev-jaeger').scrollIntoView().should('be.visible').click();
|
||||
|
@ -85,7 +85,7 @@ describe('Variables - Add variable', () => {
|
||||
e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsDataSourceSelect()
|
||||
.should('be.visible')
|
||||
.within(() => {
|
||||
e2e.components.Select.input().should('be.visible').type('gdev-testdata').type('{enter}');
|
||||
e2e.components.DataSourcePicker.input().should('be.visible').type('gdev-testdata').type('{enter}');
|
||||
});
|
||||
|
||||
e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsQueryInput()
|
||||
@ -139,7 +139,7 @@ describe('Variables - Add variable', () => {
|
||||
e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsDataSourceSelect()
|
||||
.should('be.visible')
|
||||
.within(() => {
|
||||
e2e.components.Select.input().should('be.visible').type('gdev-testdata').type('{enter}');
|
||||
e2e.components.DataSourcePicker.input().should('be.visible').type('gdev-testdata').type('{enter}');
|
||||
});
|
||||
|
||||
e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsQueryInput()
|
||||
|
@ -96,7 +96,7 @@ class DarkColors implements ThemeColorsBase<Partial<ThemeRichColor>> {
|
||||
text = {
|
||||
primary: `rgb(${this.whiteBase})`,
|
||||
secondary: `rgba(${this.whiteBase}, 0.65)`,
|
||||
disabled: `rgba(${this.whiteBase}, 0.40)`,
|
||||
disabled: `rgba(${this.whiteBase}, 0.57)`,
|
||||
link: palette.blueDarkText,
|
||||
maxContrast: palette.white,
|
||||
};
|
||||
|
@ -202,6 +202,7 @@ export const Components = {
|
||||
},
|
||||
DataSourcePicker: {
|
||||
container: 'Data source picker select container',
|
||||
input: () => 'input[id="data-source-picker"]',
|
||||
},
|
||||
TimeZonePicker: {
|
||||
container: 'Time zone picker select container',
|
||||
|
@ -145,6 +145,7 @@ export class DataSourcePicker extends PureComponent<DataSourcePickerProps, DataS
|
||||
return (
|
||||
<div aria-label={selectors.components.DataSourcePicker.container}>
|
||||
<Select
|
||||
inputId="data-source-picker"
|
||||
menuShouldPortal
|
||||
className={styles.select}
|
||||
isMulti={false}
|
||||
|
@ -69,9 +69,7 @@ export const Card: CardInterface = ({ heading, description, disabled, href, onCl
|
||||
<div className={styles.inner}>
|
||||
<div className={styles.info}>
|
||||
<div>
|
||||
<div className={styles.heading} role="heading">
|
||||
{heading}
|
||||
</div>
|
||||
<h2 className={styles.heading}>{heading}</h2>
|
||||
{meta}
|
||||
{description && <p className={styles.description}>{description}</p>}
|
||||
</div>
|
||||
@ -115,6 +113,7 @@ export const getCardStyles = stylesFactory((theme: GrafanaTheme2) => {
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
font-size: ${theme.typography.size.md};
|
||||
letter-spacing: inherit;
|
||||
line-height: ${theme.typography.body.lineHeight};
|
||||
color: ${theme.colors.text.primary};
|
||||
font-weight: ${theme.typography.fontWeightMedium};
|
||||
|
@ -16,6 +16,7 @@ export interface Props extends Omit<FieldProps, 'css' | 'horizontal' | 'descript
|
||||
grow?: boolean;
|
||||
/** Make field's background transparent */
|
||||
transparent?: boolean;
|
||||
htmlFor?: string;
|
||||
}
|
||||
|
||||
export const InlineField: FC<Props> = ({
|
||||
@ -27,13 +28,14 @@ export const InlineField: FC<Props> = ({
|
||||
loading,
|
||||
disabled,
|
||||
className,
|
||||
htmlFor,
|
||||
grow,
|
||||
transparent,
|
||||
...htmlProps
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
const styles = getStyles(theme, grow);
|
||||
const inputId = getChildId(children);
|
||||
const inputId = htmlFor ?? getChildId(children);
|
||||
|
||||
const labelElement =
|
||||
typeof label === 'string' ? (
|
||||
|
@ -43,7 +43,12 @@ export function XrayLinkConfig({ datasourceUid, onChange }: Props) {
|
||||
)}
|
||||
|
||||
<div className="gf-form-group">
|
||||
<InlineField label="Data source" labelWidth={28} tooltip="X-ray data source containing traces">
|
||||
<InlineField
|
||||
htmlFor="data-source-picker"
|
||||
label="Data source"
|
||||
labelWidth={28}
|
||||
tooltip="X-ray data source containing traces"
|
||||
>
|
||||
<DataSourcePicker
|
||||
pluginId={xRayDsId}
|
||||
onChange={(ds) => onChange(ds.uid)}
|
||||
|
Loading…
Reference in New Issue
Block a user