An updated comment box in issues, pull requests and discussions

[dipree]

Select Topic Area

Product Feedback

Body

We've upgraded the GitHub comment box across issues, discussions, and pull requests to improve your experience. It’s now more consistent, intuitive, and accessible.

Please let us know if you are encountering any problems.

[tay1orjones]

@dipree This looks really great! Two bugs I noticed immediately when submitting a PR review:

1. When toggling preview the review box changes size.
2. The review box doesn't stay in place as I scroll. It sometimes appears to recalculate, but lags behind, so I lose the box quite easily.

Screen.Recording.2023-10-31.at.12.18.32.PM.mov

I also sort of miss the file attachment banner that used to be at the bottom of the comment box. Is there a keyboard shortcut to quickly open the attach file system dialog instead of using the "Attach files" button in the toolbar?

[jacobgkau]

The size-changing bug gets worse if you close and re-open that drop-down while it's on the Preview tab. It right-aligns to the side of page, but then if you switch back to the Write tab (causing the drop-down to grow again), the drop-down overflows the page, requiring horizontal scrolling.

[dipree]

Thanks, we are on it.

[dipree]

Solved.

[DNin01]

Looks modern! I would like to be able to see the keyboard shortcuts for each function (previously, hovering over the buttons would show the corresponding keyboard shortcuts). They could be added anywhere that makes sense like in the keyboard shortcuts dialog or the documentation. It'd also be nice to still have a link to the basic writing and formatting syntax documentation page. Those are just a few things that come to mind right away - still trying it out!

[osfanbuff63]

Looks pretty nice, although the background around the comment box being the same color as the rest of the page makes it a little hard to tell where the text box is.

[DNin01]

Issue forms still use the old input box design, here's what it looks like:

You can try it by navigating to any issue form with a text area, like this one.

Pretty much the only notable difference is just that the text box is clearer to make out.

[Cj-Malone]

This is making it really hard for me to know which mode I'm in.

I've just noticed this is still the old system on discussion templates:

[dipree]

@Cj-Malone just to confirm that I'm not missing anything, you are talking about this one https://github.com/orgs/community/discussions/new?category=general, right?

[Cj-Malone]

Yeah, that text box is still highlighted, please don't kill it.

[dipree]

We don't intend to "kill" anything, your feedback is valuable and we are actively working on improving this.

[zbjornson]

In the old comment box, you could switch from Write to Preview and back to Write, and undo would work. Now undo doesn't work in that scenario.

[dipree]

Good catch, thank you.

[aleksanb]

This new input box is almost very hard for me to see.
First i thought some css / js had failed to load, and that all input boxes now were in a semi broken state.

I can no longer see at a glance that something is a text input box, the "comment on PR"-box is now even styled the same as the "view deployments" button, but only one of these two are an input box. See attached image.

I'm unsure of the motivation for this change, but it seems like change for the reason of keeping the internal design team busy and employed, and not for making input fields more accessible as claimed by the blog post announcing the change.

[cartermp]

Completely agree. While I'm sure this is technically within accessibility rules for color contrast, the box is so much harder to distinguish now. Compare it to the old one, which is extremely obvious :(

[cewkrupa]

I've been using the high contrast themes for Github for a while, and this new comment box looks absolutely lovely in both themes, which to me means upping the contrast a bit in the standard themes would go a long way.

You can change your theme by going to https://github.com/settings/appearance.

Dark high contrast theme:

Light high contrast theme:

[dipree]

This is very helpful, thank you. Input border color contrast is something we are currently looking into.

[dipree]

We have made some improvements to better highlight the textarea again.

[westrem]

@dipree the screenshot you posted and that can also be found in the announcement must come from a figma or smth similar right? It has a nice gray background, so it looks nice.

In real-life github however, the background of a page is the same as the inside of the input, both light and dark mode - so it doesn't look like an area where one can write, but rather a static component. For PR description, that can be prefilled with a PR template, I immediately got the feel smth is broken in the UI, because I thought I am seeing preview first, not the write mode → there's literally no difference.

Together with the fact, that now, for some reason, the whole component has the blue focus outline, rather than just the actual area where one can write, it's not obvious that one is indeed writing within the textarea or why I am "focused" on the component itself.

