fix: some accessibility issues (#182)

ForkbombEu · Nov 8, 2024 · 7ba0a06 · 7ba0a06
1 parent a91ca73
commit 7ba0a06
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 8 deletions.
diff --git a/src/components/d-did-box/d-did-box.tsx b/src/components/d-did-box/d-did-box.tsx
@@ -21,11 +21,11 @@ export class DDidBox {
           <a class="flex h-12" href={`https://explorer.did.dyne.org/details/did:dyne:${fullId}`}>
             <d-text size="s" class="w-full flex justify-center flex-wrap space-y-0.5">
               <span class="w-4 h-4 mr-2">
-                <d-icon icon="key" outline/>
+                <d-icon icon="key" outline />
               </span>
-              <span>{'did'}</span>
+              <span class="text-on-alt">{'did'}</span>
               <span class="text-gray-400">:</span>
-              <span class="text-warning">{method}</span>
+              <span class="text-on">{method}</span>
               <span class="text-gray-400">:</span>
               <span class="text-on-alt">{submethod}</span>
               <span class="text-gray-400">:</span>

diff --git a/src/components/header/d-header.tsx b/src/components/header/d-header.tsx
@@ -23,7 +23,7 @@ export class DHeader {
                 <ion-buttons slot="start">
                   <ion-button onClick={() => this.backButtonClick.emit()}>
                     <div class="w-6 h-6 text-on" slot="icon-only">
-                      <d-icon icon="arrow-back" outline />
+                      <d-icon icon="arrow-back" outline aria-label="back" />
                     </div>
                   </ion-button>
                 </ion-buttons>
@@ -43,7 +43,7 @@ export class DHeader {
                   <ion-menu-toggle class="h-12 w-12">
                     <ion-button class="h-full w-full">
                       <div class="w-8 h-8 text-on flex justify-center items-center">
-                        <d-icon icon="settings" outline />
+                        <d-icon icon="settings" outline aria-label="settings"/>
                       </div>
                     </ion-button>
                   </ion-menu-toggle>

diff --git a/src/components/input/d-input.tsx b/src/components/input/d-input.tsx
@@ -31,7 +31,7 @@ export class DInput {
   private changePasswordVisibility = () => {
     this.type = this.type === 'password' ? 'text' : 'password';
   };
-  
+
   componentDidLoad() {
     const ionInputEl = this.el.shadowRoot.querySelector('ion-input');
     if (ionInputEl && this.name) {
@@ -80,8 +80,16 @@ export class DInput {
             </d-button>
           )}
           {this.hidable && (
-            <d-button class="h-full" slot="end" clear onClick={this.changePasswordVisibility} aria-checked={this.type !== 'password' ? 'true' : 'false'} aria-label="show password" role="switch">
-              {this.type === 'password' ? <d-icon icon="visibility" outline class="text-on" /> : <d-icon icon="visibility-off" outline class="text-on"/>}
+            <d-button
+              class="h-full"
+              slot="end"
+              clear
+              onClick={this.changePasswordVisibility}
+              aria-checked={this.type !== 'password' ? 'true' : 'false'}
+              aria-label="show password"
+              role="switch"
+            >
+              {this.type === 'password' ? <d-icon icon="visibility" outline class="text-on" /> : <d-icon icon="visibility-off" outline class="text-on" />}
             </d-button>
           )}
         </ion-input>