@gravity-ui/page-constructor 4.23.0 → 4.24.0-alpha.0

package/build/esm/sub-blocks/HubspotForm/HubspotForm.css

@@ -301,6 +301,13 @@ unpredictable css rules order in build */
   white-space: nowrap;
   appearance: none;
 }
+.pc-hubspot-form .hs-button.primary:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 1px;
+}
+.pc-hubspot-form .hs-button.primary:focus:not(:focus-visible) {
+  outline: 0;
+}
 .pc-hubspot-form .hs-button.primary:hover {
   background-color: var(--g-color-base-brand-hover);
 }

package/build/esm/sub-blocks/PriceDetailed/PriceDetails/PriceDetails.css

@@ -23,11 +23,29 @@ unpredictable css rules order in build */
   margin: auto 10px;
 }
 .pc-price-details__foldable_title {
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  outline: none;
+  color: inherit;
+  background: none;
+  cursor: pointer;
   cursor: pointer;
   display: flex;
+  align-items: center;
   font-weight: 400;
-  font-size: var(--g-text-body-2-font-size);
-  line-height: var(--g-text-body-2-line-height);
+  border-radius: var(--g-focus-border-radius);
+}
+.pc-price-details__foldable_title:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+.pc-price-details__foldable_title:focus:not(:focus-visible) {
+  outline: 0;
 }
 .pc-price-details__foldable_title_color_cornflower {
   color: var(--g-color-text-link);

package/build/esm/sub-blocks/PriceDetailed/PriceDetails/PriceDetails.js

@@ -26,7 +26,7 @@ const PriceDetails = (props) => {
         return React.createElement("div", { className: b('foldable_block') }, getPriceDetails());
     };
     const getFoldableTitle = () => {
-        return (React.createElement("div", { className: b('foldable_title', { color: foldableColor, size: foldableSize }), onClick: toggleOpen },
+        return (React.createElement("button", { className: b('foldable_title', { color: foldableColor, size: foldableSize }), onClick: toggleOpen, "aria-expanded": isOpened },
             foldableTitle,
             React.createElement(ToggleArrow, { open: isOpened, size: 14, type: 'vertical', className: b('arrow') })));
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "4.23.0",
+  "version": "4.24.0-alpha.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {

package/styles/mixins.scss

@@ -8,6 +8,26 @@
     line-height: var(--g-text-#{$name}-line-height);
 }
 
+@mixin focusable($offset: 0, $mode: 'outline') {
+    @if $mode == 'outline' {
+        &:focus {
+            outline: 2px solid var(--g-color-line-focus);
+            outline-offset: $offset;
+        }
+        &:focus:not(:focus-visible) {
+            outline: 0;
+        }
+    }
+    @if $mode == 'box-shadow' {
+        &:focus {
+            box-shadow: 0 0 0 2px var(--g-color-line-focus);
+        }
+        &:focus:not(:focus-visible) {
+            box-shadow: none;
+        }
+    }
+}
+
 @mixin link() {
     @include islands-focus();
 

package/styles/root.scss

@@ -37,10 +37,12 @@
 
     &_theme_light {
         @include pc-colors-light;
+        --g-color-line-focus: var(--g-color-text-brand);
     }
 
     &_theme_dark {
         @include pc-colors-dark;
+        --g-color-line-focus: var(--g-color-text-light-primary);
     }
 
     &.g-root_theme_dark {

package/styles/styles.css

@@ -70,6 +70,7 @@ unpredictable css rules order in build */
   color: var(--g-color-text-link);
   text-decoration: none;
   cursor: pointer;
+  border-radius: var(--g-focus-border-radius);
 }
 .utilityfocus .yfm_constructor a:focus {
   outline: 2px solid #ffdb4d;
@@ -78,6 +79,12 @@ unpredictable css rules order in build */
   --pc-text-header-color: var(--g-color-text-link-hover);
   color: var(--g-color-text-link-hover);
 }
+.yfm_constructor a:focus {
+  box-shadow: 0 0 0 2px var(--g-color-line-focus);
+}
+.yfm_constructor a:focus:not(:focus-visible) {
+  box-shadow: none;
+}
 .yfm_constructor table {
   color: var(--g-color-text-primary);
   border: 1px solid var(--g-color-line-generic);

package/styles/yfm.scss

@@ -85,6 +85,8 @@
 
     a {
         @include link();
+        @include focusable(0, 'box-shadow');
+        border-radius: var(--g-focus-border-radius);
     }
 
     table {