mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
A11y/Dashboard: Fix various dashboard settings issues (#40641)
See #39429
This commit is contained in:
parent
5b6831ab4d
commit
565537c6e2
@ -7,6 +7,7 @@ import { SlideOutTransition } from '../transitions/SlideOutTransition';
|
||||
import { FadeTransition } from '../transitions/FadeTransition';
|
||||
import { Spinner } from '../Spinner/Spinner';
|
||||
import { GrafanaTheme2 } from '@grafana/data';
|
||||
import tinycolor from 'tinycolor2';
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => {
|
||||
const singleValue = css`
|
||||
@ -35,7 +36,7 @@ const getStyles = (theme: GrafanaTheme2) => {
|
||||
`;
|
||||
|
||||
const disabled = css`
|
||||
color: ${theme.colors.action.disabledText};
|
||||
color: ${tinycolor(theme.colors.text.disabled).setAlpha(0.64).toString()};
|
||||
`;
|
||||
|
||||
return { singleValue, container, item, disabled };
|
||||
|
@ -100,11 +100,12 @@ class AddPermissions extends Component<Props, NewDashboardAclItem> {
|
||||
{() => (
|
||||
<HorizontalGroup>
|
||||
<Select
|
||||
menuShouldPortal
|
||||
aria-label="Role to add new permission to"
|
||||
isSearchable={false}
|
||||
value={this.state.type}
|
||||
options={dashboardAclTargets}
|
||||
onChange={this.onTypeChanged}
|
||||
menuShouldPortal
|
||||
/>
|
||||
|
||||
{newItem.type === AclTarget.User ? (
|
||||
@ -118,12 +119,13 @@ class AddPermissions extends Component<Props, NewDashboardAclItem> {
|
||||
<span className={styles.label}>Can</span>
|
||||
|
||||
<Select
|
||||
menuShouldPortal
|
||||
aria-label="Permission level"
|
||||
isSearchable={false}
|
||||
value={this.state.permission}
|
||||
options={dashboardPermissionLevels}
|
||||
onChange={this.onPermissionChanged}
|
||||
width={25}
|
||||
menuShouldPortal
|
||||
/>
|
||||
<Button data-save-permission type="submit" disabled={!isValid}>
|
||||
Save
|
||||
|
@ -25,16 +25,17 @@ export default class DisabledPermissionListItem extends Component<Props, any> {
|
||||
<td>
|
||||
<div className="gf-form">
|
||||
<Select
|
||||
menuShouldPortal
|
||||
aria-label={`Permission level for "${item.name}"`}
|
||||
options={dashboardPermissionLevels}
|
||||
onChange={() => {}}
|
||||
disabled={true}
|
||||
value={currentPermissionLevel}
|
||||
menuShouldPortal
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<Button size="sm" disabled icon="lock" />
|
||||
<Button aria-label={`Remove permission for "${item.name}"`} size="sm" icon="lock" disabled />
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
|
@ -75,20 +75,27 @@ export default class PermissionsListItem extends PureComponent<Props> {
|
||||
<td className="query-keyword">Can</td>
|
||||
<td>
|
||||
<Select
|
||||
menuShouldPortal
|
||||
aria-label={`Permission level for "${item.name}"`}
|
||||
isSearchable={false}
|
||||
options={dashboardPermissionLevels}
|
||||
onChange={this.onPermissionChanged}
|
||||
disabled={item.inherited}
|
||||
value={currentPermissionLevel}
|
||||
width={25}
|
||||
menuShouldPortal
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
{!item.inherited ? (
|
||||
<Button size="sm" variant="destructive" icon="times" onClick={this.onRemoveItem} />
|
||||
<Button
|
||||
aria-label={`Remove permission for "${item.name}"`}
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
icon="times"
|
||||
onClick={this.onRemoveItem}
|
||||
/>
|
||||
) : (
|
||||
<Button size="sm" disabled icon="times" />
|
||||
<Button aria-label={`Remove permission for "${item.name}" (Disabled)`} size="sm" disabled icon="times" />
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
|
@ -65,6 +65,7 @@ export class TeamPicker extends Component<Props, State> {
|
||||
className={className}
|
||||
placeholder="Select a team"
|
||||
noOptionsMessage="No teams found"
|
||||
aria-label="Team picker"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
@ -76,6 +76,7 @@ export class UserPicker extends Component<Props, State> {
|
||||
onChange={onSelected}
|
||||
placeholder="Start typing to search for user"
|
||||
noOptionsMessage="No users found"
|
||||
aria-label="User picker"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
@ -41,6 +41,12 @@ export const DiffViewer: React.FC<ReactDiffViewerProps> = ({ oldValue, newValue
|
||||
codeFold: {
|
||||
fontSize: theme.typography.size.sm,
|
||||
},
|
||||
gutter: `
|
||||
pre {
|
||||
color: ${tinycolor(theme.colors.textFaint).setAlpha(1).toString()};
|
||||
opacity: 0.61;
|
||||
}
|
||||
`,
|
||||
};
|
||||
|
||||
return (
|
||||
|
@ -25,6 +25,7 @@ export const VersionHistoryTable: React.FC<VersionsTableProps> = ({ versions, on
|
||||
<tr key={version.id}>
|
||||
<td>
|
||||
<Checkbox
|
||||
aria-label={`Toggle selection of version ${version.version}`}
|
||||
className={css`
|
||||
display: inline;
|
||||
`}
|
||||
|
Loading…
Reference in New Issue
Block a user