♿️(frontend) announce selected state to SR in select and menu list

Add visually hidden "selected" text for screen readers.

CHANGELOG.md

@@ -8,11 +8,18 @@ and this project adheres to
 
 ## [Unreleased]
 
+### Fixed
+
+- 🩹(frontend) remove incorrect reference to ProConnect on the prejoin #1080
+- ✨(frontend) add Ctrl+Shift+/ to open shortcuts settings #1050
+- ♿(frontend) announce selected state to screen readers #1081
+
 ### Changed
 
 - 🔒️(backend) enhance API input validation to strengthen security #1053
 - 🦺(backend) strengthen API validation for recording options #1063
 - ⚡️(frontend) optimize few performance caveats #1073
+- 🔒️(helm) introduce a dedicated Kubernetes Ingress for webhook-livekit #1066
 
 ### Fixed
 
@@ -42,7 +49,6 @@ and this project adheres to
 - ♿️(frontend) improve accessibility of the IntroSlider carousel #1026
 - ♿️(frontend) add skip link component for keyboard navigation #1019
 - ♿️(frontend) announce mic/camera state to SR on shortcut toggle #1052
-- ✨(frontend) add Ctrl+Shift+/ to open shortcuts settings #1050
 
 ### Fixed
 

src/frontend/src/locales/de/global.json

@@ -25,6 +25,7 @@
     "heading": "Überprüfen Sie Ihren Meeting-Code",
     "body": "Stellen Sie sicher, dass Sie den richtigen Meeting-Code in der URL eingegeben haben. Beispiel:"
   },
