Windows 10: Microsoft improving form controls in Microsoft Edge and Chromium

Brink · Oct 15, 2019

Since we began work on the next version of Microsoft Edge based on Chromium, we’ve been investigating ways to modernize form controls to provide a modern appearance as well as the touch friendliness and accessibility that our users expect from Microsoft Edge today.

Over the past few months, we’ve been collaborating closely with the Google Chrome team on this project, and are excited to share the refreshed controls that will be coming to Microsoft Edge Insider builds, or other Chromium browsers near you.

A more modern appearance

This change brings an improved polish to the form controls and helps bring continuity of design and user experience with the rest of the browser. We have been collaborating closely with the Google Chrome design team to strike a balance between our design languages with a modern look and feel that feels at home in a variety of Chromium browsers. Below is a comparison of the default controls in Chromium today, compared to the updated controls we’re rolling out:

Current Upcoming Radio

Checkbox

Text

Buttons

Select

Password

Color

Meter

Progress

Range

Date

Time

Better touch support

Windows devices come in a rich array of form factors and input modalities, including traditional desktop and laptop PCs, 2-in-1 devices, and other tablets and pen devices. We heard your feedback looking for a better touch input experience in our early Chromium preview builds, and set out to take an inventory of the controls to identify opportunities to improve the touch experience.

A good example of the touch improvements is the time input; currently, Chromium provides a text input, a clear button and a spinner. Our research found that with the large surface area of the fingertip, small controls that are too close together can be difficult to target precisely, recommending a control size of 23×23 pixels (13×13 DLUs) is a good minimum interactive control size for any input device. By contrast, the spin controls at 15×11 pixels are much too small to be used effectively with touch. The new time input we’re introducing includes a flyout with expected touch affordances, like inertia when scrolling and larger touch targets. Other inputs such as date, color, range received subtle size increases to important touch targets as well.

More accessible controls

Another area we examined is the focus rectangle that wraps a control when a user focuses the control. This is an important accessibility feature, as it allows the user to track where they’re actively focused, especially while navigating via keyboard.

Our team identified three different potential focus indicators that aligned with Microsoft’s design language, guaranteed high contrast on any background content, and provided a clean and aesthetically pleasing appearance.

We then ran interactive user studies to identify the best option, compared against Chromium’s current default focus rectangle as a baseline. We found that, while preferences were split for aesthetics, one option was the clear leader for accessibility. We’ve chosen that option as the new focus rectangle in Microsoft Edge, which you can see below:

Additionally, all these controls now support Windows High Contrast, which allows the user to define specific colors to improve the visual experience. All sites that utilize the built-in controls will benefit from these updated controls whenever the user is in High Contrast mode, without web developers doing any extra work. However, webdevelopers can adjust these styles if they want by utilizing the new CSS forced-color-adjust property and the prefers-contrast media query that are actively being standardized.

We’ve also updated our implementation to ensure great keyboard support across each control. For example, in the new color input, you can either navigate a single value using the arrow keys with the color well selected; if you hold the Ctrl key on Windows (Cmd key on Mac), it will move by 10 values allowing for quick traversal of the color well.

Finally, we updated the mappings for the controls to map to the HTML Accessibility API Mappings specification, to ensure a great experience for users who use assistive technologies (such as screen readers).

Please share your feedback

These updated controls are now available in Canary and Dev channel builds of Microsoft Edge, and will be coming upstream to other Chromium browsers in the near future. We’re excited as this work begins to ship out to users, and as the controls continue to evolve, we greatly appreciate any feedback that you may have in how we can improve the experience. Just click the smiley face in the top-right to Send Feedback, and let us know what you think!
— Greg Whitworth, Senior Program Manager, Microsoft Edge
Click to expand...

Source: Improving form controls in Microsoft Edge and Chromium - Microsoft Edge Blog

Tweet

— Twitter API (@user) View on Twiiter
Click to expand...

:)

Brian Rices · Oct 15, 2019

Change the Region for Microsoft Edge Chromium

I live in the US but gonna move. I’d like to know how I can change the region for Microsoft Edge Chromium?
MicrosoftEdge_X64_75.0.111.0

**Original Title**

Microsoft Edge Chromium

LEOPEVA64 · Oct 15, 2019

Microsoft’s new Chromium Edge browser leaked online.

so no new version after .111 so far?
Click to expand...

No, and maybe there are not going to be any more leaked versions, I think Microsoft has already taken steps so that there are no more leaks:

Microsoft’s new Chromium Edge browser leaked online.

Although you never know, suddenly someone else will appear to leak the new versions or maybe Microsoft will decide to release the first official build these days.

Brink · Oct 15, 2019

Microsoft announces 100% integration of Office.com and Microsoft Forms

We are thrilled to announce 100% integration of Office.com and Microsoft Forms for our commercial and consumer customers! This means multiple ways for you to create a new form, find an existing form, or search for a form in the suite header of Office.com.

To create a new form, click New, and then choose Forms survey.

To access existing forms, go to the Recent tab under Documents.

You can also search for an existing form by title.

j9xwkDFD48w

We’d love to get your feedback about this feature. Please go to the Microsoft Forms UserVoice site to offer suggestions or vote on ideas others have already submitted.
Click to expand...

Source: Start Forms journey from office.com - Microsoft Tech Community - 369912

Windows 10: Microsoft improving form controls in Microsoft Edge and Chromium

Microsoft improving form controls in Microsoft Edge and Chromium

Microsoft improving form controls in Microsoft Edge and Chromium

Microsoft improving form controls in Microsoft Edge and Chromium

Microsoft improving form controls in Microsoft Edge and Chromium - Similar Threads - Microsoft improving form

Microsoft Forms is improving Polls in Microsoft Teams Meetings

Microsoft is improving notifications and badging in Microsoft Edge

Microsoft Edge Chromium

Microsoft Edge Chromium Beta

Edge Chromium - Help Improve MS Edge settings?

Microsoft Edge Chromium

Microsoft Edge Chromium

Improving form controls in Microsoft Edge and Chromium.

Microsoft Edge Chromium