- Notifications
You must be signed in to change notification settings - Fork 452
✨(frontend) enable enter key to open documents and subdocuments #1354
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.
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
Conversation
d60dd31 to 884a5a0 Compare 884a5a0 to a64085f Compare | Size Change: +620 B (+0.02%) Total Size: 3.66 MB
|
2746c9e to 58c0b5d Compare 4bbfebe to cab4f61 Compare There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
As seen together, some display errors to fix.
src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx Outdated Show resolved Hide resolved
f5323cf to 773b150 Compare There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx Show resolved Hide resolved
src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx Show resolved Hide resolved
src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTree.tsx Outdated Show resolved Hide resolved
92fbf03 to 104e14f Compare 104e14f to dd6c64c Compare 1697f78 to 85e27c5 Compare There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| $width="100%" | ||
| className="--docs--simple-doc-item" | ||
| role="presentation" | ||
| aria-label={`${t('Open document')} ${doc.title || untitledDocument}`} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| aria-label={`${t('Open document')} ${doc.title || untitledDocument}`} | |
| aria-label={`${t('Open document {{title}}', {title: doc.title || untitledDocument})} |
src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx Outdated Show resolved Hide resolved
| $align="center" | ||
| className="light-doc-item-actions" | ||
| role="toolbar" | ||
| aria-label={`${t('Actions for')} ${docTitle}`} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| aria-label={`${t('Actions for')} ${docTitle}`} | |
| aria-label={`${t('Actions for {{title}}', {title: ${docTitle}`})} |
src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTree.tsx Outdated Show resolved Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Folder hooks should be out of folder components.
src/frontend/apps/impress/src/features/docs/doc-tree/components/hooks/useKeyboardActivation.ts Outdated Show resolved Hide resolved
dd030a2 to ee66426 Compare There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good, work great !
| action(); | ||
| } | ||
| }; | ||
| const treeEl = document.querySelector<HTMLElement>('.c__tree-view'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
.c__tree-view could be a prop of this hook, it will then be a nice totally generic hook that you could reuse in different part of the app, that could live in src/hook, wdyt ?
| const treeEl = document.querySelector<HTMLElement>('.c__tree-view'); | |
| const elSelected = document.querySelector<HTMLElement>(selector); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great idea! Can't believe I didn't think of that sooner.
src/frontend/apps/impress/src/features/docs/doc-tree/components/dom-selectors.ts Outdated Show resolved Hide resolved
e9fe0a8 to f1a9252 Compare added keyboard support to open docs and subdocs using the enter key Signed-off-by: Cyril <c.gromoff@gmail.com>
3381269 to e290543 Compare aligns focus state with app style by adding background shadow to outline Signed-off-by: Cyril <c.gromoff@gmail.com>
e290543 to 69e7235 Compare 

Purpose
Enable keyboard accessibility for opening documents and subdocuments via the Enter key. This improves usability and accessibility for users navigating with the keyboard.
Proposal