Skip to content
This repository was archived by the owner on Jul 9, 2025. It is now read-only.

a11y: fix remaining issues #9408

Merged
cwhitten merged 6 commits into from
Oct 25, 2022
Merged

a11y: fix remaining issues #9408

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
bec91e0
a11y: announce search inside menus
OEvgeny Oct 19, 2022
512bc6e
a11y: announce trigger removal
OEvgeny Oct 21, 2022
389aa04
a11y: improve designer tab handling
OEvgeny Oct 25, 2022
cd8133e
update lock file
OEvgeny Oct 25, 2022
94ddcb3
fix tests
OEvgeny Oct 25, 2022
d9c9345
fix nit
OEvgeny Oct 25, 2022
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
21 changes: 19 additions & 2 deletions Composer/packages/adaptive-flow/src/adaptive-flow-editor/utils/cursorTracker/tabMove.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,27 +35,44 @@ export function handleTabMove(currentElement: SelectorElement, selectableElement
let nextElement: SelectorElement;
const selectableChildren = findSelectableChildren(currentElement, selectableElements);
const selectableParent = findSelectableParent(currentElement, selectableElements);
const selectableSiblings = selectableElements.filter(
(el) =>
!selectableChildren.includes(el) &&
el.bounds.top > currentElement.bounds.top - 10 &&
el.bounds.top < currentElement.bounds.top + 10
);
const nextSibling = locateNearestElement(
currentElement,
selectableSiblings,
command === KeyboardCommandTypes.Cursor.MoveNext ? Direction.Right : Direction.Left,
['isNode', 'isEdgeMenu']
);
const findElementWithSuffix = (suffix) => {
return selectableElements.find((element) => element.selectedId === `${selectableParent?.selectedId}${suffix}`);
};
if (command === KeyboardCommandTypes.Cursor.MoveNext) {
if (selectableChildren.length > 0) {
// Tab to inner selectable element.
nextElement = selectableChildren[0];
} else if (nextSibling && nextSibling !== currentElement) {
// Tab nearest sibling element.
nextElement = nextSibling;
} else {
const hasInlineLinkElement = currentElement.selectedId.endsWith('dot') && findElementWithSuffix('link');
if (hasInlineLinkElement) {
nextElement = findElementWithSuffix('link') || currentElement;
} else {
// Perform like presssing down arrow key.
// Perform like pressing down arrow key.
nextElement = locateNearestElement(currentElement, selectableElements, Direction.Down, [
'isNode',
'isEdgeMenu',
]);
}
}
} else if (command === KeyboardCommandTypes.Cursor.MovePrevious) {
if (selectableParent) {
if (nextSibling && nextSibling !== currentElement) {
nextElement = nextSibling;
} else if (selectableParent) {
// Tab to parent.
if (currentElement.isInlineLinkElement) {
nextElement = findElementWithSuffix('dot') || selectableParent;
Expand Down
1 change: 1 addition & 0 deletions Composer/packages/adaptive-form/src/components/CollapseField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ const styles = {
display: flex;
margin: 4px -18px;
align-items: center;
width: 100%;
`,
};

Expand Down
13 changes: 7 additions & 6 deletions Composer/packages/client/src/pages/design/SideBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@ const SideBar: React.FC<SideBarProps> = React.memo(({ projectId }) => {
removeSkillFromBotProject,
updateZoomRate,
deleteTrigger,
setMessage: announce,
} = useRecoilValue(dispatcherState);

const skillUsedInBotsMap = useRecoilValue(skillUsedInBotsSelector);
Expand Down Expand Up @@ -181,12 +182,12 @@ const SideBar: React.FC<SideBarProps> = React.memo(({ projectId }) => {
}

async function handleDeleteTrigger(projectId: string, dialogId: string, index: number) {
const content = DialogdeleteTrigger(
projectDialogsMap[projectId],
dialogId,
index,
async (trigger) => await deleteTrigger(projectId, dialogId, trigger)
);
const content = DialogdeleteTrigger(projectDialogsMap[projectId], dialogId, index, async (trigger) => {
await deleteTrigger(projectId, dialogId, trigger);
announce(
formatMessage(`The trigger {triggerName} has been deleted`, { triggerName: trigger.$designer?.name ?? '' })
);
});

if (content) {
await updateDialog({ id: dialogId, content, projectId });
Expand Down
2 changes: 1 addition & 1 deletion ...oser/packages/lib/code-editor/src/components/toolbar/__tests__/ToolbarButtonMenu.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ describe('<ToolbarButtonMenu />', () => {
jest.runAllTimers();
});

expect((await screen.findAllByText(/this/)).length).toBe(2);
expect((await screen.findAllByText(/this/)).length).toBe(3);
});

it('property: Should expand property in the menu on click if not leaf', async () => {
Expand Down
16 changes: 15 additions & 1 deletion Composer/packages/lib/code-editor/src/hooks/useSearchableMenuListCallback.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { SearchBox } from '@fluentui/react/lib/SearchBox';
import { Stack } from '@fluentui/react/lib/Stack';
import { IRenderFunction } from '@fluentui/react/lib/Utilities';
import * as React from 'react';
import { Announced } from '@fluentui/react/lib/Announced';

import { useDebouncedSearchCallbacks } from './useDebouncedSearchCallbacks';

Expand All @@ -30,8 +31,20 @@ export const useSearchableMenuListCallback = (
setQuery('');
}, [setQuery]);

const searchComplete = !!query;

const callback = React.useCallback(
(menuListProps?: IContextualMenuListProps, defaultRender?: IRenderFunction<IContextualMenuListProps>) => {
const searchCompleteAnnouncement = searchComplete
? formatMessage(
`Search for the {query}. Found {count, plural,
=1 {one result}
other {# results}
}`,
{ query, count: menuListProps?.items?.filter((item) => item?.key && item.key !== 'no_results').length }
)
: undefined;

return (
<Stack>
{headerRenderer?.()}
Expand All @@ -42,11 +55,12 @@ export const useSearchableMenuListCallback = (
onAbort={onSearchAbort}
onChange={onSearchQueryChange}
/>
<Announced message={searchCompleteAnnouncement} role="alert" />
{defaultRender?.(menuListProps)}
</Stack>
);
},
[searchFiledPlaceHolder, headerRenderer, onReset, onSearchQueryChange]
[searchFiledPlaceHolder, headerRenderer, onReset, onSearchQueryChange, searchComplete]
);

return { onRenderMenuList: callback, query, onReset };
Expand Down
2 changes: 1 addition & 1 deletion Composer/packages/lib/code-editor/src/lu/__tests__/InsertEntityButton.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,6 @@ describe('<InsertEntityButton />', () => {
jest.runAllTimers();
});

expect((await screen.findAllByText(/.*target.*/)).length).toBe(1);
expect((await screen.findAllByText(/.*target.*/)).length).toBe(2);
});
});
4 changes: 2 additions & 2 deletions extensions/azurePublish/yarn-berry.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1879,7 +1879,7 @@ __metadata:

"@bfc/code-editor@file:../../Composer/packages/lib/code-editor::locator=azurePublish%40workspace%3A.":
version: 0.0.0
resolution: "@bfc/code-editor@file:../../Composer/packages/lib/code-editor#../../Composer/packages/lib/code-editor::hash=2fd137&locator=azurePublish%40workspace%3A."
resolution: "@bfc/code-editor@file:../../Composer/packages/lib/code-editor#../../Composer/packages/lib/code-editor::hash=cf4a8a&locator=azurePublish%40workspace%3A."
dependencies:
"@emotion/react": ^11.1.3
"@emotion/styled": ^11.1.3
Expand All @@ -1902,7 +1902,7 @@ __metadata:
"@bfc/ui-shared": "*"
react: 16.13.1
react-dom: 16.13.1
checksum: 12992120cb3addfebd48ede1740792029a4c6ce268ab0be95c110bd60cbbe9993830d60753dbc7d5c87e992f64fdc122af09ebfe6e9fcbfc747102560e1fb574
checksum: f3773eb308e7e1d6db3d13220510b48c7659febca2441213fbc3deeff35abddf559f8cababdea58a5630ae214124f82299ce1d86fe89a5196369adc9ab9234f7
languageName: node
linkType: hard

Expand Down