Accessibility - Need a Tabbable Profile Image

[508it]

Describe the bug
The profile image on the At A Glance page should be focusable, so to do this we need a tabbable image class in EP

To Reproduce
Steps to reproduce the behavior in Landmark

1. In landmark go to https://hcm-tampm01-prd.inforcloudsuite.com/hcm/EmployeeSelfService/form/Employee%287004,700417%29.LRCFullEmployeeProfile?csk.showusingxi=true&csk.JobBoard=INTERNAL&csk.HROrganization=7004&menu=LRCEmployeeMenu.MyProfile
2. Tab once and visual focus is on the At A Glance menu on the left. Tab again and the visual focus will move to the email address under the Seth Burr profile image.
3. Visual focus never goes to the profile image.

In EP This translates to:

1. On http://master-enterprise.demo.design.infor.com/components/images/list
2. Make all the images focusable and with a focus state
3. Show alt text in the example (and hope the teams implement)

Expected behavior
Visual focus should move to the image after user tabs and display a visual indicator

See also
https://jira.lawson.com/browse/LMCLIENT-24216

[EdwardCoyle]

@tmcconechy looks like the example we're pointing to a Blockgrid. Does the selection API support having a focus state already?

[tmcconechy]

So thinking for these image-sm etc classes we add a focus state around it and add a tabindex and ensure there is alt text. So more the other two examples as your right block grid has a selection /focus api we could use.

So fix all three of these:
http://master-enterprise.demo.design.infor.com/components/images/example-photos.html -> add focus state and alt tag
http://master-enterprise.demo.design.infor.com/components/images/example-index.html -> add focus state and alt tag
http://master-enterprise.demo.design.infor.com/components/images/example-image-list.html -> make this use the image classes (which will have an alt tag and focus state) or as you said make it work with the block grid api?

[EdwardCoyle]

After re-reading a bit, I'm not sure that changing our display CSS classes for images is the right way to fix. We have the Blockgrid API for the list of images that can handle selection and keyboard nav, if there's a list of things that need selecting. As for standalone images, I don't think we should be making them all focusable with state management. Images aren't form components by default, so we shouldn't be changing those defaults except for specific cases.

@508it, is this not something that could be solved by simply adding a tabindex to whatever image you need to make focusable? Is there additional functionality missing that you're expecting? If not, adding a tabindex in your HTML template(s) will also add a default browser selection state, which should cover the case.

[tmcconechy]

ON the page in the app its a profile image. I probably shouldn't have linked that whole folder as it caused confusion. What they wanted was a single image which is a profile pic. So a class/style for the focus state (when they add a tabindex on it). At the moment adding a tabindex wont add any style.

So mostly making sure http://master-enterprise.demo.design.infor.com/components/images/example-index.html will work if there is a tabindex on it. But looped in the other pages.

[EdwardCoyle]

OK I see. In that case, definitely not much to add. I wasn't seeing a missing focus state on any of those images when adding a tabindex:

Chrome

Firefox

Maybe just making it more pronounced on FF is the key.

[tmcconechy]

Right or i was thinking make it the same as our input focus states. And just generally making sure the examples all have alt tags and work well accessibly.

[clepore]

If we can, make a "focus" mixin, and then refactor the css to include those styles everywhere. That way if we change the focus state in one place, it changes it everywhere.

[tmcconechy]

We have a sass variable for it actually https://github.com/infor-design/enterprise/blob/master/src/core/_config.scss#L28 or at least part of it but this could be cleaned up (its both the box-shadow and the border around)

[janahintal]

QA Failed. Focus not working in MacOS Mojave Firefox browser.

[tmcconechy]

Really weird...

• on my mac (Mojave + Firefox 67) this is working totally fine.
• one browser stack (Mojave + Firefox 67) im seeing nothing can be focused.

Im not sure what we can do.

[clepore]

What OS are you using in Bs?

[tmcconechy]

Mac (Mojave + Firefox 67) -> so its the same OS and browser as i am actually using. I also tried + and minus a few versions of FF on browserstack and non seem to work.

[brianjuan]

http://localhost:4000/components/images
Passed QA on all browsers. At first, tab focus is not working on my Mojave Firefox 67 even after applying All controls in System Preferences, but the about:config trick worked for me, https://stackoverflow.com/questions/11704828/how-to-allow-keyboard-focus-of-links-in-firefox

Do we need @pwpatton 's approval to move this to Done?

[pwpatton]

So what are we missing exactly in landmark?

fyi: @vonnyw

[tmcconechy]

@pwpatton just make sure to use the classes like image-sm or image-md and add a tabindex="0". Then you will have a focus state and the image will be focusable.

[tmcconechy]

@brianjuan just moved to done

[pwpatton]

Changing the code to have a tabindex=0 does in fact fix landmark.

[pwpatton]

Tab index works but we don't have a focusable style available for custom sized images. In landmark, we size images ourselves based on the LPL definitions.
Asking for a simple image-auto class that would be placed on the img element to achive the focusable style found in this example http://master-enterprise.demo.design.infor.com/components/images/example-index.html

[tmcconechy]

Just to clarify.

1. add an image-auto class with no height and width and has the focus code. this will use the size of the image
2. add it to the example page http://localhost:4000/components/images/example-index.html
3. also not sure why we did this on a parent div. it should work directly on the image tag.

<div class="image-lg">
   <img src="http://placehold.it/300x350/999999/FFFFFF" alt="image-md 300x350" tabindex="0">
</div>

<~--Instead of-->

<img class="image-lg"src="http://placehold.it/300x350/999999/FFFFFF" alt="image-md 300x350" tabindex="0">

[CindyMercadoReyes]

Moving this ticket to QA Failed. Focus is not visibly on the Placeholder images.

-MAC FF

• URL: http://master-enterprise.demo.design.infor.com/components/images/example-index.html?theme=soho&variant=light&colors=2578a9
• Tab throughout the page. The focus is only visible on the gray images.
• Please see screen shot attached.

[davidcarlsonberg]

I think the question here is, "Should a placeholder image have be tabbable/focusable?"

[tmcconechy]

I think so @davidcarlsonberg as its an "image" as well. The use case is the image is missing so they can use that placeholder instead. But there could be a case where it has a menu attached or something that would require it to be focusable.

[davidcarlsonberg]

This is both a type: bug (focus state issue) and a type: demo-app bug (tabindex issue on the example pages).

[brianjuan]

http://localhost:4000/components/images/example-index.html
Placeholders are now tabbable/focusable. I just noticed in Mac Firefox, images are not clickable but can be focused by using tab key, even after setting the System Preferences and about:config.

[tmcconechy]

Unfortunately I doubt there is anything we can do about firefox having different behavior. So i suggest we ignore this for now.

[brianjuan]

Got it @tmcconechy , will now move this to Done and will retest once beta is deployed.