File tree Expand file tree Collapse file tree 2 files changed +17
-4
lines changed
bundle/src/adaptiveCards/Attachment/AdaptiveCardHacks Expand file tree Collapse file tree 2 files changed +17
-4
lines changed Original file line number Diff line number Diff line change @@ -5,6 +5,11 @@ import useAdaptiveCardModEffect from './private/useAdaptiveCardModEffect';
55
66import type { AdaptiveCard } from 'adaptivecards' ;
77
8+ const ARIA_LABEL_MAX_LENGTH = 200 ;
9+
10+ // eslint-disable-next-line no-empty-function -- initialized as no-op, reassigned when aria-label is set
11+ const noOp = ( ) => { } ;
12+
813/**
914 * Accessibility: "role" attribute must be set if "aria-label" is set.
1015 *
@@ -37,13 +42,16 @@ export default function useRoleModEffect(
3742 ( ) => ( _ , cardElement : HTMLElement ) => {
3843 // If the card doesn't have an aria-label (i.e. no "speak" property was set),
3944 // derive one from the card's visible text content so screen readers can announce it.
40- let undoAriaLabel : ( ) => void = ( ) => { } ;
45+ let undoAriaLabel : ( ) => void = noOp ;
4146
4247 if ( ! cardElement . getAttribute ( 'aria-label' ) ) {
43- const textContent = ( cardElement . textContent || '' ) . replace ( / \s + / g , ' ' ) . trim ( ) ;
48+ const textContent = ( cardElement . textContent || '' ) . replace ( / \s + / gu , ' ' ) . trim ( ) ;
4449
4550 if ( textContent ) {
46- const label = textContent . length > 200 ? textContent . slice ( 0 , 200 ) + '\u2026' : textContent ;
51+ const label =
52+ textContent . length > ARIA_LABEL_MAX_LENGTH
53+ ? textContent . slice ( 0 , ARIA_LABEL_MAX_LENGTH ) + '\u2026'
54+ : textContent ;
4755
4856 undoAriaLabel = setOrRemoveAttributeIfFalseWithUndo ( cardElement , 'aria-label' , label ) ;
4957 }
Original file line number Diff line number Diff line change @@ -35,7 +35,12 @@ function AttachmentRow(props: AttachmentRowProps) {
3535 const classNames = useStyles ( styles ) ;
3636
3737 return (
38- < div aria-roledescription = "attachment" className = { classNames [ 'stacked-layout__attachment-row' ] } role = "group" tabIndex = { 0 } >
38+ < div
39+ aria-roledescription = "attachment"
40+ className = { classNames [ 'stacked-layout__attachment-row' ] }
41+ role = "group"
42+ tabIndex = { 0 }
43+ >
3944 < ScreenReaderText text = { attachedAlt } />
4045 { showBubble ? (
4146 < Bubble
You can’t perform that action at this time.
0 commit comments