fix: aria label not being read and css

verto-health · Oct 1, 2024 · fea3158 · fea3158
1 parent 26faa54
commit fea3158
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 18 deletions.
diff --git a/projects/astral-accessibility/src/lib/astral-accessibility.component.html b/projects/astral-accessibility/src/lib/astral-accessibility.component.html
@@ -6,6 +6,7 @@
   <div>
     <div class="astral-inverted-corner"></div>
     <button
+      [attr.aria-label]="(modalVisible ? 'Close' : 'Open') + ' Accessibility Panel'"
       [class]="astralAccessibilityIcon"
       (click)="modalVisible = !modalVisible"
     >
@@ -53,33 +54,32 @@
     [class]="
       modalVisible ? astralAccessibilityPanel + ' active' : 'astral-modal'
     "
+    attr.aria-label="Actions panel"
   >
-    <div class="actions">
-      <!-- <div class="action">
-        <astral-invert></astral-invert>
-      </div> -->
+    <div class="actions" attr.aria-label="Actions panel">
       <div
         class="action"
         *ngIf="this.enabledFeatures.includes('Screen Reader')"
+        attr.aria-label="Screen reader options"
       >
         <astral-screen-reader></astral-screen-reader>
       </div>
-      <div class="action" *ngIf="this.enabledFeatures.includes('Contrast')">
+      <div class="action" *ngIf="this.enabledFeatures.includes('Contrast')" attr.aria-label="Contrast options">
         <astral-contrast></astral-contrast>
       </div>
-      <div class="action" *ngIf="this.enabledFeatures.includes('Saturation')">
+      <div class="action" *ngIf="this.enabledFeatures.includes('Saturation')" attr.aria-label="Saturation options">
         <astral-saturate></astral-saturate>
       </div>
-      <div class="action" *ngIf="this.enabledFeatures.includes('Bigger Text')">
+      <div class="action" *ngIf="this.enabledFeatures.includes('Bigger Text')" attr.aria-label="Bigger Text options">
         <astral-text-size></astral-text-size>
       </div>
-      <div class="action" *ngIf="this.enabledFeatures.includes('Text Spacing')">
+      <div class="action" *ngIf="this.enabledFeatures.includes('Text Spacing')" attr.aria-label="Text Spacing options">
         <astral-text-spacing></astral-text-spacing>
       </div>
-      <div class="action" *ngIf="this.enabledFeatures.includes('Screen Mask')">
+      <div class="action" *ngIf="this.enabledFeatures.includes('Screen Mask')" attr.aria-label="Screen Masking options">
         <astral-screen-mask></astral-screen-mask>
       </div>
-      <div class="action" *ngIf="this.enabledFeatures.includes('Line Height')">
+      <div class="action" *ngIf="this.enabledFeatures.includes('Line Height')" attr.aria-label="Line Height options">
         <astral-line-height></astral-line-height>
       </div>
     </div>

diff --git a/projects/astral-accessibility/src/lib/astral-accessibility.component.scss b/projects/astral-accessibility/src/lib/astral-accessibility.component.scss
@@ -91,7 +91,7 @@
   @extend .astral-position;
   border: 0;
   background-color: var(--modalBackgroundColor);
-  border-radius: 0px 0px 0px 0px;
+  border-radius: 20px 0px 0px 0px;
   padding: 10px;
   padding-right: 18px;
   margin-right: -8px;

diff --git a/projects/astral-accessibility/src/lib/controls/screen-reader.component.ts b/projects/astral-accessibility/src/lib/controls/screen-reader.component.ts
@@ -101,13 +101,10 @@ export class ScreenReaderComponent {
 
     if (element) {
       if (this.states[this.currentState] != this.base) {
-        if (element.ariaLabel) {
-          // it has aria-label, use aria-label
-          this.speech.text = element.ariaLabel;
-        } else {
-          // otherwise get text content
-          this.speech.text = element.textContent || "";
-        }
+        const ariaLabel = element.getAttribute("aria-label") || element.getAttribute("attr.aria-label");
+        // use aria label if exists, otherwise text content, and lastly empty string
+        this.speech.text = ariaLabel || element.textContent || "";
+
         // cancel before speech, otherwise doesn't work
         speechSynthesis.cancel();
         speechSynthesis.speak(this.speech);