Remove irrelevant information about IE (mdn#36281)

* Remove broken "invert" border-color

* Update index.md

* Update index.md

* Update index.md

* Update files/en-us/web/accessibility/keyboard-navigable_javascript_widgets/index.md

Co-authored-by: Estelle Weyl <[email protected]>

---------

Co-authored-by: Joshua Chen <[email protected]>
Co-authored-by: Estelle Weyl <[email protected]>

files/en-us/web/accessibility/keyboard-navigable_javascript_widgets/index.md

@@ -117,29 +117,18 @@ Bind a key down handler to each element in the group, and when an arrow key is u
 
 Here's an example of a [WAI-ARIA tree view](https://files.paciellogroup.com/training/WWW2012/samples/Samples/aria/tree/index.html) using this technique.
 
-### Tips
-
-#### Use element.focus() to set focus
-
-Do not use `createEvent()`, `initEvent()` and `dispatchEvent()` to send focus to an element. DOM focus events are considered informational only: generated by the system after something is focused, but not actually used to set focus. Use `element.focus()` instead.
-
-#### Use onfocus to track the current focus
-
-Don't assume that all focus changes will come via key and mouse events: assistive technologies such as screen readers can set the focus to any focusable element. Track focus using `onfocus` and `onblur` instead.
-
-`onfocus` and `onblur` can now be used with every element. There is no standard DOM interface to get the current document focus. If you want to track the focus status, you can use the [document.activeElement](/en-US/docs/Web/API/Document/activeElement) to get the active element. You can also use [document.hasFocus](/en-US/docs/Web/API/Document/hasFocus) to make sure if the current document focus.
-
 ### Technique 2: `aria-activedescendant`
 
 This technique involves binding a single event handler to the container widget and using the `aria-activedescendant` to track a "virtual" focus. (For more information about ARIA, see this [overview of accessible web applications and widgets](/en-US/docs/Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets).)
 
 The `aria-activedescendant` property identifies the ID of the descendant element that currently has the virtual focus. The event handler on the container must respond to key and mouse events by updating the value of `aria-activedescendant` and ensuring that the current item is styled appropriately (for example, with a border or background color).
 
-## General Guidelines
+## General guidelines
 
-### Use onkeydown to trap key events, not onkeypress
+### Usage of focus events
 
-IE will not fire `keypress` events for non-alphanumeric keys. Use `onkeydown` instead.
+- Do not dispatch the [`focus`](/en-US/docs/Web/API/Element/focus_event) event to send focus to an element. DOM focus events are considered informational only: they are generated by the system after something is focused, but not actually used to set focus. Use `element.focus()` instead.
+- Do listen for the [`focus`](/en-US/docs/Web/API/Element/focus_event) and [`blur`](/en-US/docs/Web/API/Element/blur_event) events to track focus changes. Don't assume that all focus changes will come via key and mouse events: assistive technologies such as screen readers can set the focus to any focusable element. If you want to track the focus status for the whole document, you can use the [`document.activeElement`](/en-US/docs/Web/API/Document/activeElement) to get the active element, or [`document.hasFocus`](/en-US/docs/Web/API/Document/hasFocus) to make sure if the current document has focus.
 
 ### Ensure that keyboard and mouse produce the same experience
 
@@ -151,7 +140,7 @@ To ensure that the keyboard can be used to activate elements, any handlers bound
 
 ### Always draw the focus for tabindex="-1" items and elements that receive focus programmatically
 
-IE will not automatically draw the focus outline for items that programmatically receive focus. Choose between changing the background color via something like `this.style.backgroundColor = "gray";` or add a dotted border via `this.style.border = "1px dotted invert"`. In the dotted border case you will need to make sure those elements have an invisible 1px border to start with, so that the element doesn't grow when the border style is applied (borders take up space, and IE doesn't implement CSS outlines).
+Ensure that focused elements have a focus ring. This can be done using the CSS {{cssxref("outline")}} property, which should not be unconditionally set to `none`—if you want to prevent unnecessary focus rings being displayed, use the {{cssxref(":focus-visible")}} pseudo-class.
 
 ### Prevent used key events from performing browser functions