microsoft#3814 Add tabindex and focus indicator to carousel children

corinagum · Apr 13, 2021 · 9b2a963 · 9b2a963
1 parent 4f2df03
commit 9b2a963
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git a/packages/component/src/Activity/CarouselFilmStrip.js b/packages/component/src/Activity/CarouselFilmStrip.js
@@ -226,11 +226,13 @@ const CarouselFilmStrip = ({
                     /* eslint-disable-next-line react/no-array-index-key */
                     key={index}
                     role="listitem"
+                    tabIndex={0}
                   >
                     <ScreenReaderText text={attachedAlt} />
                     {/* eslint-disable-next-line react/no-array-index-key */}
                     <Bubble fromUser={fromUser} key={index} nub={false}>
                       {renderAttachment({ activity, attachment })}
+                      <div className="webchat__carousel-filmstrip__attachment__focus-indicator" />
                     </Bubble>
                   </li>
                 ))}

diff --git a/packages/component/src/Styles/StyleSet/CarouselFilmStrip.ts b/packages/component/src/Styles/StyleSet/CarouselFilmStrip.ts
@@ -8,6 +8,9 @@ export default function CarouselFilmStrip({
   bubbleMaxWidth,
   bubbleMinWidth,
   paddingRegular,
+  transcriptVisualKeyboardIndicatorColor,
+  transcriptVisualKeyboardIndicatorStyle,
+  transcriptVisualKeyboardIndicatorWidth,
   transitionDuration
 }: StrictStyleOptions) {
   return {
@@ -19,6 +22,21 @@ export default function CarouselFilmStrip({
       },
 
       '& .webchat__carousel-filmstrip__attachment': {
+        '&:focus': {
+          outline: 0
+        },
+        '&:focus .webchat__carousel-filmstrip__attachment__focus-indicator': {
+          borderColor: transcriptVisualKeyboardIndicatorColor,
+          borderStyle: transcriptVisualKeyboardIndicatorStyle,
+          borderWidth: transcriptVisualKeyboardIndicatorWidth,
+          boxSizing: 'border-box',
+          height: `calc(100% - ${transcriptVisualKeyboardIndicatorWidth}px)`,
+          left: '0',
+          pointerEvents: 'none',
+          position: 'absolute',
+          top: 0,
+          width: `calc(100% - ${transcriptVisualKeyboardIndicatorWidth}px)`
+        },
         minWidth: bubbleMinWidth,
         maxWidth: bubbleMaxWidth,
         transitionDuration,