fix(icon): set aria-hidden (#1126)

* fix(icon): set aria-hidden * docs: set aria-hidden attribute of nx-icon in examples * fix: set aria-hidden attribute of nx-icon in components --------- Co-authored-by: Philipp Fahrenschon <[email protected]>
allianz · Feb 15, 2024 · d7f47de · d7f47de
1 parent 8ae0652
commit d7f47de
Show file tree

Hide file tree

Showing 88 changed files with 423 additions and 198 deletions.
diff --git a/...ts/ng-aquila/documentation/examples/action/action-indicator/action-indicator-example.html b/...ts/ng-aquila/documentation/examples/action/action-indicator/action-indicator-example.html
@@ -4,7 +4,7 @@
     (click)="onSelect(action)"
     [selected]="action === selectedAction"
 >
-    <nx-icon nxActionIcon [name]="action.icon"></nx-icon>
+    <nx-icon nxActionIcon [name]="action.icon" aria-hidden="true"></nx-icon>
     <span class="label-content">
         {{action.label}}
         <nx-indicator

diff --git a/...g-aquila/documentation/examples/action/action-with-router/action-with-router-example.html b/...g-aquila/documentation/examples/action/action-with-router/action-with-router-example.html
@@ -5,6 +5,6 @@
     [queryParams]="action.query"
     routerLinkActive="is-selected"
 >
-    <nx-icon nxActionIcon [name]="action.icon"></nx-icon>
+    <nx-icon nxActionIcon [name]="action.icon" aria-hidden="true"></nx-icon>
     {{action.label}}
 </button>
diff --git a/projects/ng-aquila/documentation/examples/action/action/action-example.html b/projects/ng-aquila/documentation/examples/action/action/action-example.html
@@ -4,6 +4,6 @@
     (click)="onSelect(action)"
     [selected]="action === selectedAction"
 >
-    <nx-icon nxActionIcon [name]="action.icon"></nx-icon>
+    <nx-icon nxActionIcon [name]="action.icon" aria-hidden="true"></nx-icon>
     {{action.label}}
 </button>
diff --git a/projects/ng-aquila/documentation/examples/avatar/avatar-button/avatar-button-example.html b/projects/ng-aquila/documentation/examples/avatar/avatar-button/avatar-button-example.html
@@ -3,7 +3,7 @@
 </button>
 
 <button nxAvatar aria-label="show user details" class="nx-margin-right-s">
-    <nx-icon name="user-o"></nx-icon>
+    <nx-icon name="user-o" aria-hidden="true"></nx-icon>
 </button>
 
 <button nxAvatar aria-label="show user details" class="nx-margin-right-s">
@@ -21,7 +21,7 @@
     disabled
     class="nx-margin-right-s"
 >
-    <nx-icon name="user-o"></nx-icon>
+    <nx-icon name="user-o" aria-hidden="true"></nx-icon>
 </button>
 
 <button nxAvatar aria-label="show user details" disabled>

diff --git a/projects/ng-aquila/documentation/examples/avatar/avatar-colors/avatar-colors-example.html b/projects/ng-aquila/documentation/examples/avatar/avatar-colors/avatar-colors-example.html
@@ -2,14 +2,14 @@
     <div nxAvatar class="color-1 nx-margin-right-s">MD</div>
     <div nxAvatar class="color-2 nx-margin-right-s">MD</div>
     <div nxAvatar aria-label="Logged in" class="color-3">
-        <nx-icon name="user-o"></nx-icon>
+        <nx-icon name="user-o" aria-hidden="true"></nx-icon>
     </div>
 </div>
 
 <div class="container">
     <div nxAvatar class="color-4 nx-margin-right-s">MD</div>
     <div nxAvatar class="color-5 nx-margin-right-s">MD</div>
     <div nxAvatar aria-label="Logged in" class="color-6">
-        <nx-icon name="user-o"></nx-icon>
+        <nx-icon name="user-o" aria-hidden="true"></nx-icon>
     </div>
 </div>
diff --git a/projects/ng-aquila/documentation/examples/avatar/avatar/avatar-example.html b/projects/ng-aquila/documentation/examples/avatar/avatar/avatar-example.html
@@ -1,7 +1,7 @@
 <div nxAvatar class="nx-margin-right-s">MD</div>
 
 <div nxAvatar aria-label="Logged in" class="nx-margin-right-s">
-    <nx-icon name="user-o"></nx-icon>
+    <nx-icon name="user-o" aria-hidden="true"></nx-icon>
 </div>
 
 <div nxAvatar aria-label="Logged in as Samantha Owl">

diff --git a/projects/ng-aquila/documentation/examples/button/anchor-button/anchor-button-example.html b/projects/ng-aquila/documentation/examples/button/anchor-button/anchor-button-example.html
@@ -2,9 +2,14 @@
 <a nxButton="primary small" href="#" disabled>Small</a>
 
 <a nxButton="primary" href="#">
-    <nx-icon name="download" class="nx-margin-right-2xs"></nx-icon>Download
+    <nx-icon
+        name="download"
+        class="nx-margin-right-2xs"
+        aria-hidden="true"
+    ></nx-icon
+    >Download
 </a>
 
 <a nxIconButton="primary" aria-label="send mail" href="#">
-    <nx-icon name="mail-o"></nx-icon>
+    <nx-icon name="mail-o" aria-hidden="true"></nx-icon>
 </a>
diff --git a/...la/documentation/examples/button/button-icon-indicator/button-icon-indicator-example.html b/...la/documentation/examples/button/button-icon-indicator/button-icon-indicator-example.html
@@ -4,7 +4,7 @@
     type="button"
     class="nx-margin-bottom-0 nx-margin-right-xs"
 >
-    <nx-icon name="bell-o"></nx-icon>
+    <nx-icon name="bell-o" aria-hidden="true"></nx-icon>
     <nx-indicator position="over-icon"></nx-indicator>
 </button>
 
@@ -14,7 +14,7 @@
     type="button"
     class="nx-margin-bottom-0 nx-margin-right-xs"
 >
-    <nx-icon name="bell-o"></nx-icon>
+    <nx-icon name="bell-o" aria-hidden="true"></nx-icon>
     <nx-indicator position="over-icon">1</nx-indicator>
 </button>
 
@@ -24,6 +24,6 @@
     type="button"
     class="nx-margin-bottom-0"
 >
-    <nx-icon name="bell-o"></nx-icon>
+    <nx-icon name="bell-o" aria-hidden="true"></nx-icon>
     <nx-indicator position="over-icon">99+</nx-indicator>
 </button>
diff --git a/projects/ng-aquila/documentation/examples/button/button-icon/button-icon-example.html b/projects/ng-aquila/documentation/examples/button/button-icon/button-icon-example.html
@@ -1,15 +1,15 @@
 <button nxIconButton="primary" aria-label="send mail" type="button">
-    <nx-icon name="mail-o"></nx-icon>
+    <nx-icon name="mail-o" aria-hidden="true"></nx-icon>
 </button>
 <button nxIconButton="secondary" aria-label="like on facebook" type="button">
-    <nx-icon name="facebook"></nx-icon>
+    <nx-icon name="facebook" aria-hidden="true"></nx-icon>
 </button>
 <button nxIconButton="tertiary" aria-label="tweet" type="button">
-    <nx-icon name="twitter"></nx-icon>
+    <nx-icon name="twitter" aria-hidden="true"></nx-icon>
 </button>
 <button nxIconButton="cta" aria-label="send mail" type="button">
-    <nx-icon name="mail"></nx-icon>
+    <nx-icon name="mail" aria-hidden="true"></nx-icon>
 </button>
 <button nxIconButton="emphasis" disabled aria-label="send mail" type="button">
-    <nx-icon name="mail-o"></nx-icon>
+    <nx-icon name="mail-o" aria-hidden="true"></nx-icon>
 </button>
diff --git a/...ects/ng-aquila/documentation/examples/button/button-plain-a1/button-plain-a1-example.html b/...ects/ng-aquila/documentation/examples/button/button-plain-a1/button-plain-a1-example.html
@@ -16,10 +16,11 @@ <h4 nxHeadline="subsection-xsmall" class="nx-margin-bottom-s">
     type="button"
     class="nx-margin-right-m"
 >
-    <nx-icon name="download" nxIconPositionStart></nx-icon>Download
+    <nx-icon name="download" nxIconPositionStart aria-hidden="true"></nx-icon
+    >Download
 </button>
 <button nxPlainButton variant="secondary" type="button" aria-label="add item">
-    <nx-icon name="plus"></nx-icon>
+    <nx-icon name="plus" aria-hidden="true"></nx-icon>
 </button>
 
 <h4 nxHeadline="subsection-xsmall" class="nx-margin-bottom-s nx-margin-top-l">
@@ -41,10 +42,11 @@ <h4 nxHeadline="subsection-xsmall" class="nx-margin-bottom-s nx-margin-top-l">
     type="button"
     class="nx-margin-right-m"
 >
-    <nx-icon name="download" nxIconPositionStart></nx-icon>Secondary small
+    <nx-icon name="download" nxIconPositionStart aria-hidden="true"></nx-icon
+    >Secondary small
 </button>
 <button nxPlainButton size="small" type="button" aria-label="add item">
-    <nx-icon name="plus"></nx-icon>
+    <nx-icon name="plus" aria-hidden="true"></nx-icon>
 </button>
 <br />
 <button nxPlainButton size="small" critical type="button">Danger</button>
diff --git a/projects/ng-aquila/documentation/examples/button/button-plain/button-plain-example.html b/projects/ng-aquila/documentation/examples/button/button-plain/button-plain-example.html
@@ -2,10 +2,11 @@
     Plain Button
 </button>
 <button nxPlainButton type="button" class="nx-margin-right-m">
-    <nx-icon name="download" nxIconPositionStart></nx-icon>Download
+    <nx-icon name="download" nxIconPositionStart aria-hidden="true"></nx-icon
+    >Download
 </button>
 <button nxPlainButton type="button" aria-label="add item">
-    <nx-icon name="plus"></nx-icon>
+    <nx-icon name="plus" aria-hidden="true"></nx-icon>
 </button>
 <br />
 <button nxPlainButton="danger" type="button">Danger</button>
diff --git a/...ts/ng-aquila/documentation/examples/button/button-with-icon/button-with-icon-example.html b/...ts/ng-aquila/documentation/examples/button/button-with-icon/button-with-icon-example.html
@@ -1,21 +1,25 @@
 <button nxButton="primary" type="button">
-    <nx-icon name="download" nxIconPositionStart></nx-icon>Download
+    <nx-icon name="download" nxIconPositionStart aria-hidden="true"></nx-icon
+    >Download
 </button>
 <button nxButton="secondary" type="button">
-    <nx-icon name="arrow-right" nxIconPositionEnd></nx-icon>
+    <nx-icon name="arrow-right" nxIconPositionEnd aria-hidden="true"></nx-icon>
     next
 </button>
 <button nxButton="tertiary" type="button">
-    <nx-icon name="arrow-right" nxIconPositionStart></nx-icon>Details
+    <nx-icon name="arrow-right" nxIconPositionStart aria-hidden="true"></nx-icon
+    >Details
 </button>
 
 <button nxButton="primary small" type="button">
-    <nx-icon name="download" nxIconPositionStart></nx-icon>Download
+    <nx-icon name="download" nxIconPositionStart aria-hidden="true"></nx-icon
+    >Download
 </button>
 <button nxButton="secondary small" type="button">
-    <nx-icon name="arrow-right" nxIconPositionEnd></nx-icon>
+    <nx-icon name="arrow-right" nxIconPositionEnd aria-hidden="true"></nx-icon>
     next
 </button>
 <button nxButton="tertiary small" type="button">
-    <nx-icon name="arrow-right" nxIconPositionStart></nx-icon>Details
+    <nx-icon name="arrow-right" nxIconPositionStart aria-hidden="true"></nx-icon
+    >Details
 </button>
diff --git a/.../documentation/examples/card/selectable-card-product/selectable-card-product-example.html b/.../documentation/examples/card/selectable-card-product/selectable-card-product-example.html
@@ -25,8 +25,13 @@
                 class="nx-margin-left-xs"
                 [nxPopoverTriggerFor]="popover"
                 nxPopoverTrigger="click"
+                aria-label="More information"
             >
-                <nx-icon size="s" name="info-circle-o"></nx-icon>
+                <nx-icon
+                    size="s"
+                    name="info-circle-o"
+                    aria-hidden="true"
+                ></nx-icon>
             </button>
         </div>
     </div>

diff --git a/...on-table/comparison-table-disabled-columns/comparison-table-disabled-columns-example.html b/...on-table/comparison-table-disabled-columns/comparison-table-disabled-columns-example.html
@@ -58,7 +58,10 @@
                             nxPopoverTrigger="click"
                             type="button"
                         >
-                            <nx-icon name="info-circle-o"></nx-icon>
+                            <nx-icon
+                                name="info-circle-o"
+                                aria-hidden="true"
+                            ></nx-icon>
                         </button>
                         <nx-popover #popoverContent1>
                             <span>Summary of what all services include</span>
@@ -96,7 +99,10 @@
                             nxPopoverTrigger="click"
                             type="button"
                         >
-                            <nx-icon name="info-circle-o"></nx-icon>
+                            <nx-icon
+                                name="info-circle-o"
+                                aria-hidden="true"
+                            ></nx-icon>
                         </button>
                         <nx-popover #popoverContent2>
                             <span>Service headline popover content</span>

diff --git a/.../examples/comparison-table/comparison-table-dynamic/comparison-table-dynamic-example.html b/.../examples/comparison-table/comparison-table-dynamic/comparison-table-dynamic-example.html
@@ -39,7 +39,10 @@
                                 nxPopoverTrigger="click"
                                 type="button"
                             >
-                                <nx-icon name="info-circle-o"></nx-icon>
+                                <nx-icon
+                                    name="info-circle-o"
+                                    aria-hidden="true"
+                                ></nx-icon>
                             </button>
                             <nx-popover #popoverContent>
                                 <span>{{ element['description'] }}</span>
@@ -99,7 +102,10 @@
                                     nxPopoverTrigger="click"
                                     type="button"
                                 >
-                                    <nx-icon name="info-circle-o"></nx-icon>
+                                    <nx-icon
+                                        name="info-circle-o"
+                                        aria-hidden="true"
+                                    ></nx-icon>
                                 </button>
                                 <nx-popover #popoverContent>
                                     <span>{{row['description']}}</span>

diff --git a/...tion/examples/comparison-table/comparison-table-error/comparison-table-error-example.html b/...tion/examples/comparison-table/comparison-table-error/comparison-table-error-example.html
@@ -16,7 +16,10 @@
                         aria-label="More information"
                         type="button"
                     >
-                        <nx-icon name="info-circle-o"></nx-icon>
+                        <nx-icon
+                            name="info-circle-o"
+                            aria-hidden="true"
+                        ></nx-icon>
                     </button>
                     <nx-popover #popover>
                         <span
@@ -75,7 +78,10 @@
                         nxPopoverTrigger="click"
                         type="button"
                     >
-                        <nx-icon name="info-circle-o"></nx-icon>
+                        <nx-icon
+                            name="info-circle-o"
+                            aria-hidden="true"
+                        ></nx-icon>
                     </button>
                     <nx-popover #popoverContent1>
                         <span>Service headline popover content</span>
@@ -99,7 +105,10 @@
                         nxPopoverTrigger="click"
                         type="button"
                     >
-                        <nx-icon name="info-circle-o"></nx-icon>
+                        <nx-icon
+                            name="info-circle-o"
+                            aria-hidden="true"
+                        ></nx-icon>
                     </button>
                     <nx-popover #popoverContent2>
                         <span>Service headline popover content</span>

diff --git a/...arison-table/comparison-table-hidden-columns/comparison-table-hidden-columns-example.html b/...arison-table/comparison-table-hidden-columns/comparison-table-hidden-columns-example.html
@@ -45,7 +45,10 @@
                             aria-label="More information"
                             type="button"
                         >
-                            <nx-icon name="info-circle-o"></nx-icon>
+                            <nx-icon
+                                name="info-circle-o"
+                                aria-hidden="true"
+                            ></nx-icon>
                         </button>
                         <nx-popover #popover>
                             <span
@@ -107,7 +110,10 @@
                             nxPopoverTrigger="click"
                             type="button"
                         >
-                            <nx-icon name="info-circle-o"></nx-icon>
+                            <nx-icon
+                                name="info-circle-o"
+                                aria-hidden="true"
+                            ></nx-icon>
                         </button>
                         <nx-popover #popoverContent1>
                             <span>Service headline popover content</span>
@@ -137,7 +143,10 @@
                             nxPopoverTrigger="click"
                             type="button"
                         >
-                            <nx-icon name="info-circle-o"></nx-icon>
+                            <nx-icon
+                                name="info-circle-o"
+                                aria-hidden="true"
+                            ></nx-icon>
                         </button>
                         <nx-popover #popoverContent2>
                             <span>Service headline popover content</span>

diff --git a/...-table/comparison-table-non-sticky-header/comparison-table-non-sticky-header-example.html b/...-table/comparison-table-non-sticky-header/comparison-table-non-sticky-header-example.html
@@ -14,7 +14,10 @@
                             aria-label="More information"
                             type="button"
                         >
-                            <nx-icon name="info-circle-o"></nx-icon>
+                            <nx-icon
+                                name="info-circle-o"
+                                aria-hidden="true"
+                            ></nx-icon>
                         </button>
                         <nx-popover #popover>
                             <span
@@ -76,7 +79,10 @@
                             nxPopoverTrigger="click"
                             type="button"
                         >
-                            <nx-icon name="info-circle-o"></nx-icon>
+                            <nx-icon
+                                name="info-circle-o"
+                                aria-hidden="true"
+                            ></nx-icon>
                         </button>
                         <nx-popover #popoverContent1>
                             <span>Service headline popover content</span>
@@ -106,7 +112,10 @@
                             nxPopoverTrigger="click"
                             type="button"
                         >
-                            <nx-icon name="info-circle-o"></nx-icon>
+                            <nx-icon
+                                name="info-circle-o"
+                                aria-hidden="true"
+                            ></nx-icon>
                         </button>
                         <nx-popover #popoverContent2>
                             <span>Service headline popover content</span>