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.

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

Add option to render the carousel track as an unordered list #119

Merged
merged 6 commits into from
Mar 20, 2023

Conversation

lemoswilson
Copy link
Contributor

This is a change requested as part of the HFO ADA audit made by Level Access.

On the page https://www.happyfamilyorganics.com/our-story/ we have a button carousel that is used to navigate between the tabs of a block, and Level Access wrote the following about it:

_The below-mentioned textual links below "Take a Journey Through Our Story" heading text visually appear as list items but are not marked using HTML list markup. When links are properly grouped, it facilitates labeling the group, skipping past the group, and helps to divide large blocks of information into more manageable components.

Following instances are affected:

  • 2003
  • 2006
  • 2007-2008, etc.

[User Impact]
Screen reader users will benefit if the content has been structured using list markup._

This small change should provide a better user experience for screen reader users.

@codesandbox
Copy link

codesandbox bot commented Feb 28, 2023

CodeSandbox logoCodeSandbox logo  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

@@ -144,7 +147,7 @@ export default

# Render the track and slotted slides
render: (create) ->
create 'div',
create @trackHTMLElement,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could possibly make this not require a new prop by checking if the firs slide returned by makeSlides() has an element of li. Can you console.log it and see if has a type or element property or something like that so we can try and auto-determine this?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just updated the pr with the requested change

@cypress
Copy link

cypress bot commented Mar 16, 2023

Passing run #53 ↗︎

0 18 0 0 Flakiness 0

Details:

build
Project: vue-ssr-carousel Commit: 959d569e65
Status: Passed Duration: 02:24 💡
Started: Mar 16, 2023 5:45 PM Ended: Mar 16, 2023 5:47 PM

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings.

src/ssr-carousel-track.vue Outdated Show resolved Hide resolved
src/ssr-carousel-track.vue Show resolved Hide resolved
@weotch weotch merged commit 4e48a72 into main Mar 20, 2023
@weotch weotch deleted the add-option-to-render-track-as-unordered-list branch March 20, 2023 14:44
@weotch weotch restored the add-option-to-render-track-as-unordered-list branch March 20, 2023 14:45
@weotch weotch deleted the add-option-to-render-track-as-unordered-list branch March 20, 2023 14:47
@weotch
Copy link
Member

weotch commented Mar 20, 2023

@lemoswilson I tagged this as 2.1.x, but that's probably a major version change for you on HFO. The only breaking change from 2.x is the change of [disabled] to [aria-disabled] in selectors (see #116).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants