publicissapient / accessible-ecommerce-demo Goto Github PK

Currently the mini cart icon is just a cart, even if there are items in the cart. Meanwhile, a screen reader user will hear a subtotal and the number of items in the cart.

Please display the subtotal and the number of items in the cart visually. Please do this however you like and a designer can review it later.

According to WCAG 2.4.6, field labels must be informative.

Currently, the label is "subscribe to our newsletter" which is not informative enough because it is not telling me to enter my email address. I know there is placeholder text but that does not replace a label.

Please make the "Subscribe to our Newsletter" some kind of heading, and make the label "enter email address".

Expected behavior: Products in the product grid should have different properties, including different prices, colors, and brands.
Actual behavior: All products have the same price, and color and brand are not mentioned in the product name.

Expected behavior: Filtering and sorting actions should be functional.
Actual behavior: Filtering and sorting actions don't appear to do anything on the product grid.

@aevanson (or others) Would this be stored in the Checkout screen and then used in the Review Order and Order Conf screens?

Accordion items to be added to template

Headings are meant to convey the document structure. When we make the product names headings, we end up with a really long list of headings for the page that people need to tab through. If someone is trying to navigate by headings, they are probably looking for a shortcut and don't want to tab through the whole document. We need a structure like:
H1 - Category name, e.g. Shirts
H2 - Filters
H3 - Filter type (e.g. Color)
H2 - Product Grid - Showing products X of X (part of the heading could be hidden)
--- here is where the products go, they should be links, not headings ---
H2 - Product Recommendations

Please remove heading tags from product name links.

Swap out the SR logo for the Publicis.Sapient logo and logotype.

Answer: Change the "skip to product" link text to:

"Skip to products"

#Original ticket text (Ignore)#
Currently, "skip to product" from the filters area takes you to the sorting options above the grid. We talked about renaming this link in the room after the UXers left but need help figuring out how. For example, we talked about:

• Changing the link to say "skip to product grid" (or actually, asking non-developers and non-UXers what they call that thing)
• Changing the link to say "skip filters" that leads to a link that says "Go back to filters", then the next tab stop would be "skip sorting options" landing on a link that says "Go back to sorting options", then having a link that said "skip product grid" then a link that said "Go back to product grid", etc.
• Changing the link to say, "skip to product grid" (or whatever people call it) and landing on a heading with a tabindex="0" for the product grid, then have a hidden next link that says "go back to filters"

Please help!

Within the filters, currently the filter category (e.g. "Color") is clickable on the desktop even though it doesn't do anything. We either have to make it not get keyboard focus and not be clickable, OR we need to make it actually work to expand and collapse the sections the way I assume it is supposed to work on mobile. Please do whatever is easier.

When additional items are added to the product carousel, they are forcing the existing elements to get squished.

The previous/next buttons need better enable/disable and scroll min/max functionality. Currently the carousel will scroll to an empty 'page' with no items visible.

The jump links before and after the carousel aren't showing up on focus.

On the product listing page, the "Showing products X of Y" content updates when a filter is selected. This element needs an aria-live attribute so that the content update is announced. E.g.

<span class="sort__showing-count" data-template="showing-count" aria-live="polite">Showing 1 <span class="element-invisible">to</span><span aria-hidden="true">-</span> 12 of 13 <span class="element-invisible">products</span></span>

Problem with current flow in the product tile.

The problem is that the number of products is defaulted to 1, but I haven't decided to buy that product yet. As I tab through, it sounds like a quantity of 1 has been selected, but I did not decide to buy that yet.

A better option would be that I add the item to the cart and THEN have the option to increase the quantity (or remove it). See an example on Loblaws click and collect (sort of works).

Make the flow go like this:

