Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Incomplete accessible name on "Prev" button in Prompts Panel #5310

Closed
derekjackson-das opened this issue Jan 13, 2025 · 0 comments · Fixed by #5369
Closed

Incomplete accessible name on "Prev" button in Prompts Panel #5310

derekjackson-das opened this issue Jan 13, 2025 · 0 comments · Fixed by #5369
Labels
a11y Accessibility

Comments

@derekjackson-das
Copy link
Collaborator

derekjackson-das commented Jan 13, 2025 •
edited
Loading

Issue Description

Screen readers will read the word "prev", instead of the full word "previous". This creates confusion for users relying on assistive technologies.

WCAG Criteria

1.1.1 Non-text Content (Level A)

Screenshot or Screen Recording

No screenshot provided.

Snippet:

<button class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 text-text-primary border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3" disabled="">
  Prev
</button>

Suggested Action:

Change the text to the full word "Previous".
Alternatively, provide an accessible name for screen readers using aria-label="previous" or visually hidden element (e.g., add the class .sr-only) and wrap "Prev" in a with aria-hidden="true".
@derekjackson-das derekjackson-das added the a11y Accessibility label Jan 13, 2025
berry-13 added a commit that referenced this issue Jan 20, 2025
@berry-13
Fix incomplete accessible name on 'Prev' button in Prompts Panel
45e8b89 
Fixes #5310

Add `aria-label="previous"` attribute to the 'Prev' button in the Prompts Panel.

* Modify `client/src/components/Chat/Prompts.tsx` to include `aria-label="previous"` attribute for the button.
@berry-13 berry-13 mentioned this issue Jan 20, 2025
Merged
10 tasks
owengo pushed a commit to openwengo/LibreChat that referenced this issue Jan 21, 2025
@berry-13 @olivierhub
🔈fix: Accessible name on 'Prev' button in Prompts UI (danny-avila#5369)
ed39ae1 
Fixes danny-avila#5310

Add `aria-label="previous"` attribute to the 'Prev' button in the Prompts Panel.

* Modify `client/src/components/Chat/Prompts.tsx` to include `aria-label="previous"` attribute for the button.
lpirola pushed a commit to lpirola/LibreChat that referenced this issue Jan 22, 2025
@berry-13 @lpirola
🔈fix: Accessible name on 'Prev' button in Prompts UI (danny-avila#5369)
192a9ad 
Fixes danny-avila#5310

Add `aria-label="previous"` attribute to the 'Prev' button in the Prompts Panel.

* Modify `client/src/components/Chat/Prompts.tsx` to include `aria-label="previous"` attribute for the button.
justinmdickey pushed a commit to e-gineering/LibreChat that referenced this issue Jan 30, 2025
@berry-13 @justinmdickey
🔈fix: Accessible name on 'Prev' button in Prompts UI (danny-avila#5369)
d76a657 
Fixes danny-avila#5310

Add `aria-label="previous"` attribute to the 'Prev' button in the Prompts Panel.

* Modify `client/src/components/Chat/Prompts.tsx` to include `aria-label="previous"` attribute for the button.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
a11y Accessibility
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

🔈fix: Accessible name on 'Prev' button in Prompts UI danny-avila/LibreChat
1 participant
@derekjackson-das