If possible, tweaking these two details could make the UX much better!

[XV-02]

I'm of a mind with several others who have highlighted issues indexing on and tracking the text input field. Especially when having to cycle through multiple tabs, windows, or workspaces. The change in context in such cases makes it much harder to acquire and engage with for me. This was alleviated somewhat by using high contrast themes, but at a significant cost of increased fatigue when using the rest of the UI.

The use of a small frame around the comments box, like the one still used when replying in-thread, might alleviate this.

Beyond the general issue of indexing on the field, I also feel there is an insufficient differentiation between text-input and preview modes. Several times while typing this comment, I moved between other tabs to make sure I wasn't forgetting any specific issues I'd had thus far. On returning, I began typing only to realize I was still previewing my comment.

This might be alleviated by either more actively highlighting the "Write" and "Preview" tabs, or by changing the colour of the background between the two. I incline to the former option, like so:

Write Mockup:

Preview Mockup:

Obviously, not quite like that, but a variation on that conceptual theme.

Edit:
To an extent, my suggestions are already present:

When an in-thread comment box isn't actively focused, the un-selected tab matches the colour of the surrounding frame, and the active tab matches the text field. This helps me to understand which feature is active more quickly. This frame also helps highlight the comment box generally.

[dipree]

Thanks for your feedback, we are looking into it.

[dipree]

Thanks again, we have made some improvements around better highlighting the textarea and to make it easier to distinguish between Write and Preview.

[Poopooracoocoo]

Not sure if it's just me but on mobile web (chrome for android) on issues, discussions and PRs the width of the page is massive until I go down to the new comment box. Only started happening since this change so I hope this isn't just coincidental?

[lucianomlima]

Emoji it's not rendered in the write panel, only in preview. This makes it difficult for those who use emojis in messages to bring meaning to the comment. I'm using macOS Ventura 13.6.1 with latest Brave Browser (v1.60.110).

[JayDi85]

New editor is weird now - images upload button hidden inside a dot menu and I need to tap-tap-tap it multiple times. Instead single tap in old version. Me and other users of the oss project active uses issues/bug reports with screenshots. Now its bad UX.

[JayDi85]

omg, discussion editor is much worse. Thats dot menu so big that latest iPad cant show it in whole screen and I need to scroll it:

[lsh-0]

It’s now more consistent, intuitive, and accessible.

Not for me. I'm often attaching screenshots of graphs and problematic renderings and such into issues. With the previous comment box there was a long bar along the bottom where you could click anywhere within it to bring up a file chooser, now there is tiny little paperclip I need to precisely position the mouse over to click. Today I clicked that icon's neighbour for the bajillionth time and I've had it! Angry comment time. Consistent maybe, intuitive and accessible definitely not.

[JayDi85]

Bug report with miss preview tab update

1. Prepare comment with screenshot and switch to preview tab;
2. Post it;
3. Bug: it will keep preview tab with your content instead clean it;
4. If you switch to write tab again then all will be updated.

[Marcono1234]

Does the comment even have to contain a screenshot? It seems to also happen when it just contains text.

I also seem to encounter this when writing pull request comments:
I write the comment, click on the "Preview" tab and then "Comment". But the "Preview" tab is not cleared. This always makes me think adding the comment did not work.

(Browser: Firefox 120.0 (64-bit))

[simonschaufi]

Since the editor was changed a few days ago, the display of an issue on a cell phone is no longer correct in the mobile view.

Open an issue, for example this one:

sabbelasichon/typo3-rector#3828

If you scroll down a little, you will briefly see that the editor icons are very wide and then disappear.

The issue is then displayed correctly.

Additionally the ... menu doesn't work at all on Google Chrome mobile and instead i jump to the start of the page. The jump to top can even be reproduced on desktop with F12 and the mobile view

PS: I liked the editor before more.

[simonschaufi]

The new editor should have definitely been rolled out with a feature toggle under "Feature preview" instead of such a broken change.

[simonschaufi]

@dipree Even with the new update, this issue is still open.

[mrdoob]

I have not done a proper investigation but...

I think it's actually a new Chrome issue that only repros when increasing the font size on Android settings.

[simonschaufi]

