Browse Source

Follow up: Desktop View: a11y integration - guard clause improvement

Benjamin Scharf 10 months ago
parent
commit
c5b7201490

+ 1 - 4
app/frontend/apps/desktop/components/CommonFlyout/CommonFlyout.vue

@@ -27,7 +27,6 @@ import { useResizeWidthHandle } from '#desktop/components/ResizeHandle/composabl
 import type { FlyoutSizes } from '#desktop/components/CommonFlyout/types.ts'
 import type { FlyoutSizes } from '#desktop/components/CommonFlyout/types.ts'
 
 
 import stopEvent from '#shared/utils/events.ts'
 import stopEvent from '#shared/utils/events.ts'
-import { i18n } from '#shared/i18n.ts'
 import { closeFlyout } from './useFlyout.ts'
 import { closeFlyout } from './useFlyout.ts'
 
 
 import CommonFlyoutActionFooter, {
 import CommonFlyoutActionFooter, {
@@ -142,14 +141,12 @@ const handleKeyStroke = (e: KeyboardEvent, adjustment: number) => {
 
 
   if (
   if (
     !flyoutContainerWidth.value ||
     !flyoutContainerWidth.value ||
-    activeElement.value?.getAttribute('aria-label') !==
-      i18n.t('Resize side panel')
+    activeElement.value !== resizeHandleComponent.value?.$el
   )
   )
     return
     return
 
 
   const newWidth = flyoutContainerWidth.value + adjustment
   const newWidth = flyoutContainerWidth.value + adjustment
 
 
-  // :TODO check of how we could add the min width
   if (newWidth >= flyoutMaxWidth.value) return
   if (newWidth >= flyoutMaxWidth.value) return
 
 
   resizeCallback(newWidth)
   resizeCallback(newWidth)

+ 3 - 4
app/frontend/apps/desktop/components/layout/LayoutSidebar.vue

@@ -8,7 +8,6 @@ import CollapseButton from '#desktop/components/CollapseButton/CollapseButton.vu
 import CommonButton from '#desktop/components/CommonButton/CommonButton.vue'
 import CommonButton from '#desktop/components/CommonButton/CommonButton.vue'
 import { useCollapseHandler } from '#desktop/components/CollapseButton/composables/useCollapseHandler.ts'
 import { useCollapseHandler } from '#desktop/components/CollapseButton/composables/useCollapseHandler.ts'
 import { useResizeWidthHandle } from '#desktop/components/ResizeHandle/composables/useResizeWidthHandle.ts'
 import { useResizeWidthHandle } from '#desktop/components/ResizeHandle/composables/useResizeWidthHandle.ts'
-import { i18n } from '#shared/i18n.ts'
 
 
 interface Props {
 interface Props {
   name: string
   name: string
@@ -43,13 +42,15 @@ const { toggleCollapse, isCollapsed } = useCollapseHandler(emit, {
 })
 })
 
 
 // a11y keyboard navigation
 // a11y keyboard navigation
+const resizeHandleComponent = ref<InstanceType<typeof ResizeHandle>>()
+
 const activeElement = useActiveElement()
 const activeElement = useActiveElement()
 
 
 const handleKeyStroke = (e: KeyboardEvent, adjustment: number) => {
 const handleKeyStroke = (e: KeyboardEvent, adjustment: number) => {
   e.preventDefault()
   e.preventDefault()
   if (
   if (
     !props.currentWidth ||
     !props.currentWidth ||
-    activeElement.value?.getAttribute('aria-label') !== i18n.t('Resize sidebar')
+    activeElement.value !== resizeHandleComponent.value?.$el
   )
   )
     return
     return
   const newWidth = props.currentWidth + adjustment
   const newWidth = props.currentWidth + adjustment
@@ -62,8 +63,6 @@ const handleKeyStroke = (e: KeyboardEvent, adjustment: number) => {
   emit('resize-horizontal', newWidth)
   emit('resize-horizontal', newWidth)
 }
 }
 
 
-const resizeHandleComponent = ref<InstanceType<typeof ResizeHandle>>()
-
 const { startResizing, isResizingHorizontal } = useResizeWidthHandle(
 const { startResizing, isResizingHorizontal } = useResizeWidthHandle(
   (positionX) => emit('resize-horizontal', positionX),
   (positionX) => emit('resize-horizontal', positionX),
   resizeHandleComponent,
   resizeHandleComponent,