ci: rework tech-update-request.yml issue template (#2199)

feat: Improve accessibility by adding descriptive labels to Toggle component Enhance accessibility by providing clear labels for the Toggle component. Screen reader users can now understand the purpose of each toggle. Fixes #2203
WTTJ · Aug 17, 2023 · 1319057 · 1319057
1 parent 8dc19f5
commit 1319057
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git a/...b/ISSUE_TEMPLATE/tech-feature-request.yml → ...ub/ISSUE_TEMPLATE/tech-update-request.yml b/...b/ISSUE_TEMPLATE/tech-feature-request.yml → ...ub/ISSUE_TEMPLATE/tech-update-request.yml
@@ -1,5 +1,5 @@
-name: '[Tech] 🫶 Feature request'
-description: 'Request a new feature like a new component.'
+name: '[Tech] 🫶 Enhancement request'
+description: 'Update or feedback on existing components or foundations.'
 labels: ['tech', 'enhancement']
 body:
   - type: 'markdown'

diff --git a/docs/components/Homepage/Components.js b/docs/components/Homepage/Components.js
@@ -29,8 +29,8 @@ const components = [
     title: 'Toggle',
     children: (
       <Stack direction="row" spacing="md">
-        <Toggle mb="md" />
-        <Toggle checked />
+        <Toggle mb="md" label="Example Toggle 1" />
+        <Toggle label="Example Toggle 2" checked />
       </Stack>
     ),
     description: 'Allows user to activate or deactivate an option.',

diff --git a/packages/Toggle/src/index.tsx b/packages/Toggle/src/index.tsx
@@ -4,8 +4,11 @@ import { CreateWuiProps, forwardRef } from '@welcome-ui/system'
 
 import * as S from './styles'
 
+interface ToggleLabelProps {
+  label: string
+}
 export type ToggleOptions = Omit<CheckboxProps, 'Component'>
-export type ToggleProps = CreateWuiProps<'input', ToggleOptions>
+export type ToggleProps = CreateWuiProps<'input', ToggleOptions & ToggleLabelProps>
 
 export const Toggle = forwardRef<'input', ToggleProps>((props, ref) => (
   <Checkbox {...props} Component={S.Toggle} ref={ref} />