On my cell phone, paper-ripple fires when I touch the element, rather than something is selected.
I've noticed this is also the same behavior when using the element catalog paper ripple demo on my cell phone. However, this is not the same behavior on the google design site which uses paper ripple but not polymer.
For touch screens- How can I make the paper-ripple behavior like the google design site where the ripple only fires when something is selected rather than touched?
<template is="dom-if" if="{{show}}">
<section class="relative enabled-hover"
data-name="portfolio"
on-tap="jumpToPage">
<div class="vertical layout">
<div>
<div>
<h2 class="section-title">Portfolio</h2>
</div>
<br>
<br>
<div class="layout horizontal center-center">
<iron-icon class="big" icon="build"></iron-icon>
<iron-icon class="big" icon="cloud-circle"></iron-icon>
<iron-icon class="big" icon="http"></iron-icon>
</div>
</div>
</div>
<paper-ripple
fit
id="ripple"
initial-opacity="0.95"
opacity-decay-velocity="0.98"
hidden$="{{hideRipple}}">
</paper-ripple>
The ripple is meant to be visual feedback to the user on an interaction. The elements catalog demo shows the ripple when a selection is made on the menu items. If you want to turn the ripple off on buttons and fabs, I believe all support the noink attribute.
If you just want the icons to ripple, try https://elements.polymer-project.org/elements/paper-icon-button instead of iron-icon, and remove the paper-ripple.
Related
I am working on accessibility testing for an Angular project. I have some code for a modal that is as below
<div class="modal fade" bsModal #cancelConfirmModal="bs-modal" tabindex="-1" role="dialog"
attr.aria-label="Cancel Modal" aria-hidden="true">
<div class="md-dialog modal-md">
<!-- Modal content-->
<div class="md-content">
<div class="md-header">
<div class="md-title pull-left">
<h4 tabindex=0 class="headerBottomMarginNone"> Cancel</h4>
</div>
<button type="button" class="close-popup" (click)="hideCancelModal()">
<img src="{{ pathImg }}/close.png" alt="Close Icon"
(mouseover)="changeCloseIconOnHover('close-popup3')"
(mouseout)="changeCloseIcon('close-popup3')" id="close-popup3">
<label class="sr-only">Close</label>
</button>
</div>
<div tabindex=0 class="md-body">
{{ cancelMessageBody }}
</div>
<div class="md-footer">
<button type="reset pull-right" class="ts-btn ts-btn-primary no-btm-margin" (click)="revert()">Yes</button>
<button type="pull-right" (click)="hideCancelModal()"
class="ts-btn ts-btn-tertiary margin-left10 no-btm-margin">Cancel</button>
</div>
</div>
</div>
</div>
When I tab over to <h4 tabindex=0 class="headerBottomMarginNone"> Cancel</h4> it reads Cancel heading level 4 clickable. There is no click event on the parent or even its parent. h4 is made tab reachable as per the QA's preference. How do I stop JAWS from announcing clickable??
Short Answer
Remove the tabindex.
Long Answer
Headings should not have a tabindex (other than maybe a tabindex="-1", covered below).
Anything with a tabindex is considered to be interactive and it is expected that you have supplied the relevant handlers for focus, click, keyboard keys etc.
Your QA is incorrect on this and is making the software harder to use.
The only time it is appropriate to use a tabindex on a heading is if you need to programatically focus it (for example on an AJAX application where you load a new page in it is a good practice to focus the heading level 1 on the page to let screen reader users know the new page has loaded in.) At this point the only tabindex that is appropriate is tabindex="-1" so that it can only be focused programatically and not via the tab key.
Your QA may think that screen reader users need to be able to focus the headings, this is not the case! They use shortcut keys within their screen reader to access headings on the page.
Also remove it from <div tabindex=0 class="md-body"> as that is also not interactive.
Finally it is likely you do not need tabindex="-1" on the modal itself as when you open the modal you should focus either the first interactive element or the close button (which in your case appears to be the cancel button anyway.), however there may be functionality in your software that I am not aware of so that is just a point to consider.
have an issue with the expansion of the accordion containing a list of items using a keyboard.
There is a complication in that all the accordion's data is being populated from an API, so a lot of the solutions that I had seen are hardcoded. For example, using the information found in the article below didn't work as the unique values are hard coded:
https://www.hassellinclusion.com/blog/accessible-accordion-pattern/
I've added in a lot of the appropriate ARIA labels and navigating via tab around it works well as does the screen reader, but I can't get the accordion to expand.
I tried to talking it from another angle by getting the enter button to be interpreted as a click on the element to expand the accordion but got completely lost trying to do such a thing in Angular as inserting Vanilla JS is not as straight forward as it would seem.
Here is the code, it's spread over three components so I've compiled into one and removed some styling classes for legibility:
<div tabindex="0" (keydown.enter)="myFunction()" role="button">
<h2 tabindex="0">
<img>
<i tabindex="0"></i>{{ organiser.name }}
</h2>
//this component displays the selected item. the accessibility on this works fine
<app-selected-area role="region">
</app-selected-area>
</div>
<div class="content">
//this component displays the items that can be selected
<app-skill-item class="item">
<div tabindex="0" role="button">
<h3>{{ skill.name }}</h3>
<button *ngIf="updateable && isSelected()" (click)="select()">
Remove
<span class="screen-reader-only">
{{ skill.name }}
</span>
skill
</button>
<button *ngIf="updateable && !isSelected()" (click)="select()" tabindex="0">
Add
<span class="screen-reader-only">
{{ skill.name }}
</span>
skill
</button>
</app-skill-item>
</div>
Any help or hints would be much appreciated!
Ended up finding the answer for this in the follow question/thread:
Trigger click in Typescript - Property 'click' does not exist on type 'Element'
let element: HTMLElement = document.getElementsByClassName('btn')[0] as HTMLElement;
element.click();
this was the following code that let me manipulate the accordion via the enter key as a click
I have been admiring the remix 3d site images found here: https://www.remix3d.com/board/3vkCqsxjqeH
when you hover your mouse over the image catalog the photos move.
I want to replicate this and am having trouble doing so. Inspecting the elements reveals that one of the interactive cards uses the tag, which I have never seen. This is the div for that card:
<div role="listitem" aria-setsize="32" aria-posinset="1" aria-label="Grid Item 1: " class="gallery-grid-item visible">
<creation-item id="ember551" class="ember-view">
<div data-test-selector="creation-item" draggable="true" class="item-content ">
<creation-router id="ember556" class="ember-view" aria-hidden="true">
<route-to id="ember561" role="none" class="ember-view"><a tabindex="-1" title="Create an ocean scene" href="/details/0ce93dec1a8e43f6b262faff8b34015f" id="ember566" class="ember-view" aria-label="Model Create an ocean scene - Activate to go to Create an ocean scene's page.">
<!---->
<div class="item-image" data-ember-action="" data-ember-action-575="575">
<div class="item-image-inner">
<hover-sprite id="ember580" class="is-loaded ember-view">
<div style="-webkit-transform: translateY(-6.666666666666667%); -ms-transform: translateY(-6.666666666666667%); transform: translateY(-6.666666666666667%); width: 100%; height: 1500%; background-image: url(https://encoding.assets.remix3d.com:443/003/0ce93dec1a8e43f6b262faff8b34015f/005/08586725131056667658993017976cu01/de7fa282fa004472a8ae94e0460051ea?format=jpg);" class="hover-sprite-sheet"></div>
<!---->
</hover-sprite>
</div>
</div>
</a>
</route-to>
</creation-router>
<div class="item-card-bottom">
<creation-router id="ember581" class="ember-view">
<route-to id="ember582" role="none" class="ember-view"><a title="Create an ocean scene" href="/details/0ce93dec1a8e43f6b262faff8b34015f" id="ember587" class="ember-view" aria-label="Model Create an ocean scene - Activate to go to Create an ocean scene's page.">
<div data-test-selector="creation-item-name" class="item-name" data-ember-action="" data-ember-action-588="588">
<div class="item-name-text">Create an ocean scene</div>
<span class="remix-icon icon-chevron-right-med"></span>
</div>
</a>
</route-to>
</creation-router>
<a data-test-selector="creation-item-add-button" title="Add to board" tabindex="0" href="#" id="ember593" class="item-add-button remix-icon icon-add ember-view"></a>
</div>
</div>
</creation-item>
</div>
How can i go about replicating this/how are hover sprites used?
The site looks to be using the Ember.js framework, which allows defining of custom HTML tags (Components), ie <hover-sprite>.
As for the effect you see when mousing over a catalog item ... for each item they've created an image sprite (example sprite from Remix 3D). The sprite is sequential snapshots of an object in rotation. Based on cursor location the sprite is shifted to reveal the next snapshot in the sequence of rotation.
You don't need to use Ember.js to create this effect. Here's an example using jQuery to demonstrate a solution : Rotate sprite javascript.
My HTML is as below (an extracted portion):
<h1><span>Main Menu</span></h1>
<div>
<button tabindex="0">New Customer</button><br>
<button tabindex="0">Existing Customer</button>
</div>
I am using NVDA. When the user enters the screen, the focus is on the first button. NVDA reads the text on the first button(New Customer). It skips the heading (h1). I assumed it should read the h1 tags without any of the aria tags like aria-label. Am I wrong in my assumption? What do I need to do to make this work?
If you want a group label around your buttons that will be read when focus moves into the group, then use role='group' and aria-label on the container. The group label will be read when you TAB forward into the group ("New Customer") and when you TAB backwards into the group ("Existing Customer").
<div role="group" aria-label="Main Menu">
<div>
<button>New Customer</button><br>
<button tabindex="0">Existing Customer</button>
</div>
</div>
The above example does not visually show the text "Main Menu". You can still have that displayed if you want using:
<div role="group" aria-label="Main Menu">Main Menu
<div>
<button>New Customer</button><br>
<button>Existing Customer</button>
</div>
</div>
You could also use a <nav> element, but with your brief snippet, it doesn't sound like the buttons are for navigation so I wouldn't recommend this but wanted to show it for completeness:
<nav aria-label="Main Menu">
<div>
<button>New Customer</button><br>
<button>Existing Customer</button>
</div>
</nav>
If you are using a script to send focus to the first button, screenreader software will skip over anything in the markup before that and go straight to the button. You should be able to use the arrow keys to go back up to hear it.
Generally it’s best practise to let the user control focus with clicks/taps instead of automating it for them on page load.
I'm having problems interacting with a selectable list of paper-item objects. The on-tap (or on-click) function is only firing when I click the iron-icon within the item, but the rest of the cell is unresponsive. I'm currently displaying the items within a paper-menu, but I've tried using iron-selector which yields the same behavior.
<paper-menu selected="{{selected}}">
<paper-item on-tap="_onItemTap" role="menuitem">
<iron-icon icon="cloud-done"></iron-icon>
<paper-item-body two-line>
<div>file_1.json</div>
<div secondary class="second-item-line">Complete</div>
</paper-item-body>
</paper-item>
(... other items)
</paper-menu>
The paper-menu is nested within a neon-animated-pages element and a paper-card element. I don't know if that's affecting its behavior at all.
Am I missing anything? Is there a way to make the entire paper-item clickable that I just haven't implemented? Or could other elements be interfering?
Update:
Upon further digging, I've found that my list of 'paper-item' elements works perfectly if I remove it from the context of the paper-card element. The moment I put the list inside a card, it masks the selectable area somehow (but the iron-icon is still exposed). Is there any way to expose the entire paper-item element to selection in this context? If not, I'll have to redesign my UI to not use paper-card.
I figured it out. Silly bug, really. Because my list was not inside a div with class="card-content", the paper-item elements weren't showing on the top layer of the card, becoming unusable. Adding a div with that class around my content solved my issue. Here's how the code turned out:
<paper-card>
<div class="card-content">
<iron-selector selected="{{selected}}">
<paper-icon-item on-tap="_onItemTap">
<iron-icon icon="cloud-done" item-icon></iron-icon>
<paper-item-body two-line>
<div>file_1.json</div>
<div secondary>Complete</div>
</paper-item-body>
</paper-icon-item>
<!-- other items -->
</iron-selector>
</div>
</paper-card>