A11y: Fixes some fastpass errors for /datasources/* routes (#39577)

* A11y: Fixes some fastpass errors for /datasources/* routes
See #39429
This commit is contained in:
kay delaney 2021-09-29 16:16:30 +01:00 committed by GitHub
parent f61c8d3eed
commit 75a55379f1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 25 additions and 14 deletions

View File

@ -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();

View File

@ -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();

View File

@ -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');

View File

@ -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();

View File

@ -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()

View File

@ -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,
};

View File

@ -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',

View File

@ -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}

View File

@ -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};

View File

@ -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' ? (

View File

@ -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)}