From eeb692d5207b2ab29a239149312f8898cb62831e Mon Sep 17 00:00:00 2001 From: Fiete Ostkamp Date: Wed, 25 Mar 2026 15:07:14 +0100 Subject: [PATCH] Fix screen reader and contrast accessibility issues in cds-ui - make sure that all font-icons are `aria-hidden`="true" and have an alternative label that conveys the same semantic meaning than the icon - fix contrast issues Issue-ID: CCSDK-4188 Change-Id: Id70a0801ba890a3bb0208a12d02a673f74e9c2ca Signed-off-by: Fiete Ostkamp --- .../deploy-template/deploy-template.component.html | 2 +- .../modify-template/editor/editor.component.html | 12 +++++------ .../modify-template/modify-template.component.scss | 10 ++++----- .../search-from-database.component.html | 6 +++--- .../search-template/search-template.component.scss | 6 +++--- .../search-catalog/search-catalog.component.html | 8 ++++---- .../search-resource/search-resource.component.html | 2 +- .../sources-template.component.html | 4 ++-- .../sources-template.component.scss | 22 ++++++++++---------- cds-ui/client/src/styles.scss | 8 ++++---- .../execution-dashboard.component.html | 8 ++++---- .../execution-history.component.html | 4 ++-- .../execution-setup/execution-setup.component.css | 12 +++++------ .../execution-setup/execution-setup.component.html | 14 ++++++------- .../execution/live-view/live-view.component.html | 8 ++++---- .../configuration-dashboard.component.html | 16 +++++++-------- .../action-attributes.component.html | 8 ++++---- .../packages/designer/designer.component.css | 8 ++++---- .../packages/designer/designer.component.html | 16 +++++++-------- .../functions-attribute.component.html | 6 +++--- .../source-view/source-view.component.html | 12 +++++------ .../imports-tab/imports-tab.component.html | 4 ++-- .../package-creation.component.html | 4 ++-- .../scripts-tab/scripts-tab.component.html | 8 ++++---- .../templ-mapp-creation.component.html | 12 +++++------ .../templ-mapp-listing.component.html | 4 ++-- .../resource-dictionary-creation.component.html | 2 +- .../shared-modules/header/header.component.html | 6 +++--- cds-ui/designer-client/src/styles.css | 24 +++++++++++++++------- 29 files changed, 133 insertions(+), 123 deletions(-) diff --git a/cds-ui/client/src/app/feature-modules/blueprint/deploy-template/deploy-template.component.html b/cds-ui/client/src/app/feature-modules/blueprint/deploy-template/deploy-template.component.html index 739ef0479..526c61dae 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/deploy-template/deploy-template.component.html +++ b/cds-ui/client/src/app/feature-modules/blueprint/deploy-template/deploy-template.component.html @@ -31,7 +31,7 @@ limitations under the License. diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.html b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.html index 6424d3f00..1bfe4d33d 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.html +++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.html @@ -22,9 +22,9 @@ limitations under the License.
- - - + + +
@@ -37,7 +37,7 @@ limitations under the License. @@ -49,7 +49,7 @@ limitations under the License.
- +
@@ -59,4 +59,4 @@ limitations under the License.
- \ No newline at end of file + diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.scss b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.scss index 609d6faf0..3730612e5 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.scss +++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.scss @@ -21,8 +21,8 @@ limitations under the License. .modifyTemp { - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; height: 524px; width: 100% } @@ -69,12 +69,12 @@ limitations under the License. } .mat-button-disablled { - background-color: #c5cae8 !important; + background-color: #9fa8da !important; border-radius: 4px; - color: darkgray !important; + color: #616161 !important; line-height: none !important; margin: 0.5em; // padding: 0.5em; min-width: 6em; cursor: initial; -} \ No newline at end of file +} diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-from-database/search-from-database.component.html b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-from-database/search-from-database.component.html index 5c8435160..a1c1d3f4e 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-from-database/search-from-database.component.html +++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-from-database/search-from-database.component.html @@ -22,8 +22,8 @@ limitations under the License. - \ No newline at end of file + --> diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.scss b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.scss index beb05e26f..6c9de290f 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.scss +++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.scss @@ -31,12 +31,12 @@ limitations under the License. } .mat-upload-btn-disabled { - background-color: #c5cae8; + background-color: #9fa8da; margin-top: 10px; border-radius: 4px; margin-bottom: 5px; - color: darkgray; + color: #616161; min-width: 6em; border: none; cursor: initial; -} \ No newline at end of file +} diff --git a/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog.component.html b/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog.component.html index ed963a682..70aadeec4 100644 --- a/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog.component.html +++ b/cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog.component.html @@ -16,12 +16,12 @@ * See the License for the specific language governing permissions and * limitations under the License. * ============LICENSE_END========================================================= -*/--> +*/-->
-
@@ -41,4 +41,4 @@ - \ No newline at end of file + diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/search-resource/search-resource.component.html b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/search-resource/search-resource.component.html index fe1c92c4f..936035aa4 100644 --- a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/search-resource/search-resource.component.html +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/search-resource/search-resource.component.html @@ -23,7 +23,7 @@
- + {{option.tags}} diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.html b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.html index 2004e4823..3bd0c7479 100644 --- a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.html +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.html @@ -35,7 +35,7 @@ - + @@ -44,7 +44,7 @@

Source Options

- + db,mdsal,input,default,..

diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.scss b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.scss index 4664ad75f..ab212b11f 100644 --- a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.scss +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.scss @@ -25,7 +25,7 @@ margin: 0 25px 25px 0; display: inline-block; vertical-align: top; - border-bottom: solid 1px #ccc; + border-bottom: solid 1px #999; border-radius: 4px; } .list-container { @@ -36,21 +36,21 @@ vertical-align: top; } .sources-list { - border: solid 1px #ccc; + border: solid 1px #999; width: 900px; min-height: 30px; background: white; border-radius: 4px; overflow: hidden; display: block; - border-bottom: solid 1px #ccc; + border-bottom: solid 1px #999; } -.options-list { +.options-list { min-height: 30px; border-radius: 4px; overflow: hidden; display: block; - width: 100%; + width: 100%; } .sources-box { //border-bottom: solid 1px #ccc; @@ -64,10 +64,10 @@ background:white; font-size: 14px; min-height: 30px; - + } .options-box { - border: solid 1px #ccc; + border: solid 1px #999; color: white; display: flex; flex-direction: row; @@ -115,11 +115,11 @@ } .matStepNextBtn{ color:white; - background:#3f51b5; - margin-top: 10px; + background:#3f51b5; + margin-top: 10px; position: absolute; border-radius: 1em; -} +} .icon{ color: red; -} \ No newline at end of file +} diff --git a/cds-ui/client/src/styles.scss b/cds-ui/client/src/styles.scss index c75748a73..bf4ac43db 100644 --- a/cds-ui/client/src/styles.scss +++ b/cds-ui/client/src/styles.scss @@ -37,9 +37,9 @@ limitations under the License. } .btn-disablled { - background-color: #c5cae8; + background-color: #9fa8da; border-radius: 4px; - color: darkgray; + color: #616161; margin: 0.5em; padding: 0.5em; min-width: 6em; @@ -61,7 +61,7 @@ background-color:#3f51b5; } div.jsoneditor-tree div.jsoneditor-tree-inner{ padding-bottom: 300px; - background-color: white; + background-color: white; } div.jsoneditor-treepath { padding: 0 5px; @@ -69,4 +69,4 @@ div.jsoneditor-treepath { white-space: nowrap; outline: 0; color:white; - } \ No newline at end of file + } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/execution/execution-dashboard/execution-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/execution/execution-dashboard/execution-dashboard.component.html index ce4667721..619162290 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/execution/execution-dashboard/execution-dashboard.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/execution/execution-dashboard/execution-dashboard.component.html @@ -7,7 +7,7 @@

@@ -23,21 +23,21 @@ (click)="selectTab('setup')" id="nav-setup-tab" role="tab"> - Execution Setup + Execution Setup - Execution History + Execution History - Live View + Live View diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/execution/execution-history/execution-history.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/execution/execution-history/execution-history.component.html index e1ec19ecf..330ee98d6 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/execution/execution-history/execution-history.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/execution/execution-history/execution-history.component.html @@ -2,13 +2,13 @@
- +

No execution history yet.

Execute a blueprint from the Execution Setup tab to see results here.

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/execution/execution-setup/execution-setup.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/execution/execution-setup/execution-setup.component.css index c0a831e65..53b576c58 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/execution/execution-setup/execution-setup.component.css +++ b/cds-ui/designer-client/src/app/modules/feature-modules/execution/execution-setup/execution-setup.component.css @@ -5,7 +5,7 @@ .setup-card, .editor-card, .response-card { - border: 1px solid #e0e0e0; + border: 1px solid #bdbdbd; border-radius: 4px; } @@ -21,7 +21,7 @@ .form-group label { font-size: 12px; font-weight: 600; - color: #666; + color: #555; margin-bottom: 4px; } @@ -30,13 +30,13 @@ } .ace-editor-wrapper { - border: 1px solid #e0e0e0; + border: 1px solid #bdbdbd; border-radius: 3px; } /* Action Inputs */ .action-inputs-section { - border-top: 1px solid #e0e0e0; + border-top: 1px solid #bdbdbd; padding-top: 12px; } @@ -51,7 +51,7 @@ .input-field-label { font-size: 11px; font-weight: 600; - color: #555; + color: #444; margin-bottom: 2px; } @@ -69,7 +69,7 @@ .complex-fields { padding-left: 10px; - border-left: 2px solid #e0e0e0; + border-left: 2px solid #bdbdbd; } .complex-fields .form-group { diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/execution/execution-setup/execution-setup.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/execution/execution-setup/execution-setup.component.html index 0b6984a74..e975d8a94 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/execution/execution-setup/execution-setup.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/execution/execution-setup/execution-setup.component.html @@ -49,14 +49,14 @@
- + Loading action inputs...
- + Could not load input schema. Edit the JSON payload manually.
@@ -136,13 +136,13 @@ @@ -170,8 +170,8 @@
- - + + Execution Response
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/execution/live-view/live-view.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/execution/live-view/live-view.component.html index bb4182f91..b9f209695 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/execution/live-view/live-view.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/execution/live-view/live-view.component.html @@ -1,6 +1,6 @@
- +

No execution response available.

Execute a blueprint from the Execution Setup tab to see live results here.

@@ -11,9 +11,9 @@ 'status-failure': status === 'failure', 'status-completed': status === 'completed' }"> - - - + + + {{ statusLabel }}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html index 020da34cc..af11fb4a4 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html @@ -7,7 +7,7 @@

@@ -178,7 +178,7 @@
@@ -733,14 +733,14 @@ -
@@ -852,7 +852,7 @@
@@ -874,7 +874,7 @@
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html index 9ec99dcc7..053ac376b 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html @@ -65,7 +65,7 @@ + class="icon-delete-sm" aria-hidden="true">
@@ -113,11 +113,11 @@
+ placement="bottom" (click)="editAttribute(output)"> + class="icon-delete-sm" aria-hidden="true">
@@ -552,7 +552,7 @@ 'list-group-item list-group-item-action active': 'list-group-item list-group-item-action'" [id]="step" *ngFor="let step of steps" data-toggle="list" href="#list-home" role="tab" - aria-controls="home"> {{step}}
    • - +

  • Designer Mode

    • @@ -72,15 +72,15 @@
    - + - + - +
    @@ -112,7 +112,7 @@
    @@ -255,7 +255,7 @@ @@ -329,7 +329,7 @@
    + placement="bottom" (click)="viewFunctionSource()"> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.html index 52b66a3a1..fdb49bbf6 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.html @@ -143,7 +143,7 @@
    @@ -209,7 +209,7 @@ + title="Delete Template">
    @@ -279,4 +279,4 @@
    - \ No newline at end of file + diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.html index bd721d0b9..863473251 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.html @@ -7,7 +7,7 @@
  • CBA Packages
    • - +
  • {{viewedPackage.artifactName}}
    • - +

  • Topology View

    • @@ -70,15 +70,15 @@
    - + - + - +
    @@ -106,7 +106,7 @@