Tab stop 1: Product name + price (same as current)
Tab stop 2: Add to cart button. [Aria live attribute says, "One item [item name] has been added to cart"]
--- If i add an item to my cart, that reveals the change quantity option BELOW add to cart:
Tab stop 3: Decrease quantity button, with text label of "Remove [item name] from cart" if there is only one item in the cart (so by default). If there is more than one item in the field, the label will say "Decrease quantity [item name]"
Tab stop 4: Text field with label "Quantity"
Tab stop 5: Increase quantity button that announces the label and the current quantity. Label should be "Increase Quantity [item name]".

Need UX team to give this some thought and update it. [DONE -- now assigned to a developer]

1. Remove the title attribute from the link containing the svg. The text read to the screen reader user should be the same as the text created in the svg.
2. svg needs the attribute focusable="false" to work properly for IE and JAWS. Please add this attribute.

In the global navigation menu, provide a label for the button element in the search bar. Currently there is no text and the screen reader just announces, "button". Call it "search".

Do not use this code:

<button class="global-header__search-btn">
      <svg class="icon icon--search-btn">
        <use xlink:href="../sprite.svg#search"></use>
      </svg>
    </button>

Use something like this to make it accessible:

<button class="global-header__search-btn">
<img class="icon icon--search-btn" alt="Search" src="../sprite.svg#search">
    </button>

Deep linking accordion items: ie—“Read more” or “View Sizing” in description should scroll to appropriate accordion title AND toggle it open.

Expected state: Store should load with 0 items in cart. When I add an item to cart, it should appear in the mini cart.
Actual state: Store loads with 2 items already in cart, when I try to add an item to the cart, nothing happens.

Unordered list with non-li items in it in footer renders screen reader item count inaccurate.

Expected behavior: When I have my screen reader on and tab to the first link in the list of footer links, the screen reader should read the link label, identify the link as being part of an unordered list, and say how many items are in that list. In this case, it should say, "About, list 8 items."

Actual behavior: The screen reader says, "About, list 10 items, 1 sublist." It says that, because there are additional elements in the list.

E.g. there is a hidden h3 element that is counted (but not read by the screen reader). And the 10th item is actually the sublist.

People use that count to orient themselves to content. We can make the count correct by not marking up a list with additional elements inside it. Please mark up the list as a single list with only li elements as children of the ul so that the count is accurate.

The global navigation is marked up as a

Per Karen:

1. We need a page heading “Women’s Shirts and Tops”
2. I would like to make the “sort by” a dropdown
3. I don’t like how the product cards stretch so much, even on desktop. Can we make it so that they stretch to a certain point (maybe we need a VD opinion on this) and then we have gutters?
4. I think the filter should be much wider.
5. “Filters” should be an h2 but it is styled much smaller than “sort by”. So we need someone to look at the heading structure and styles.
6. I don’t link how there is no padding to the left and right, especially around the carousel.
7. The carousel isn’t quite right. I can make my screen width larger and smaller but the carousel doesn’t respond as I expect.

Fix automated tool errors on the PLP. You can see the errors if you download the WAVE plugin: https://wave.webaim.org/extension/

For this ticket, please fix:

