css: use :focus-visible instead of :focus(visible)

This is aligning our language with
https://www.w3.org/TR/selectors-4/

gtk/gtkcssselector.c

@@ -1282,6 +1282,7 @@ gtk_css_selector_parse_selector_pseudo_class (GtkCssParser   *parser,
         { "link",           GTK_STATE_FLAG_LINK, },
         { "visited",        GTK_STATE_FLAG_VISITED, },
         { "checked",        GTK_STATE_FLAG_CHECKED, },
+        { "focus-visible",  GTK_STATE_FLAG_FOCUS_VISIBLE, },
       };
       guint i;
 
@@ -1448,19 +1449,6 @@ gtk_css_selector_parse_selector_pseudo_class (GtkCssParser   *parser,
                                            selector);
           selector->state.state = GTK_STATE_FLAG_DROP_ACTIVE;
         }
-      else if (gtk_css_token_is_function (token, "focus"))
-        {
-          if (!gtk_css_parser_consume_function (parser, 1, 1, parse_identifier_arg, (gpointer) "visible"))
-            {
-              if (selector)
-                _gtk_css_selector_free (selector);
-              return NULL;
-            }
-          selector = gtk_css_selector_new (negate ? &GTK_CSS_SELECTOR_NOT_PSEUDOCLASS_STATE
-                                                  : &GTK_CSS_SELECTOR_PSEUDOCLASS_STATE,
-                                           selector);
-          selector->state.state = GTK_STATE_FLAG_FOCUS_VISIBLE;
-        }
       else
         {
           gtk_css_parser_error (parser,

gtk/gtkcsstypes.c

@@ -232,7 +232,7 @@ gtk_css_pseudoclass_name (GtkStateFlags state)
     "visited",
     "checked",
     "drop(active)",
-    "focus(visible)"
+    "focus-visible"
   };
   guint i;
 

gtk/theme/Adwaita/_common.scss

@@ -42,10 +42,10 @@ dnd {
  * Outlines *
  ********/
 
-:focus(visible) link,
-label:focus(visible):not(.link),
-row:focus(visible),
-flowboxchild:focus(visible) {
+:focus-visible link,
+label:focus-visible:not(.link),
+row:focus-visible,
+flowboxchild:focus-visible {
   // We use the outline properties to signal the focus properties
   // to the adwaita engine: using real CSS properties is faster,
   // and we don't use any outlines for now.
@@ -58,15 +58,15 @@ flowboxchild:focus(visible) {
 }
 
 // Widgets that draw their focus indicator outset and not inset
-plane:focus(visible),
-scale:focus(visible) > trough {
+plane:focus-visible,
+scale:focus-visible > trough {
   outline-color: $focus_border_color;
   outline-style: solid;
   outline-offset: 10px;
   outline-width: 2px;
 }
 
-button:focus(visible), modelbutton:focus(visible) {
+button:focus-visible, modelbutton:focus-visible {
   outline-color: $focus_border_color;
   outline-style: solid;
   outline-offset: -2px;
@@ -78,7 +78,7 @@ button:focus(visible), modelbutton:focus(visible) {
 }
 
 // Draw the "outline" around the whole switch not the slider
-switch:focus(visible) {
+switch:focus-visible {
   &, &:hover { slider { outline-color: transparent; } }
   &:focus {
     box-shadow: 0 0 0 3px if($variant=='light', lighten(opacify($focus_border_color, 1), 20%), $focus_border_color);
@@ -86,8 +86,8 @@ switch:focus(visible) {
   row:selected & { outline-color: $alt_focus_border_color; }
 }
 
-checkbutton:focus(visible),
-radiobutton:focus(visible) {
+checkbutton:focus-visible,
+radiobutton:focus-visible {
   outline-color: $focus_border_color;
   outline-style: solid;
   outline-offset: 2px;
@@ -96,7 +96,7 @@ radiobutton:focus(visible) {
   row:selected & , treeview:selected & { outline-color: $alt_focus_border_color; }
 }
 
-row:focus(visible) {
+row:focus-visible {
   outline-color: $focus_border_color;
   outline-offset: -2px;
   outline-style: solid;
@@ -105,7 +105,7 @@ row:focus(visible) {
   }
 }
 
-treeview:focus(visible) {
+treeview:focus-visible {
   outline-color: $focus_border_color;
   outline-style: solid;
   outline-width: 2px;
@@ -114,7 +114,7 @@ treeview:focus(visible) {
   }
 }
 
-notebook:focus(visible) {
+notebook:focus-visible {
   outline-color: $focus_border_color;
   outline-style: solid;
   outline-offset: -1px;
@@ -3979,7 +3979,7 @@ colorswatch {
     }
   }
 
-  &:focus(visible) {
+  &:focus-visible {
     outline-offset: -2px;
     outline-width: 2px;
     outline-style: solid;

tests/testwidgetfocus.c

@@ -47,7 +47,7 @@ const char *css =
 "  background-color: white;"
 "  box-shadow: none;"
 "}"
-"focuswidget button:focus(visible) {"
+"focuswidget button:focus-visible {"
 "  outline-width: 4px;"
 "  outline-color: yellow;"
 "}"