Add link for opening app details

[JuliaKirschenheuter]

• Resolves: [BITV]: Create possibility to open an app details via keyboard #41310

Summary

• Move action for opening app details to the link
• Add alt for AppScore image
• Remove opacity from app description because not accessible

🖼️ Screenshots

After:

Checklist

• Code is properly formatted
• [Sign-off message](https://github.com/src-d/guide/blob/master/developer-community/fix-DCO.
  
  md) is added to all commits
• Tests (unit, integration, api and/or acceptance) are included
• Screenshots before/after for front-end changes
• Documentation (manuals or wiki) has been updated or is not required
• Backports requested where applicable (ex: critical bugfixes)

[szaimen]

Tested and works but breaks on mobile:

[marcoambrosini]

Hi @JuliaKirschenheuter, this should be an <a /> element as suggested in the issue. For a quick fix we can just wrap the title of the app for this.

We shouldn't remove the clickability of the whole line because this is what we ultimately want to achieve.

For the Cards view, the cards should be <a /> elements themselves so we don't need to add any button.

[marcoambrosini]

update - solution for having the whole row clickable:

The first <td> element in the row should have position: absolute and contain both the svg icon and the <a> element. The <a> element also has position: absolute and width: 100%
The rest is adjusting paddings, z-indexes and focus feedbacks.

This is legal HTML, it's accessible and does what we want.

Screen.Recording.2023-11-14.at.11.20.30.mov

[JuliaKirschenheuter]

For the Cards view, the cards should be elements themselves so we don't need to add any button.

@marcoambrosini i can't agree with you regarding Cards view. Right now we have <li class="section"> which is clickable. Then we need to create a link for icon and image.

[marcoambrosini]

@JuliaKirschenheuter the link would be the whole card. Please take a look at how Airbnb deals with this in their card view

[JuliaKirschenheuter]

update - solution for having the whole row clickable:

The first <td> element in the row should have position: absolute and contain both the svg icon and the <a> element.

@marcoambrosini

We have a table in that place and i can't add a link between <td> elements, that would broke a table. Please have a look in https://www.w3.org/TR/WCAG20-TECHS/H79.html

What i can do in that place: create a link over name:

[marcoambrosini]

@JuliaKirschenheuter the <a> goes within the <td>

[ShGKme]

Agree with @marcoambrosini proposal. Making a link with position absolute over all the row makes the whole row behave like a link:

• It has a link context menu
• Can be opened in a new tab by mouse
• Having a link allows using screen reader navigation to go to the next link
• And it is the whole row, how it was before, not only text in one cell

But I'd suggest a bit different implementation, union with @JuliaKirschenheuter's suggestion.

We already have a column with the name which describes the link. We can make this text a link. And then add pseudo-element ::after to the link to stretch it as Marco wanted to do with TD. Then we won't duplicate the link text in another column and it will be positioned on on the text.

Pseudo-code:

1. Make a name a link:

   <td class="app-name">
     <a href="link">Collaborative tags</a>
   </td>

2. Add ::after to a link to make it stretch on the row.

   .app-name a::after {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
   }

3. Fix z-index with other buttons as Marco mentioned

4. Remove the current click handler and replace it with the link (need to check how it works now)

---

One drawback. It makes it impossible to select the text on the row...

[ShGKme]

Works fine in both table and grid views, opens the sidebar, works as a link, works with a screen reader and keyboard.

Name  column 2  visited  link    current page  Show details for Dashboard app

NVDA with a focus on the link:

[ShGKme]

One drawback. It makes it impossible to select the text on the row...

IMO, this is fine in this case.

[susnux]

Cypress seems to be related needs fixing the app details tests