Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(ADA-1514): Incorrect focus order is observed when Related Files button is activated. #76

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

fix(ADA-1514): Incorrect focus order is observed when Related Files button is activated. #76

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 19 additions & 4 deletions src/components/attachments-list/attachments-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,14 @@ export const AttachmentsList = withText({
return attachment.title || attachment.fileName;
};

const _renderDownloadItem = (key: string, fileName: string, downloadUrl: string, icon: ComponentChildren, ariaLabel: string) => {
const _renderDownloadItem = (
key: string,
fileName: string,
downloadUrl: string,
icon: ComponentChildren,
ariaLabel: string,
shouldFocusItem: boolean
) => {
return (
<DownloadItem
downloadPluginManager={downloadPluginManager}
Expand All @@ -37,14 +44,22 @@ export const AttachmentsList = withText({
assetType={assetType.Attachments}
iconFileType={icon}
ariaLabel={ariaLabel}
shouldFocus={shouldFocus}
shouldFocus={shouldFocusItem}
/>
);
};

const _renderAttachments = (attachments: Array<KalturaAttachmentAsset>) => {
return attachments.map((attachment: KalturaAttachmentAsset) => {
return _renderDownloadItem(attachment.id, _buildFileName(attachment), attachment.downloadUrl, getIconByFileExt(attachment.fileExt), ariaLabel!);
return attachments.map((attachment: KalturaAttachmentAsset, index) => {
const shouldFocusItem = index === 0 ? shouldFocus : false;
return _renderDownloadItem(
attachment.id,
_buildFileName(attachment),
attachment.downloadUrl,
getIconByFileExt(attachment.fileExt),
ariaLabel!,
shouldFocusItem
);
});
};

Expand Down
20 changes: 14 additions & 6 deletions src/components/captions-list/captions-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,14 @@ export const CaptionsList = withText({
return `${fileName}.${caption.fileExt}`;
};

const _renderDownloadItem = (key: string, fileName: string, languageLabel: string, downloadUrl: string, ariaLabel: string) => {
const _renderDownloadItem = (
key: string,
fileName: string,
languageLabel: string,
downloadUrl: string,
ariaLabel: string,
shouldFocusItem: boolean
) => {
return (
<DownloadItem
downloadPluginManager={downloadPluginManager}
Expand All @@ -55,13 +62,14 @@ export const CaptionsList = withText({
assetType={assetType.Captions}
iconFileType={<CommonIcon name={'closedCaptions'} />}
ariaLabel={ariaLabel}
shouldFocus={shouldFocus}
shouldFocus={shouldFocusItem}
/>
);
};

const _renderCaption = (caption: KalturaCaptionAsset) => {
return _renderDownloadItem(caption.id, _buildFileName(caption), caption.label, caption.downloadUrl, ariaLabel!);
const _renderCaption = (caption: KalturaCaptionAsset, firstItemInList?: boolean) => {
const shouldFocusItem = !!(shouldFocus && firstItemInList);
return _renderDownloadItem(caption.id, _buildFileName(caption), caption.label, caption.downloadUrl, ariaLabel!, shouldFocusItem);
};

const _renderCaptions = (captions: Array<KalturaCaptionAsset>) => {
Expand All @@ -75,7 +83,7 @@ export const CaptionsList = withText({
const _renderExpandableCaptions = () => {
return (
<ExpandableContainer
defaultItem={_renderCaption(defaultCaptions!)}
defaultItem={_renderCaption(defaultCaptions!, true)}
restOfItems={_renderCaptions(captions)}
showMoreLabel={moreCaptionsLabel!}
showLessLabel={lessCaptionsLabel!}
Expand All @@ -85,7 +93,7 @@ export const CaptionsList = withText({

return (
<div className={styles.captionsContainer} data-testid={'download-overlay-captions-container'}>
{captions.length > 1 ? _renderExpandableCaptions() : _renderCaption(defaultCaptions!)}
{captions.length > 1 ? _renderExpandableCaptions() : _renderCaption(defaultCaptions!, true)}
</div>
);
});
Loading