Merge pull request #414 from funidata/DS-342-accessibility-report-fixes

[Accessibility]: Miscellaneous fixes

ngx-fudis/projects/ngx-fudis/src/lib/components/expandable/expandable.component.html

@@ -18,6 +18,7 @@
           variant
         }}"
         [attr.aria-expanded]="!_closed"
+        [attr.aria-controls]="!closed ? _id + '__content' : null"
         (click)="_setClosedStatus(!_closed)"
       >
         <fudis-icon
@@ -45,6 +46,7 @@
   <div
     class="fudis-expandable__content fudis-expandable__content__padding-{{ padding }}"
     *ngIf="_openedOnce"
+    [id]="_id + '__content'"
     [attr.aria-hidden]="_closed"
     [hidden]="_closed"
   >

ngx-fudis/projects/ngx-fudis/src/lib/components/grid/grid-item/grid-item.stories.ts

@@ -17,7 +17,7 @@ export default {
 const Template: StoryFn<GridItemComponent> = (args: GridItemComponent) => ({
   props: args,
 
-  template: html`<fudis-grid [columns]="4">
+  template: html`<fudis-grid [columns]="{ xs: 2, md: 4 }">
     <fudis-grid-item [columns]="'stretch'">
       <fudis-body-text
         >Too see alignSelfX and alignSelfY clearly, make sure the preview canvas is wide

ngx-fudis/projects/ngx-fudis/src/lib/components/grid/grid/grid.docs.mdx

@@ -153,9 +153,9 @@ When combined with fr units, the fr columns occupy the rest of the available spa
 
 #### Max Content
 
-Not too surprisingly when compared to previous, `max-content` is **the largest** size a box can take without overflowing its content.
+Not too surprisingly when compared to previous, `max-content` is **the largest** size a box can take.
 
-This might be useful in cases, where we want to enable expansion of the column to be as wide as its content allows.
+But pay attention when using `max-content` because it will not wrap even if it causes overflow.
 
 When combined with fr units, the fr columns occupy the rest of the available space after max-content columns have taken their space.
 

ngx-fudis/projects/ngx-fudis/src/lib/components/grid/grid/grid.stories.ts

@@ -40,7 +40,7 @@ import { FudisGridAlign, FudisGridProperties } from '../../../types/grid';
         [classes]="['storybook__wrapper-border']"
       >
         <fudis-heading [level]="3" [variant]="'md'"
-          >Listen to Service Columns but not AlignItemsX</fudis-heading
+          >Listen to Service's Columns but not AlignItemsX</fudis-heading
         >
         <fudis-body-text class="storybook__item"
           >This Grid has [alignItemsX]="'{{ _gridAlignValue }}'"</fudis-body-text
@@ -64,12 +64,12 @@ import { FudisGridAlign, FudisGridProperties } from '../../../types/grid';
           >It should listen to Service updates on alignItemsX</fudis-body-text
         >
         <fudis-body-text class="storybook__item"
-          >But it has columns="2" and it should not listen to Service's columns</fudis-body-text
+          >But it has [columns]="2" and it should not listen to Service's columns</fudis-body-text
         >
       </fudis-grid>
 
       <fudis-grid [serviceDefaults]="false" [classes]="['storybook__wrapper-border']">
-        <fudis-heading [level]="3" [variant]="'md'">Service Defaults are turned of</fudis-heading>
+        <fudis-heading [level]="3" [variant]="'md'">Service Defaults are turned off</fudis-heading>
         <fudis-body-text class="storybook__item"
           >This Grid has no set alignItemsX value, and it is ignoring defaults from
           Service!</fudis-body-text
@@ -90,7 +90,9 @@ class GridWithServiceExampleComponent {
 
     _gridService.setDefaultValues(defaultValue);
 
-    this._currentServiceConfigs = JSON.stringify(_gridService.getDefaultValues()());
+    this._currentServiceConfigs = JSON.stringify(_gridService.getDefaultValues()())
+      .split(',"')
+      .join(', "');
   }
 
   protected _gridAlignValue: FudisGridAlign = 'end';
@@ -120,7 +122,9 @@ class GridWithServiceExampleComponent {
       columns: updateColumnsValue,
     });
 
-    this._currentServiceConfigs = JSON.stringify(this._gridService.getDefaultValues()());
+    this._currentServiceConfigs = JSON.stringify(this._gridService.getDefaultValues()())
+      .split(',"')
+      .join(', "');
   }
 }
 

ngx-fudis/projects/ngx-fudis/src/lib/components/icon/icon.component.html

@@ -377,6 +377,7 @@
     ><svg
       id="chevron-ring-fill"
       [class]="_classList | async"
+      aria-hidden="true"
       xmlns="http://www.w3.org/2000/svg"
       width="32"
       height="32"
@@ -573,6 +574,7 @@
     ><svg
       id="exclamation-mark-circle-fill"
       [class]="_classList | async"
+      aria-hidden="true"
       xmlns="http://www.w3.org/2000/svg"
       width="32"
       height="32"