[ACS-10300] a11y Fix: visible and accessible Group label is missing (#11330)

* [ACS-10300] a11y Fix: visible and accessible Group label is missing for the radio group

* [10300-a11y] sonar fix
This commit is contained in:
Mykyta Maliarchuk
2025-11-07 14:28:21 +01:00
committed by GitHub
parent ea58a5d794
commit b61912e3eb
3 changed files with 34 additions and 22 deletions
+2 -1
View File
@@ -18,7 +18,8 @@
"MINOR": "minor changes ({{version}})",
"COMMENT": "Leave a comment",
"ADD": "Add New Version",
"CANCEL": "Cancel"
"CANCEL": "Cancel",
"VERSION_TYPE_LABEL": "Select version type"
}
},
"CONFIRM_DELETE": {
@@ -1,5 +1,12 @@
<div class="adf-new-version-max-width">
<mat-radio-group class="adf-new-version-radio-group" [(ngModel)]="semanticVersion" (change)="onVersionChange()">
<div id="adf-version-type-label" class="adf-version-type-label">
{{ 'ADF_VERSION_LIST.ACTIONS.UPLOAD.VERSION_TYPE_LABEL' | translate }}
</div>
<mat-radio-group
class="adf-new-version-radio-group"
[(ngModel)]="semanticVersion"
(change)="onVersionChange()"
[attr.aria-labelledby]="'adf-version-type-label'">
<mat-radio-button class="adf-new-version-radio-button" id="adf-new-version-minor" [value]="'minor'">
{{ 'ADF_VERSION_LIST.ACTIONS.UPLOAD.MINOR' | translate: { version: minorVersion } }}
</mat-radio-button>
@@ -1,25 +1,5 @@
@use '../mat-selectors.scss' as ms;
.adf-new-version-radio-group {
display: inline-flex;
flex-direction: column;
}
.adf-new-version-radio-button {
margin: 5px;
margin-top: 2px;
margin-left: 5px;
}
.adf-version-upload-buttons {
padding-top: 18px;
padding-bottom: 5px;
display: flex;
float: right;
justify-content: space-between;
width: 100%;
}
.adf-version-upload {
.adf-new-version-max-width {
padding-top: 2px;
@@ -39,4 +19,28 @@
resize: none;
}
}
.adf-version-type-label {
margin-bottom: 8px;
}
.adf-new-version-radio-group {
display: inline-flex;
flex-direction: column;
}
.adf-new-version-radio-button {
margin: 5px;
margin-top: 2px;
margin-left: 5px;
}
.adf-version-upload-buttons {
padding-top: 18px;
padding-bottom: 5px;
display: flex;
float: right;
justify-content: space-between;
width: 100%;
}
}