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

Details/summary in documentation body isn't behaving as expected with tabbing & opening #453

Closed
ststimac opened this issue Jun 6, 2018 · 7 comments

Comments

Projects
4 participants
@ststimac
Copy link
Member

commented Jun 6, 2018

This feature we have in the docs content has two issues:
not-accessible

  1. The cursor when hovered over it is a text cursor, not a pointer. Needs to be a pointer for the visual cue that this is something that can be clicked on.

  2. It currently can't be tabbed into via the keyboard and won't open when enter is pressed so something is happening there. There's no focus state being triggered by tabbing either. Something isn't implemented correctly so we'll have to check the code. The behavior should be similar to what happens on the status page of EdgePortal in terms of tabbing into details/summary and hitting enter.

@ststimac ststimac self-assigned this Jun 6, 2018

@ststimac ststimac changed the title details/summary in documentation body isn't accessible Details/summary in documentation body isn't accessible Jun 6, 2018

@ststimac ststimac added the type:bug label Jun 6, 2018

@molant

This comment has been minimized.

Copy link
Member

commented Jun 6, 2018

Except Edge all the other browsers support details/summary so we shouldn't have to do anything to make it accessible 🤔

@ststimac

This comment has been minimized.

Copy link
Member Author

commented Jun 6, 2018

Something is happening on our page then with the implementation because you can't tab into it and open it via the keyboard right now.

@ststimac

This comment has been minimized.

Copy link
Member Author

commented Jun 6, 2018

That's what I mean by accessible, something isn't working correctly and I don't know what yet. For reference, I checked tabbing on edgeportal's status page and hitting enter to expand the details and it worked fine. Doesn't work on our page, and I'm in Edge for both of those. Will have to do some debugging.

@ststimac ststimac changed the title Details/summary in documentation body isn't accessible Details/summary in documentation body isn't behaving as expected with tabbing & opening Jun 6, 2018

@Malvoz

This comment has been minimized.

Copy link
Contributor

commented Sep 14, 2018

@ststimac
The MS platform status page has a <details>/<summary> polyfill implemented, that is why you can interact with the element using your keyboard in Edge.

What @molant said, the feature is still a work in progress:
https://developer.microsoft.com/en-us/microsoft-edge/platform/status/detailssummary/

What Edge does when:

Details is open

<details role="group" open>
<summary tabindex="0" role="button" aria-expanded="true"></summary>
</details>

// Actually they do open="open", but this is a boolean attr so should just be open.

Details is closed

<details role="group">
<summary tabindex="0" role="button" aria-expanded="false"></summary>
</details>

Also about the cursor, idk why user agents haven't yet decided to set cursor: pointer for <summary> by default, may be related to this: w3c/csswg-drafts#1936

@molant molant assigned sarvaje and unassigned ststimac Sep 18, 2018

@molant

This comment has been minimized.

Copy link
Member

commented Sep 18, 2018

@sarvaje is taking care of this with the new results page.

@molant

This comment has been minimized.

Copy link
Member

commented Oct 18, 2018

@sarvaje I think this is fixed, right?

@molant molant added this to To do in October '18 🍁🍂 via automation Oct 18, 2018

@sarvaje

This comment has been minimized.

Copy link
Member

commented Oct 18, 2018

2 is already done.

1 is still happening, and it happens in all browsers.

I will work on this today.

sarvaje added a commit to sarvaje/webhint.io that referenced this issue Oct 18, 2018

@sarvaje sarvaje referenced this issue Oct 18, 2018

Merged

Fix: detail/summary cursor #541

2 of 2 tasks complete

@molant molant closed this in #541 Oct 18, 2018

molant added a commit that referenced this issue Oct 18, 2018

October '18 🍁🍂 automation moved this from To do to Done Oct 18, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.