+  "selected": "ausgewählt",
   "submit": "OK",
   "footer": {
     "links": {
@@ -45,7 +46,7 @@
     "license": "Etalab 2.0 Lizenz"
   },
   "loginHint": {
-    "title": "Melden Sie sich mit Ihrem ProConnect-Konto an",
+    "title": "Melden Sie sich mit Ihrem Konto an",
     "body": "Statt zu warten, melden Sie sich mit Ihrem ProConnect-Konto an.",
     "button": {
       "ariaLabel": "Hinweis schließen",

src/frontend/src/locales/en/global.json

@@ -25,6 +25,7 @@
     "heading": "Verify your meeting code",
     "body": "Check that you have entered the correct meeting code in the URL. Example:"
   },
+  "selected": "selected",
   "submit": "OK",
   "footer": {
     "links": {
@@ -45,7 +46,7 @@
     "license": "etalab 2.0 license"
   },
   "loginHint": {
-    "title": "Log in with your ProConnect account",
+    "title": "Log in with your account",
     "body": "Instead of waiting, log in with your ProConnect account.",
     "button": {
       "ariaLabel": "Close the suggestion",

src/frontend/src/locales/fr/global.json

@@ -25,6 +25,7 @@
     "heading": "Vérifier votre code de réunion",
     "body": "Vérifiez que vous avez saisi le code de réunion correct dans l'URL. Exemple :"
   },
+  "selected": "sélectionné",
   "submit": "OK",
   "footer": {
     "links": {
@@ -45,7 +46,7 @@
     "license": "licence etalab 2.0"
   },
   "loginHint": {
-    "title": "Connectez-vous avec votre compte ProConnect",
+    "title": "Connectez-vous avec votre compte",
     "body": "Au lieu de patienter, connectez-vous avec votre compte ProConnect.",
     "button": {
       "ariaLabel": "Fermer la suggestion",

src/frontend/src/locales/nl/global.json

@@ -24,6 +24,7 @@
   "notFound": {
     "heading": "Pagina niet gevonden"
   },
+  "selected": "geselecteerd",
   "submit": "OK",
   "footer": {
     "links": {
@@ -44,7 +45,7 @@
     "license": "etalab 2.0 licentie"
   },
   "loginHint": {
-    "title": "Log in met je ProConnect-account",
+    "title": "Log in met je account",
     "body": "In plaats van te wachten, log in met je ProConnect-account.",
     "button": {
       "ariaLabel": "Sluit de suggestie",

src/frontend/src/primitives/MenuList.tsx

@@ -1,5 +1,7 @@
 import { ReactNode } from 'react'
 import { Menu, MenuProps, MenuItem } from 'react-aria-components'
+import { useTranslation } from 'react-i18next'
+import { VisuallyHidden } from '@/styled-system/jsx'
 import { menuRecipe } from '@/primitives/menuRecipe.ts'
 import type { RecipeVariantProps } from '@/styled-system/types'
 
@@ -19,6 +21,7 @@ export const MenuList = <T extends string | number = string>({
 } & MenuProps<unknown> &
   RecipeVariantProps<typeof menuRecipe>) => {
   const [variantProps] = menuRecipe.splitVariantProps(menuProps)
+  const { t } = useTranslation('global')
   const classes = menuRecipe({
     extraPadding: true,
     variant: variant,
@@ -39,11 +42,19 @@ export const MenuList = <T extends string | number = string>({
             className={classes.item}
             key={value}
             id={value as string}
+            textValue={typeof label === 'string' ? label : undefined}
             onAction={() => {
               onAction(value as T)
             }}
           >
-            {label}
+            {({ isSelected }) => (
+              <>
+                {label}
+                {isSelected && (
+                  <VisuallyHidden>, {t('selected')}</VisuallyHidden>
+                )}
+              </>
+            )}
           </MenuItem>
         )
       })}

src/frontend/src/primitives/Select.tsx

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react'
-import { styled } from '@/styled-system/jsx'
+import { styled, VisuallyHidden } from '@/styled-system/jsx'
 import { RemixiconComponentType, RiArrowDropDownLine } from '@remixicon/react'
 import {
   Button,
@@ -9,6 +9,7 @@ import {
   SelectProps as RACSelectProps,
   SelectValue,
 } from 'react-aria-components'
+import { useTranslation } from 'react-i18next'
 import { Box } from './Box'
 import { StyledPopover } from './Popover'
 import { menuRecipe } from '@/primitives/menuRecipe.ts'
@@ -110,6 +111,7 @@ export const Select = <T extends string | number>({
   ...props
 }: SelectProps<T>) => {
   const IconComponent = iconComponent
+  const { t } = useTranslation('global')
   return (
     <RACSelect {...props}>
       {label}
@@ -138,8 +140,18 @@ export const Select = <T extends string | number>({
                 }
                 id={item.value}
                 key={item.value}
+                textValue={
+                  typeof item.label === 'string' ? item.label : undefined
+                }
               >
-                {item.label}
+                {({ isSelected }) => (
+                  <>
+                    {item.label}
+                    {isSelected && (
+                      <VisuallyHidden>, {t('selected')}</VisuallyHidden>
+                    )}
+                  </>
+                )}
               </ListBoxItem>
             ))}
           </ListBox>

src/helm/env.d/dev-dinum/values.meet.yaml.gotmpl

@@ -128,6 +128,10 @@ ingressAdmin:
   enabled: true
   host: meet.127.0.0.1.nip.io
 
+ingressWebhook:
+  enabled: true
+  host: meet.127.0.0.1.nip.io
+
 posthog:
   ingress:
     enabled: false

src/helm/env.d/dev-keycloak/values.meet.yaml.gotmpl

@@ -141,6 +141,10 @@ ingressAdmin:
   enabled: true
   host: meet.127.0.0.1.nip.io
 
+ingressWebhook:
+  enabled: true
+  host: meet.127.0.0.1.nip.io
+
 posthog:
   ingress:
     enabled: false

src/helm/env.d/dev/values.meet.yaml.gotmpl

@@ -156,6 +156,10 @@ ingressAdmin:
   enabled: true
   host: meet.127.0.0.1.nip.io
 
+ingressWebhook:
+  enabled: true
+  host: meet.127.0.0.1.nip.io
+
 posthog:
   ingress:
     enabled: false

src/helm/meet/Chart.yaml

@@ -1,4 +1,4 @@
 apiVersion: v2
 type: application
 name: meet
-version: 0.0.15
+version: 0.0.16

src/helm/meet/templates/ingress_webhook.yaml

@@ -0,0 +1,90 @@
+{{- if .Values.ingressWebhook.enabled -}}
+{{- $fullName := include "meet.fullname" . -}}
+{{- if and .Values.ingressWebhook.className (not (semverCompare ">=1.18-0" .Capabilities.KubeVersion.GitVersion)) }}
+  {{- if not (hasKey .Values.ingressWebhook.annotations "kubernetes.io/ingress.class") }}
+  {{- $_ := set .Values.ingressWebhook.annotations "kubernetes.io/ingress.class" .Values.ingressWebhook.className}}
+  {{- end }}
+{{- end }}
+{{- if semverCompare ">=1.19-0" .Capabilities.KubeVersion.GitVersion -}}
+apiVersion: networking.k8s.io/v1
+{{- else if semverCompare ">=1.14-0" .Capabilities.KubeVersion.GitVersion -}}
+apiVersion: networking.k8s.io/v1beta1
+{{- else -}}
+apiVersion: extensions/v1beta1
+{{- end }}
+kind: Ingress
+metadata:
+  name: {{ $fullName }}-webhook
+  namespace: {{ .Release.Namespace | quote }}
+  labels:
+    {{- include "meet.labels" . | nindent 4 }}
+  {{- with .Values.ingressWebhook.annotations }}
+  annotations:
+  {{- toYaml . | nindent 4 }}
+  {{- end }}
+spec:
+  {{- if and .Values.ingressWebhook.className (semverCompare ">=1.18-0" .Capabilities.KubeVersion.GitVersion) }}
+  ingressClassName: {{ .Values.ingressWebhook.className }}
+  {{- end }}
+  {{- if .Values.ingressWebhook.tls.enabled }}
+  tls:
+    {{- if .Values.ingressWebhook.host }}
+    - secretName: {{ .Values.ingressWebhook.tls.secretName | default (printf "%s-tls" $fullName) | quote }}
+      hosts:
+        - {{ .Values.ingressWebhook.host | quote }}
+    {{- end }}
+    {{- range .Values.ingressWebhook.tls.additional }}
+    - hosts:
+        {{- range .hosts }}
+        - {{ . | quote }}
+        {{- end }}
+      secretName: {{ .secretName }}
+    {{- end }}
+  {{- end }}
+  rules:
+    {{- if .Values.ingressWebhook.host }}
+    - host: {{ .Values.ingressWebhook.host | quote }}
+      http:
+        paths:
+          - path: {{ .Values.ingressWebhook.path }}
+            {{- if semverCompare ">=1.18-0" $.Capabilities.KubeVersion.GitVersion }}
+            pathType: Exact
+            {{- end }}
+            backend:
+              {{- if semverCompare ">=1.19-0" $.Capabilities.KubeVersion.GitVersion }}
+              service:
+                name: {{ include "meet.backend.fullname" . }}
+                port:
+                  number: {{ .Values.backend.service.port }}
+              {{- else }}
+              serviceName: {{ include "meet.backend.fullname" . }}
+              servicePort: {{ .Values.backend.service.port }}
+            {{- end }}
+          {{- with .Values.ingressWebhook.customBackends }}
+            {{- toYaml . | nindent 10 }}
+          {{- end }}
+    {{- end }}
+    {{- range .Values.ingressWebhook.hosts }}
+    - host: {{ . | quote }}
+      http:
+        paths:
+          - path: {{ .Values.ingressWebhook.path }}
+            {{- if semverCompare ">=1.18-0" $.Capabilities.KubeVersion.GitVersion }}
+            pathType: Exact
+            {{- end }}
+            backend:
+              {{- if semverCompare ">=1.19-0" $.Capabilities.KubeVersion.GitVersion }}
+              service:
+                name: {{ include "meet.backend.fullname" $ }}
+                port:
+                  number: {{ $.Values.backend.service.port }}
+              {{- else }}
+              serviceName: {{ include "meet.backend.fullname" $ }}
+              servicePort: {{ $.Values.backend.service.port }}
+            {{- end }}
+          {{- with $.Values.ingressWebhook.customBackends }}
+            {{- toYaml . | nindent 10 }}
+          {{- end }}
+    {{- end }}
+{{- end }}
+

src/helm/meet/values.yaml

@@ -50,6 +50,31 @@ ingress:
   ## @param ingress.customBackends Add custom backends to ingress
   customBackends: []
 
+## @param ingressWebhook.enabled whether to enable the Ingress or not
+## @param ingressWebhook.className IngressClass to use for the Ingress
+## @param ingressWebhook.host Host for the Ingress
+## @param ingressWebhook.path Path to use for the Ingress
+ingressWebhook:
+  enabled: false
+  className: null
+  host: meet.example.com
+  path: /api/v1.0/rooms/webhooks-livekit/
+  ## @param ingressWebhook.hosts Additional host to configure for the Ingress
+  hosts: []
+  #  - chart-example.local
+  ## @param ingressWebhook.tls.enabled Weather to enable TLS for the Ingress
+  ## @param ingressWebhook.tls.secretName Secret name for TLS config
+  ## @skip ingressWebhook.tls.additional
+  ## @extra ingressWebhook.tls.additional[].secretName Secret name for additional TLS config
+  ## @extra ingressWebhook.tls.additional[].hosts[] Hosts for additional TLS config
+  tls:
+    secretName: null
+    enabled: true
+    additional: []
+
+  ## @param ingressWebhook.customBackends Add custom backends to ingress
+  customBackends: []
+
 
 ## @param ingressAdmin.enabled whether to enable the Ingress or not
 ## @param ingressAdmin.className IngressClass to use for the Ingress