• 4 x empty button (one is for the search button in a separate ticket, one is for the close button on the mini-cart, 2 are for the carousel arrows. Give the mini-cart a live text close button that is hidden with CSS. Give the carousel arrows live text labels of next/previous even though they don't get keyboard focus)
• 9 x broken skip links. I think you are fixing these anyway.

Create a generic modal that can be dropped in as an “Under construction” placeholder.

Default HTML5 error validation only works for a sighted user. Please try to make it work this way:

1. User submits form with error message
2. Error message appears visually near form field
3. Error message is inserted within the field's label. E.g.

Original label:
<label for="mylabel">Enter your email address</label><input id="mylabel"... />

New label after submitting form with invalid email address:
<label for="mylabel">Enter your email address <span class="error">Please enter a valid email address</span></label>

The part in the <span> gets added programmatically.
4. Programmatically put the user's keyboard focus into the field that has the first error (in this case there is only one field so it is easy). The screen reader will read the field AND the label.

Skip to products link in the filters area should link to the products, but it doesn't.

(1) Flyout menus open with the keyboard, but do not close on tab out. This impacts accessibility.
(2) Flyout menus open on mouse click, and should close when the user clicks somewhere else. Currently they stay open unless the user clicks on a different menu.

Steps to reproduce (1):

1. Tab into the menu.
2. On the "Women" link, hit Enter. Flyout menu opens.
3. Tab again, focus enters the Women category menu.
4. Keep tabbing through the whole menu, focus moves to the next category but the Women category menu stays open. It never closes.

• Add remaining icons to SVG “sprite sheet”
• add icons to the template/replace existing icons

As an online shopper, I want my default add to cart option to be to add a single item to the cart. Each product on the product grid currently defaults to 5.

Solution: Change the default value to 1.

The mini cart opens on click, but doesn't close unless you click back onto the mini cart icon. It is supposed to close whenever you click off of it.

Filter headers in the PLP should function like accordion buttons, collapsing their child filters when toggled. A + or - icon should be added to the right side of each heading as well (see designs)

As a sighted keyboard user, I want to use the sorting options at the top of the product grid. However, they are confusing to me because I can't tab through them all with my keyboard, I can only tab to the first one.

The reason why is that they are marked up as radio buttons with the radio button itself hidden. Radio buttons work by default with the left and right arrow keys but I wouldn't know they are radio buttons because they are hidden.

Solution: Mark these up as buttons. Buttons should be used for interactions that keep the user on the same page.

When the mini-cart is standalone, the dropdown menu disappears when the user tabs out of it. This was by design. This functionality didn't work when integrated into the site. I think this should be fixed, but I want to confirm with @alisonrae about this.

If this is the desired behaviour, there is a branch that does fix this issue:

https://github.com/PublicisSapient/accessible-ecommerce-demo/tree/defect/fix-on-blur-out-of-dropdown-it-does-not-disappear

Please let me know if this is the desired behaviour and I will create a PR for it.

@aevanson (or anyone else :) ) Are we going to have a Range Component?

Currently the <title> content is simply "Document". We need to provide descriptive titles.

For the product listing page, follow the pattern "The Accessible eStore", [category name], [subcategory name], e.g.
"The Accessible eStore, Women, Women's Tops"

For the product details page, follow the pattern "The Accessible eStore", [category name], [subcategory name], [product name], e.g.
"The Accessible eStore, Women, Women's Tops, Long Sleeved Wrap Top"

Currently the bypass block links are:

(1) "Skip to main content" --> (skips navigation)
<nav>...</nav>
(2) "Skip to nav" --> (returns to the skip navigation link)

Ideas:
(1) The link isn't really skipping directly to the main content in this case. Please change to "Skip navigation menu".
(2) "Skip to nav" is really jargon of our field. Suggest it be changed to something like, "Return to navigation menu".

On the product listing page, the buttons to remove the various filters are not descriptive enough. They only say the name of the filter applied and "button". Make them follow this pattern: "[filter name] + remove filter". E.g. you could do it like this, where hiddenText is hidden with CSS but available to the screen reader:

<h3 class="hiddenText" id="myStatement">Remove filter</h3>
<ul class="active filters">
<li class="active-filter">
      <button class="active-filter__remove-btn" data-remove-filter="blue" aria-describedby="myStatement">
        <svg class="icon--close-btn"><use xlink:href="../sprite.svg#close"></use></svg> Blue
      </button>
    </li>...

"Clear filters" button label is not as descriptive as it could be. Programmatically link it with the number of filters applied, so that the screen reader will announce, "Clear filters, 0 filters applied" or, "Clear filters, X filters applied"

<p class="product-filters__filter-count" id="myStatement"><span aria-live="polite" data-js="filter-count">0</span> filter<span data-js="plural" class="">s</span> applied</p>
...
<button class="btn btn--link active-filters__clear-btn" data-js="clear-filters" type="button" aria-describedby="myStatement">Clear filters</button>