fix(Accessibility): Remove role="presentation" from chatMessageBehavior and FocusZone

CHANGELOG.md

@@ -43,6 +43,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Fixes
 - Fix the behaviour of `AutoControlledComponent` when `undefined` is passed as a prop value @layershifter ([#499](https://github.com/stardust-ui/react/pull/499))
 - Stop event propagation when press Escape on the popup @sophieH29 ([#515](https://github.com/stardust-ui/react/pull/515))
+- Remove role="presentation" from `chatMessageBehavior` and `FocusZone` @sophieH29 ([#530](https://github.com/stardust-ui/react/pull/530))
 
 ### Documentation
 - Add `Integrate Custom Components` guide page in the docs @mnajdova ([#517](https://github.com/stardust-ui/react/pull/517))

src/lib/accessibility/Behaviors/Chat/chatMessageBehavior.ts

@@ -5,15 +5,13 @@ import { FocusZoneTabbableElements, FocusZoneDirection } from '../../FocusZone'
 
 /**
  * @description
- * Adds role 'presentation' until we come up with final roles for chat.
  * Sets the message to be a focusable element.
  * Adds a vertical circular focus zone navigation where a user navigates using a Tab key.
  * Adds a key action which prevents up and down arrow keys from navigating in FocusZone, we only want a Tab key to navigate.
  */
 const chatMessageBehavior: Accessibility = (props: any) => ({
   attributes: {
     root: {
-      role: 'presentation',
       [IS_FOCUSABLE_ATTRIBUTE]: true,
     },
   },

src/lib/accessibility/FocusZone/CHANGELOG.md

@@ -6,6 +6,7 @@ This is a list of changes made to this Stardust copy of FocusZone in comparison
 - With `defaultTabbableElement` prop set tab indexes are not updated accordingly ([#342](https://github.com/stardust-ui/react/pull/342))
 - Remove unused prop `componentRef` ([#397](https://github.com/stardust-ui/react/pull/397))
 - Fix `defaultTabbableElement` prop to be as a function ([#450](https://github.com/stardust-ui/react/pull/450))
+- Remove role="presentation" @sophieH29 ([#530](https://github.com/stardust-ui/react/pull/530))
 
 ### Features
 - Add embed mode for FocusZone and new Chat behavior ([#233](https://github.com/stardust-ui/react/pull/233))

src/lib/accessibility/FocusZone/FocusZone.tsx

@@ -149,7 +149,6 @@ export class FocusZone extends React.Component<FocusZoneProps> implements IFocus
 
     return (
       <ElementType
-        role="presentation"
         {...rest}
         className={cx(FocusZone.className, className)}
         data-focuszone-id={this._id}

src/lib/accessibility/types.ts

@@ -1,4 +1,4 @@
-import { FocusTrapZoneProps, FocusZoneProps } from './FocusZone'
+import { FocusTrapZoneProps, FocusZoneProps, IS_FOCUSABLE_ATTRIBUTE } from './FocusZone'
 
 export type AriaWidgetRole =
   | 'button'
@@ -126,6 +126,7 @@ export interface AriaRelationshipAttributes {
 export interface AccessibilityAttributes extends AriaWidgetAttributes, AriaRelationshipAttributes {
   role?: AriaRole
   tabIndex?: string
+  [IS_FOCUSABLE_ATTRIBUTE]?: boolean
 }
 
 export type AccessibilityAttributesBySlot = { [partName: string]: AccessibilityAttributes }

test/specs/components/Chat/ChatMessage-test.tsx

@@ -16,7 +16,6 @@ describe('ChatMessage', () => {
 
   describe('accessibility', () => {
     handlesAccessibility(ChatMessage, {
-      defaultRootRole: 'presentation',
       focusZoneDefinition: (chatMessageBehavior as AccessibilityDefinition).focusZone,
     })
   })