fix: disabled buttons focusable

Dataport · Dec 18, 2024 · 58bc05f · 58bc05f
1 parent b7ccad7
commit 58bc05f
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 0 deletions.
diff --git a/src/app/create-suggested-dates/create-suggested-dates.component.html b/src/app/create-suggested-dates/create-suggested-dates.component.html
@@ -347,6 +347,8 @@ <h2 class="font-medium text-bold d-inline" data-id="enterDate">
                 id="suggested-date-description-{{i}}"
                 data-id="descriptionInput"
                 class="form-control"
+                [attr.aria-disabled]="isSuggestedDateFromDatabase(i)"
+                [tabindex]="isSuggestedDateFromDatabase(i) ? -1 : 0"
                 [formControlName]="SuggestedDatesFormConstants.FORM_KEY_SUGGESTED_DATE_DESCRIPTION"
                 placeholder="{{isSuggestedDateFromDatabase(i) ? null : 'home.placeholder' | translate }}"
                 aria-describedby="description-too-long"

diff --git a/src/styles.scss b/src/styles.scss
@@ -135,6 +135,11 @@ input[type="date"] {
   text-transform: uppercase;
 }
 
+*[aria-disabled="true"] {
+  opacity: .5;
+  pointer-events: none;
+}
+
 .checkbox input[type="checkbox"] {
   display: none;
 }