Scroll to bottom button missing accessible name #3474
Labels
a11y
Accessibility
Comments
danny-avila
added a commit
that referenced
this issue
Aug 4, 2024
8 tasks
danny-avila
added a commit
that referenced
this issue
Aug 5, 2024
…lose sidebars in mobile view (#3536) * chore: playwright setup update * refactor: update ChatRoute component with accessible loading spinner with live region * chore(Message): typing * ci: first pass, a11y testing * refactor: update lang attribute in index.html to "en-US" * ci: jsx-a11y dev eslint plugin * ci: jsx plugin * fix: Exclude 'vite.config.ts' from TypeScript compilation for testing * fix(a11y): Remove tabIndex from non-interactive element in MessagesView component * fix(a11y): - Visible, non-interactive elements with click handlers must have at least one keyboard listener.eslintjsx-a11y/click-events-have-key-events - Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element.eslintjsx-a11y/no-static-element-interactions chore: remove unused bookmarks panel - fix some "Unexpected nullable boolean value in conditional" warnings * fix(NewChat): a11y, nested button issue, add aria-label, remove implicit role * fix(a11y): - partially address #3515 with `main` landmark other: - eslint@typescript-eslint/strict-boolean-expressions * chore(MenuButton): Use button element instead of div for accessibility * chore: Update TitleButton to use button element for accessibility * chore: Update TitleButton to use button element for accessibility * refactor(ChatMenuItem): Improve focus accessibility and code readability * chore(MenuButton): Update aria-label to dynamically include primaryText * fix(a11y): SearchBar - If a form control does not have a properly associated text label, the function or purpose of that form control may not be presented to screen reader users. Visible form labels also provide visible descriptions and larger clickable targets for form controls which placeholders do not. * chore: remove duplicate SearchBar twcss * fix(a11y): - The edit and copy buttons that are visually hidden are exposed to Assistive technology and are announced to screen reader users. * fix(a11y): visible focus outline * fix(a11y): The button to select the LLM Model has the aria-haspopup and aria- expanded attributes which makes its role ambuguous and unclear. It functions like a combobox but doesn't fully support that interaction and also fucntions like a dialog but doesn't completely support that interaction either. * fix(a11y): fix visible focus outline * fix(a11y): Scroll to bottom button missing accessible name #3474 * fix(a11y): The page lacks any heading structure. There should be at least one H1 and other headings to help users understand the orgainzation of the page and the contents. Note: h1 won't be correct here so made it h2 * fix(a11y): LLM controls aria-labels * fix(a11y): There is no visible focus outline to the 'send message' button * fix(a11y): fix visible focus outline for Fork button * refactor(MessageRender): add focus ring to message cards, consolidate complex conditions, add logger for setting latest message, add tabindex for card * fix: focus border color and fix set latest message card condition * fix(a11y): Adequate contrast for MessageAudio buttton * feat: Add GitHub Actions workflow for accessibility linting * chore: Update GitHub Actions workflow for accessibility linting to include client/src/** path * fix(Nav): navmask and accessibility * fix: Update Nav component to handle potential undefined type in SearchContext * fix(a11y): add focus visibility to attach files button #3475 * fix(a11y): discernible text for NewChat button * fix(a11y): accessible landmark names, all page content in landmarks, ensures landmarks are unique #3514 #3515 * fix(Prompts): update isChatRoute prop to be required in List component * fix(a11y): buttons must have discernible text
danny-avila
added a commit
that referenced
this issue
Aug 5, 2024
…lose sidebars in mobile view (#3536) * chore: playwright setup update * refactor: update ChatRoute component with accessible loading spinner with live region * chore(Message): typing * ci: first pass, a11y testing * refactor: update lang attribute in index.html to "en-US" * ci: jsx-a11y dev eslint plugin * ci: jsx plugin * fix: Exclude 'vite.config.ts' from TypeScript compilation for testing * fix(a11y): Remove tabIndex from non-interactive element in MessagesView component * fix(a11y): - Visible, non-interactive elements with click handlers must have at least one keyboard listener.eslintjsx-a11y/click-events-have-key-events - Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element.eslintjsx-a11y/no-static-element-interactions chore: remove unused bookmarks panel - fix some "Unexpected nullable boolean value in conditional" warnings * fix(NewChat): a11y, nested button issue, add aria-label, remove implicit role * fix(a11y): - partially address #3515 with `main` landmark other: - eslint@typescript-eslint/strict-boolean-expressions * chore(MenuButton): Use button element instead of div for accessibility * chore: Update TitleButton to use button element for accessibility * chore: Update TitleButton to use button element for accessibility * refactor(ChatMenuItem): Improve focus accessibility and code readability * chore(MenuButton): Update aria-label to dynamically include primaryText * fix(a11y): SearchBar - If a form control does not have a properly associated text label, the function or purpose of that form control may not be presented to screen reader users. Visible form labels also provide visible descriptions and larger clickable targets for form controls which placeholders do not. * chore: remove duplicate SearchBar twcss * fix(a11y): - The edit and copy buttons that are visually hidden are exposed to Assistive technology and are announced to screen reader users. * fix(a11y): visible focus outline * fix(a11y): The button to select the LLM Model has the aria-haspopup and aria- expanded attributes which makes its role ambuguous and unclear. It functions like a combobox but doesn't fully support that interaction and also fucntions like a dialog but doesn't completely support that interaction either. * fix(a11y): fix visible focus outline * fix(a11y): Scroll to bottom button missing accessible name #3474 * fix(a11y): The page lacks any heading structure. There should be at least one H1 and other headings to help users understand the orgainzation of the page and the contents. Note: h1 won't be correct here so made it h2 * fix(a11y): LLM controls aria-labels * fix(a11y): There is no visible focus outline to the 'send message' button * fix(a11y): fix visible focus outline for Fork button * refactor(MessageRender): add focus ring to message cards, consolidate complex conditions, add logger for setting latest message, add tabindex for card * fix: focus border color and fix set latest message card condition * fix(a11y): Adequate contrast for MessageAudio buttton * feat: Add GitHub Actions workflow for accessibility linting * chore: Update GitHub Actions workflow for accessibility linting to include client/src/** path * fix(Nav): navmask and accessibility * fix: Update Nav component to handle potential undefined type in SearchContext * fix(a11y): add focus visibility to attach files button #3475 * fix(a11y): discernible text for NewChat button * fix(a11y): accessible landmark names, all page content in landmarks, ensures landmarks are unique #3514 #3515 * fix(Prompts): update isChatRoute prop to be required in List component * fix(a11y): buttons must have discernible text
danny-avila
added a commit
that referenced
this issue
Aug 17, 2024
…lose sidebars in mobile view (#3536) * chore: playwright setup update * refactor: update ChatRoute component with accessible loading spinner with live region * chore(Message): typing * ci: first pass, a11y testing * refactor: update lang attribute in index.html to "en-US" * ci: jsx-a11y dev eslint plugin * ci: jsx plugin * fix: Exclude 'vite.config.ts' from TypeScript compilation for testing * fix(a11y): Remove tabIndex from non-interactive element in MessagesView component * fix(a11y): - Visible, non-interactive elements with click handlers must have at least one keyboard listener.eslintjsx-a11y/click-events-have-key-events - Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element.eslintjsx-a11y/no-static-element-interactions chore: remove unused bookmarks panel - fix some "Unexpected nullable boolean value in conditional" warnings * fix(NewChat): a11y, nested button issue, add aria-label, remove implicit role * fix(a11y): - partially address #3515 with `main` landmark other: - eslint@typescript-eslint/strict-boolean-expressions * chore(MenuButton): Use button element instead of div for accessibility * chore: Update TitleButton to use button element for accessibility * chore: Update TitleButton to use button element for accessibility * refactor(ChatMenuItem): Improve focus accessibility and code readability * chore(MenuButton): Update aria-label to dynamically include primaryText * fix(a11y): SearchBar - If a form control does not have a properly associated text label, the function or purpose of that form control may not be presented to screen reader users. Visible form labels also provide visible descriptions and larger clickable targets for form controls which placeholders do not. * chore: remove duplicate SearchBar twcss * fix(a11y): - The edit and copy buttons that are visually hidden are exposed to Assistive technology and are announced to screen reader users. * fix(a11y): visible focus outline * fix(a11y): The button to select the LLM Model has the aria-haspopup and aria- expanded attributes which makes its role ambuguous and unclear. It functions like a combobox but doesn't fully support that interaction and also fucntions like a dialog but doesn't completely support that interaction either. * fix(a11y): fix visible focus outline * fix(a11y): Scroll to bottom button missing accessible name #3474 * fix(a11y): The page lacks any heading structure. There should be at least one H1 and other headings to help users understand the orgainzation of the page and the contents. Note: h1 won't be correct here so made it h2 * fix(a11y): LLM controls aria-labels * fix(a11y): There is no visible focus outline to the 'send message' button * fix(a11y): fix visible focus outline for Fork button * refactor(MessageRender): add focus ring to message cards, consolidate complex conditions, add logger for setting latest message, add tabindex for card * fix: focus border color and fix set latest message card condition * fix(a11y): Adequate contrast for MessageAudio buttton * feat: Add GitHub Actions workflow for accessibility linting * chore: Update GitHub Actions workflow for accessibility linting to include client/src/** path * fix(Nav): navmask and accessibility * fix: Update Nav component to handle potential undefined type in SearchContext * fix(a11y): add focus visibility to attach files button #3475 * fix(a11y): discernible text for NewChat button * fix(a11y): accessible landmark names, all page content in landmarks, ensures landmarks are unique #3514 #3515 * fix(Prompts): update isChatRoute prop to be required in List component * fix(a11y): buttons must have discernible text
kenshinsamue
pushed a commit
to intelequia/LibreChat
that referenced
this issue
Sep 17, 2024
…lose sidebars in mobile view (danny-avila#3536) * chore: playwright setup update * refactor: update ChatRoute component with accessible loading spinner with live region * chore(Message): typing * ci: first pass, a11y testing * refactor: update lang attribute in index.html to "en-US" * ci: jsx-a11y dev eslint plugin * ci: jsx plugin * fix: Exclude 'vite.config.ts' from TypeScript compilation for testing * fix(a11y): Remove tabIndex from non-interactive element in MessagesView component * fix(a11y): - Visible, non-interactive elements with click handlers must have at least one keyboard listener.eslintjsx-a11y/click-events-have-key-events - Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element.eslintjsx-a11y/no-static-element-interactions chore: remove unused bookmarks panel - fix some "Unexpected nullable boolean value in conditional" warnings * fix(NewChat): a11y, nested button issue, add aria-label, remove implicit role * fix(a11y): - partially address danny-avila#3515 with `main` landmark other: - eslint@typescript-eslint/strict-boolean-expressions * chore(MenuButton): Use button element instead of div for accessibility * chore: Update TitleButton to use button element for accessibility * chore: Update TitleButton to use button element for accessibility * refactor(ChatMenuItem): Improve focus accessibility and code readability * chore(MenuButton): Update aria-label to dynamically include primaryText * fix(a11y): SearchBar - If a form control does not have a properly associated text label, the function or purpose of that form control may not be presented to screen reader users. Visible form labels also provide visible descriptions and larger clickable targets for form controls which placeholders do not. * chore: remove duplicate SearchBar twcss * fix(a11y): - The edit and copy buttons that are visually hidden are exposed to Assistive technology and are announced to screen reader users. * fix(a11y): visible focus outline * fix(a11y): The button to select the LLM Model has the aria-haspopup and aria- expanded attributes which makes its role ambuguous and unclear. It functions like a combobox but doesn't fully support that interaction and also fucntions like a dialog but doesn't completely support that interaction either. * fix(a11y): fix visible focus outline * fix(a11y): Scroll to bottom button missing accessible name danny-avila#3474 * fix(a11y): The page lacks any heading structure. There should be at least one H1 and other headings to help users understand the orgainzation of the page and the contents. Note: h1 won't be correct here so made it h2 * fix(a11y): LLM controls aria-labels * fix(a11y): There is no visible focus outline to the 'send message' button * fix(a11y): fix visible focus outline for Fork button * refactor(MessageRender): add focus ring to message cards, consolidate complex conditions, add logger for setting latest message, add tabindex for card * fix: focus border color and fix set latest message card condition * fix(a11y): Adequate contrast for MessageAudio buttton * feat: Add GitHub Actions workflow for accessibility linting * chore: Update GitHub Actions workflow for accessibility linting to include client/src/** path * fix(Nav): navmask and accessibility * fix: Update Nav component to handle potential undefined type in SearchContext * fix(a11y): add focus visibility to attach files button danny-avila#3475 * fix(a11y): discernible text for NewChat button * fix(a11y): accessible landmark names, all page content in landmarks, ensures landmarks are unique danny-avila#3514 danny-avila#3515 * fix(Prompts): update isChatRoute prop to be required in List component * fix(a11y): buttons must have discernible text
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Issue Description: The button to scroll to the bottom of the chat has no accessible name and is only described as "button".
WCAG Criteria: 4.1.2 Name, Role, Value
Screenshot or Snippet: Link to Screenshot
Notes: All interactive elements and form fields should have a unique, descriptive name that identifies the element uniquely from other elements. This issue can usually be found with automated checks.
The text was updated successfully, but these errors were encountered: