mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
A11y/Dashboard: Fix various fastpass issues for dashboard settings (#40335)
* A11y/Dashboard: Fix various fastpass issue for dashboard settings See #39429
This commit is contained in:
parent
f7cbb298f7
commit
db62ce477d
@ -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');
|
||||
});
|
||||
},
|
||||
});
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -63,6 +63,7 @@ export const AutoRefreshIntervals: FC<Props> = ({
|
||||
invalid={!!invalidIntervalsMessage}
|
||||
>
|
||||
<Input
|
||||
id="auto-refresh-input"
|
||||
invalid={!!invalidIntervalsMessage}
|
||||
value={intervalsString}
|
||||
onChange={onIntervalsChange}
|
||||
|
@ -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}
|
||||
|
@ -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,
|
||||
});
|
||||
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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' && (
|
||||
<>
|
||||
|
@ -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>
|
||||
))}
|
||||
|
Loading…
Reference in New Issue
Block a user