It seams like this bug is fixed now.

[Mwagandi]

thank you

[AndrewSouthpaw]

There are two issues I've run into. One's a visual bug, the other is a drop in accessibility for keyboard users:

Dropdowns are occluded

The pane now occludes dropdowns, like this:

Buttons no longer findable with keyboard drivers

The contents of the pane used to be searchable by keyboard-driven plugins like Vimium. As in I could trigger a click on Review changes, press F again and it would find the textbox inside for me to focus into. Now, it doesn't work anymore.

[aleksanb]

I have the same issue.
This update broke keyboard accessibility.
For me with vimium in firefox, i can't even click the "review changes" button to have the popup show with keyboard shortcuts.

[dipree]

Thank you for reporting this, we are on it.

[mqudsi]

The UI might be “prettier” but the lack of a frame/border for the actual textarea removed a ux affordance and made it harder to distinguish what is happening or intended to happen. People understand intuitively what a textarea looks like and that it is meant to accept input. The new UI doesn’t convey that info and it looks like you would be clocking into and typing into “the void” across all platforms (Chrome and Firefox on Windows, Firefox on Linux, Safari on iOS). IIRC there is no caret showing the readiness to accept input and there is no hint given that the textarea is any different from the (ample) white space padding that surrounds it.

This is a step backwards! I appreciate the attempt but highly disagree with the move and consider at least this part of the change to be user hostile!

[dipree]

Thanks for your feedback. We have made some improvements with regard to better highlighting the textarea again.

[mqudsi]

Hey Daniel. At least on mobile it is definitely much better now!

[Delgan]

I just noticed a fresh update of the comment box and wanted to give a shout-out to the folks at Github for listening to feedback.

It is now significantly easier to assess the textarea input and avoid any visual confusion with the preview. It also looks great. Thank you.

[DNin01]

Issue forms have the new box now! But the placeholder "Leave a comment" overlaps with the placeholder on the form's textarea.

[jacobgkau]

Interesting, I'm not seeing that on Brave 1.58.137 (Chromium 117.0.5938.153) in dark mode.

[DNin01]

Hmm 😕 Well, I'm using Edge (Chromium) 119 on Windows 11.
_{From the font on your screenshot, that might be Linux 👀 or Ubuntu or whatever}

And do note that you have to be on the new issue forms page, like here's an example with a placeholder on one of the textareas.

[Fraetor]

Reproduced in Firefox 120 on Fedora 39. I had to click into the textarea before it showed up.

[jacobgkau]

Oh, I was just on a non-form new issue page. (I conflated the "issue forms" feature with the classic form for submitting a new issue.)

I see it in the repo that you linked:

[simonschaufi]

@dipree Can you also please change the behavior that when I close an issue that the cursor is NOT put into the comment box? That is especially annoying on mobile because it opens the keyboard.

[github-actions[bot]]

💬 Your Product Feedback Has Been Submitted 🎉

Thank you for taking the time to share your insights with us! Your feedback is invaluable as we build a better GitHub experience for all our users.

Here's what you can expect moving forward ⏩

• Your input will be carefully reviewed and cataloged by members of our product teams. 
  • Due to the high volume of submissions, we may not always be able to provide individual responses.
  • Rest assured, your feedback will help chart our course for product improvements.
• Other users may engage with your post, sharing their own perspectives or experiences. 
• GitHub staff may reach out for further clarification or insight. 
  • We may 'Answer' your discussion if there is a current solution, workaround, or roadmap/changelog post related to the feedback.

Where to look to see what's shipping 👀

• Read the Changelog for real-time updates on the latest GitHub features, enhancements, and calls for feedback.
• Explore our Product Roadmap, which details upcoming major releases and initiatives.

What you can do in the meantime 💻

• Upvote and comment on other user feedback Discussions that resonate with you.
• Add more information at any point! Useful details include: use cases, relevant labels, desired outcomes, and any accompanying screenshots.

As a member of the GitHub community, your participation is essential. While we can't promise that every suggestion will be implemented, we want to emphasize that your feedback is instrumental in guiding our decisions and priorities.

Thank you once again for your contribution to making GitHub even better! We're grateful for your ongoing support and collaboration in shaping the future of our platform. ⭐