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/docs/mdx/10.0-UPGRADE_GUIDE.mdx

@@ -11,6 +11,7 @@ any questions.
 - [Codemod](#codemod)
 - [Removals](#removals)
   - [Menu (Preview)](#menu-preview)
+	- [useBanner](#useBanner)
 - [Deprecations](#deprecations)
 - [Token Updates](#token-updates)
   - [Space and Depth](#space-and-depth)
@@ -68,6 +69,12 @@ migrate from the `Menu` in Preview to the `Menu` in Main.
 This change is **not** handled by the codemod due to the differences in API between the `Menu` in
 Preview and the `Menu` in Main.
 
+## useBanner
+
+We have removed the `useBanner` hook, the only function of which was to add `aria-labelledby` and
+`aria-describedby` references to the text inside of the Banner. This was not required for accessibility,
+and browsers can compute the name of the Banner from the text given inside.
+
 ## Deprecations
 
 ## Token Updates

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/lib/hooks/index.ts

@@ -4,5 +4,4 @@ export * from './useThemedPalette';
 export * from './useBannerIcon';
 export * from './useBannerLabel';
 export * from './useBannerActionText';
-export * from './useBanner';
 export {getPaletteColors};

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 only using an icon 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,16 @@
+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 = () => {
+
+  return (
+    <Tooltip title="Warning">
+      <Banner width="4em">
+        <Banner.Icon />
+      </Banner>
+    </Tooltip>
+  );
+};