refactor: Removing aria attributes from Banner component

cypress/integration/Banner.spec.ts

@@ -18,20 +18,6 @@ describe('Banner', () => {
       it('should have an element with a role of "button"', () => {
         cy.findByRole('button').should('be.visible');
       });
-
-      it('should have an "aria-labelledby" that matches the action', () => {
-        cy.findByRole('button').then($button => {
-          const id = $button.attr('aria-labelledby');
-          cy.findByText('View All').should('have.attr', 'id', id);
-        });
-      });
-
-      it('should have an "aria-describedby" that matches the label', () => {
-        cy.findByRole('button').then($button => {
-          const id = $button.attr('aria-describedby');
-          cy.findByText('3 Errors').should('have.attr', 'id', id);
-        });
-      });
     });
   });
 });

modules/react/banner/lib/Banner.tsx

@@ -13,7 +13,7 @@ import {
 } from '@workday/canvas-kit-react/common';
 import {Flex} from '@workday/canvas-kit-react/layout';
 
-import {useBanner, useBannerModel, useThemedPalette} from './hooks';
+import {useBannerModel, useThemedPalette} from './hooks';
 
 import {BannerIcon} from './BannerIcon';
 import {BannerLabel} from './BannerLabel';
@@ -70,7 +70,6 @@ const styles: CSSProperties = {
 export const Banner = createContainer('button')({
   displayName: 'Banner',
   modelHook: useBannerModel,
-  elemPropsHook: useBanner,
   subComponents: {
     /**
      * `Banner.Icon` is a styled {@link SystemIcon}. The icon defaults to exclamationTriangleIcon or

modules/react/banner/stories/Banner.stories.mdx

@@ -5,6 +5,7 @@ import {Banner} from '@workday/canvas-kit-react/banner';
 import {ActionText} from './examples/ActionText';
 import {Basic} from './examples/Basic';
 import {Error} from './examples/Error';
+import {IconBanner} from './examples/IconBanner';
 import {Sticky} from './examples/Sticky';
 import {ThemedAlert} from './examples/ThemedAlert';
 import {ThemedError} from './examples/ThemedError';
@@ -49,6 +50,12 @@ banner. This will change the defualt icon to `exclamationCircleIcon`.
 
 <ExampleCodeBlock code={Error} />
 
+### Icon Banner
+
+When not using any text in the `Banner`, use our `Tooltip` component to both show a visible text alternative, and assign an `aria-label` string to the child `Banner`. 
+
+<ExampleCodeBlock code={IconBanner} />
+
 ### Sticky
 
 Set the `isSticky` prop of the `Banner` to display it along the right edge of the page. When true,

modules/react/banner/stories/examples/IconBanner.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import {Banner} from '@workday/canvas-kit-react/banner';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {styled} from '@workday/canvas-kit-react/common';
+
+export const IconBanner = () => {
+  const StyledBanner = styled(Banner)({width: '4em'});
+
+  return (
+    <Tooltip title="Warning">
+      <StyledBanner>
+        <Banner.Icon />
+      </StyledBanner>
+    </Tooltip>
+  );
+};