IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

A11y/Dashboard: Fix various fastpass issues for dashboard settings (#40335)

Browse Source 
* A11y/Dashboard: Fix various fastpass issue for dashboard settings
See #39429
This commit is contained in:
kay delaney 2021-10-18 13:51:26 +01:00 committed by GitHub
parent f7cbb298f7
commit db62ce477d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 27 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
e2e/suite1/specs/select-focus.spec.ts
View File

@ -13,7 +13,7 @@ e2e.scenario({
e2e.components.FolderPicker.container()
.should('be.visible')
.within(() => {
e2e.components.Select.input().should('be.visible').click();
e2e().get('#dashboard-folder-input').should('be.visible').click();
});
e2e.components.Select.option().should('be.visible').first().click();
@ -21,7 +21,7 @@ e2e.scenario({
e2e.components.FolderPicker.container()
.should('be.visible')
.within(() => {
e2e.components.Select.input().should('exist').should('have.focus');
e2e().get('#dashboard-folder-input').should('exist').should('have.focus');
});
e2e.pages.Dashboard.Settings.General.title().click();
@ -29,7 +29,7 @@ e2e.scenario({
e2e.components.FolderPicker.container()
.should('be.visible')
.within(() => {
e2e.components.Select.input().should('exist').should('not.have.focus');
e2e().get('#dashboard-folder-input').should('exist').should('not.have.focus');
});
},
});

2
public/app/core/components/Select/FolderPicker.tsx
View File

@ -178,7 +178,6 @@ export class FolderPicker extends PureComponent<Props, State> {
<AsyncSelect
inputId={inputId}
aria-label={selectors.components.FolderPicker.input}
menuShouldPortal
loadingMessage="Loading folders..."
defaultOptions
defaultValue={folder}
@ -187,6 +186,7 @@ export class FolderPicker extends PureComponent<Props, State> {
loadOptions={this.debouncedSearch}
onChange={this.onFolderChange}
onCreateOption={this.createNewFolder}
menuShouldPortal
/>
</div>
);

1
public/app/features/dashboard/components/DashboardSettings/AutoRefreshIntervals.tsx
View File

@ -63,6 +63,7 @@ export const AutoRefreshIntervals: FC<Props> = ({
invalid={!!invalidIntervalsMessage}
>
<Input
id="auto-refresh-input"
invalid={!!invalidIntervalsMessage}
value={intervalsString}
onChange={onIntervalsChange}

5
public/app/features/dashboard/components/DashboardSettings/GeneralSettings.tsx
View File

@ -86,16 +86,17 @@ export function GeneralSettingsUnconnected({ dashboard, updateTimeZone }: Props)
</h3>
<div className="gf-form-group">
<Field label="Name">
<Input name="title" onBlur={onBlur} defaultValue={dashboard.title} />
<Input id="title-input" name="title" onBlur={onBlur} defaultValue={dashboard.title} />
</Field>
<Field label="Description">
<Input name="description" onBlur={onBlur} defaultValue={dashboard.description} />
<Input id="description-input" name="description" onBlur={onBlur} defaultValue={dashboard.description} />
</Field>
<Field label="Tags">
<TagsInput tags={dashboard.tags} onChange={onTagsChange} />
</Field>
<Field label="Folder">
<FolderPicker
inputId="dashboard-folder-input"
initialTitle={dashboard.meta.folderTitle}
initialFolderId={dashboard.meta.folderId}
onChange={onFolderChange}

2
public/app/features/dashboard/components/DashboardSettings/LinksSettings.test.tsx
View File

@ -132,7 +132,7 @@ describe('LinksSettings', () => {
expect(getTableBodyRows().length).toBe(links.length);
// TODO remove skipPointerEventsCheck once https://github.com/jsdom/jsdom/issues/3232 is fixed
userEvent.click(within(getTableBody()).getAllByRole('button', { name: /delete/i })[0], undefined, {
userEvent.click(within(getTableBody()).getAllByRole('button', { name: 'Delete' })[0], undefined, {
skipPointerEventsCheck: true,
});

8
public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.tsx
View File

@ -83,13 +83,17 @@ export class TimePickerSettings extends PureComponent<Props, State> {
/>
</Field>
<Field label="Hide time picker">
<Switch value={!!this.props.timePickerHidden} onChange={this.onHideTimePickerChange} />
<Switch
id="hide-time-picker-toggle"
value={!!this.props.timePickerHidden}
onChange={this.onHideTimePickerChange}
/>
</Field>
<Field
label="Refresh live dashboards"
description="Continuously re-draw panels where the time range references 'now'"
>
<Switch value={!!this.props.liveNow} onChange={this.onLiveNowChange} />
<Switch id="refresh-live-dashboards-toggle" value={!!this.props.liveNow} onChange={this.onLiveNowChange} />
</Field>
</CollapsableSection>
);

8
public/app/features/dashboard/components/LinksSettings/LinkSettingsEdit.tsx
View File

@ -87,7 +87,13 @@ export const LinkSettingsEdit: React.FC<LinkSettingsEditProps> = ({ editLinkIdx,
<Input name="title" id="title" value={linkSettings.title} onChange={onChange} autoFocus={isNew} />
</Field>
<Field label="Type">
<Select menuShouldPortal value={linkSettings.type} options={linkTypeOptions} onChange={onTypeChange} />
<Select
inputId="link-type-input"
value={linkSettings.type}
options={linkTypeOptions}
onChange={onTypeChange}
menuShouldPortal
/>
</Field>
{linkSettings.type === 'dashboards' && (
<>

6
public/app/features/dashboard/components/LinksSettings/LinkSettingsList.tsx
View File

@ -94,7 +94,11 @@ export const LinkSettingsList: React.FC<LinkSettingsListProps> = ({ dashboard, o
<IconButton surface="header" aria-label="copy" name="copy" onClick={() => duplicateLink(link, idx)} />
</td>
<td style={{ width: '1%' }}>
<DeleteButton size="sm" onConfirm={() => deleteLink(idx)} />
<DeleteButton
aria-label={`Delete link with title "${link.title}"`}
size="sm"
onConfirm={() => deleteLink(idx)}
/>
</td>
</tr>
))}