feat(Stack): add ariaLabel prop to improve accessibility

Author: domihustinova

packages/orbit-components/src/Stack/README.md

@@ -41,6 +41,7 @@ The table below contains all types of props available in the Stack component.
 | tablet       | [`Object`](#media-queries) |            | Object for setting up properties for the tablet viewport. [See Media queries](#media-queries)       |
 | wrap         | `boolean`                  | `false`    | If `true`, the Stack will have `flex-wrap` set to `wrap`, otherwise it will be `nowrap`.            |
 | useMargin    | `boolean`                  | `false`    | If `true`, the Stack will be using margins instead of gap                                           |
+| ariaLabel    | `string`                   |            | Optional prop for setting `aria-label` attribute.                                                   |
 
 ### Media Queries
 

packages/orbit-components/src/Stack/index.tsx

@@ -47,6 +47,7 @@ const Stack = (props: Props) => {
     tablet,
     desktop,
     largeDesktop,
+    ariaLabel,
   } = props;
 
   const viewportProps = { mediumMobile, largeMobile, tablet, desktop, largeDesktop };
@@ -177,6 +178,7 @@ const Stack = (props: Props) => {
           );
         }),
       )}
+      aria-label={ariaLabel}
     >
       {children}
     </ComponentTag>

packages/orbit-components/src/Stack/types.d.ts

@@ -52,4 +52,5 @@ export interface Props extends CommonProps, Common.Globals {
   readonly as?: string;
   readonly largeDesktop?: CommonProps;
   readonly children: React.ReactNode;
+  readonly ariaLabel?: string;
 }