Postgres Compute and Storage page accessibility fixes. (#16203)

* focus, required, aria

* Fix logic for focusing buttons

* Remove buttons focus
This commit is contained in:
nasc17
2021-07-28 12:28:40 -07:00
committed by GitHub
parent 25e237fa35
commit c32c09e1a7

View File

@@ -479,6 +479,7 @@ export class PostgresComputeAndStoragePage extends DashboardPage {
const keyComponent = this.modelView.modelBuilder.text().withProps({ const keyComponent = this.modelView.modelBuilder.text().withProps({
value: loc.workerNodeCount, value: loc.workerNodeCount,
requiredIndicator: true,
CSSStyles: { ...cssStyles.text, 'margin-block-start': '0px', 'margin-block-end': '0px' } CSSStyles: { ...cssStyles.text, 'margin-block-start': '0px', 'margin-block-end': '0px' }
}).component(); }).component();
@@ -488,6 +489,7 @@ export class PostgresComputeAndStoragePage extends DashboardPage {
const information = this.modelView.modelBuilder.button().withProps({ const information = this.modelView.modelBuilder.button().withProps({
iconPath: IconPathHelper.information, iconPath: IconPathHelper.information,
title: loc.workerNodesInformation, title: loc.workerNodesInformation,
ariaLabel: loc.workerNodesInformation,
width: '15px', width: '15px',
height: '15px', height: '15px',
enabled: false enabled: false
@@ -547,6 +549,7 @@ export class PostgresComputeAndStoragePage extends DashboardPage {
if (component.value === originalValue) { if (component.value === originalValue) {
return false; return false;
} else if ((!component.valid)) { } else if ((!component.valid)) {
this.discardButton.enabled = true;
return false; return false;
} else { } else {
this.saveButton.enabled = true; this.saveButton.enabled = true;
@@ -584,6 +587,7 @@ export class PostgresComputeAndStoragePage extends DashboardPage {
const information = this.modelView.modelBuilder.button().withProps({ const information = this.modelView.modelBuilder.button().withProps({
iconPath: IconPathHelper.information, iconPath: IconPathHelper.information,
title: description, title: description,
ariaLabel: description,
width: '15px', width: '15px',
height: '15px', height: '15px',
enabled: false enabled: false