From ec673d8109dbbb06dc8fd38f5125bbd9105a0a9e Mon Sep 17 00:00:00 2001 From: Ramon Date: Tue, 12 Feb 2019 09:48:01 -0200 Subject: [PATCH 01/12] update portals (translating to PT-BR) --- content/docs/portals.md | 38 ++++++++++++++++++++------------------ 1 file changed, 20 insertions(+), 18 deletions(-) diff --git a/content/docs/portals.md b/content/docs/portals.md index 650121396..3c46d0082 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -6,19 +6,21 @@ permalink: docs/portals.html Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. +Portals fornece uma forma elegante de renderizar um elemento filho dentro de um nó DOM que existe fora da hierarquia do DOM do componente pai. + ```js ReactDOM.createPortal(child, container) ``` -The first argument (`child`) is any [renderable React child](/docs/react-component.html#render), such as an element, string, or fragment. The second argument (`container`) is a DOM element. +O primeiro argumento (`child`) é qualquer [elemento filho React renderizável](/docs/react-component.html#render), como um elemento, string ou fragmento. O segundo argumento (`container`) é um elemento DOM. -## Usage {#usage} +## Uso {#usage} -Normally, when you return an element from a component's render method, it's mounted into the DOM as a child of the nearest parent node: +Normalmente, quando retornamos um elemento pelo método render de um componente, ele é montado dentro do DOM como um filho do nó pai mais próximo: ```js{4,6} render() { - // React mounts a new div and renders the children into it + // React monta uma nova div e renderiza o filho dentro dela return (
{this.props.children} @@ -27,34 +29,34 @@ render() { } ``` -However, sometimes it's useful to insert a child into a different location in the DOM: +Entretanto, em algumas situação é útil inserir um elemento filho em um local diferente no DOM: ```js{6} render() { - // React does *not* create a new div. It renders the children into `domNode`. - // `domNode` is any valid DOM node, regardless of its location in the DOM. + // React *não* cria uma nova div. Ele renderiza o filho dentro do `domNode`. + // `domNode` é qualquer nó DOM válido, independente da sua localização no DOM. return ReactDOM.createPortal( this.props.children, domNode ); } ``` +Um caso típico do uso de portals é quando um componente pai tem o estilo `overflow: hidden` ou `z-index`, mas você precisa que o filho visualmente "saia" desse contêiner. Por exemplo, caixas de diálogo, hovercards e tooltips. -A typical use case for portals is when a parent component has an `overflow: hidden` or `z-index` style, but you need the child to visually "break out" of its container. For example, dialogs, hovercards, and tooltips. - -> Note: +> Nota: > -> When working with portals, remember that [managing keyboard focus](/docs/accessibility.html#programmatically-managing-focus) becomes very important. +> Quando estiver trabalhando com portals, lembra-se que [tratar os eventos de foco do teclado](/docs/accessibility.html#programmatically-managing-focus) se torna muito importante. > -> For modal dialogs, ensure that everyone can interact with them by following the [WAI-ARIA Modal Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal). +> No caso de modais, assegure-se que todos possam interagir com o modal seguindo as práticas descritas em [WAI-ARIA Modal Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal). -[**Try it on CodePen**](https://codepen.io/gaearon/pen/yzMaBd) +[**Experimente no CodePen**](https://codepen.io/gaearon/pen/yzMaBd) -## Event Bubbling Through Portals {#event-bubbling-through-portals} +## Propagação de Eventos Através do Portals {#event-bubbling-through-portals} -Even though a portal can be anywhere in the DOM tree, it behaves like a normal React child in every other way. Features like context work exactly the same regardless of whether the child is a portal, as the portal still exists in the *React tree* regardless of position in the *DOM tree*. +Apesar de um portal poder estar em qualquer lugar na árvore DOM, seu comportamento é como o de qualquer outro elemento React filho. Funcionalidades como contexto funcionam da mesma forma independente se o filho é um portal, pois o portal ainda existe na *árvore React* independentemente da posição que esteja na *árvore DOM*. -This includes event bubbling. An event fired from inside a portal will propagate to ancestors in the containing *React tree*, even if those elements are not ancestors in the *DOM tree*. Assuming the following HTML structure: +Isso inclui a propagação de eventos. Um evento disparado dentro de um portal será propagado para os elementos antecessores da *árvore React*, mesmo que estes não sejam antecessores na *árvore DOM*. +This includes event bubbling. An event fired from inside a portal will propagate to ancestors in the containing *React tree*, even if those elements are not ancestors in the *DOM tree*. Considerando a seguinte estrutura HTML: ```html @@ -65,7 +67,7 @@ This includes event bubbling. An event fired from inside a portal will propagate ``` -A `Parent` component in `#app-root` would be able to catch an uncaught, bubbling event from the sibling node `#modal-root`. +Um componente `Pai` em `#app-root` será capaz de capturar a propagação de um evento não tratado vindo do nó irmão `#moda-root`. ```js{28-31,42-49,53,61-63,70-71,74} // These two containers are siblings in the DOM @@ -149,6 +151,6 @@ function Child() { ReactDOM.render(, appRoot); ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/jGBWpE) +[**Experimente no CodePen**](https://codepen.io/gaearon/pen/jGBWpE) Catching an event bubbling up from a portal in a parent component allows the development of more flexible abstractions that are not inherently reliant on portals. For example, if you render a `` component, the parent can capture its events regardless of whether it's implemented using portals. From 0eb31af24345acaadf5b24f5cdc1c15968f05164 Mon Sep 17 00:00:00 2001 From: Ramon Date: Wed, 13 Feb 2019 09:48:43 -0200 Subject: [PATCH 02/12] update portals --- content/docs/portals.md | 52 ++++++++++++++++++++--------------------- 1 file changed, 25 insertions(+), 27 deletions(-) diff --git a/content/docs/portals.md b/content/docs/portals.md index 3c46d0082..d6606a2ef 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -4,9 +4,7 @@ title: Portals permalink: docs/portals.html --- -Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. - -Portals fornece uma forma elegante de renderizar um elemento filho dentro de um nó DOM que existe fora da hierarquia do DOM do componente pai. +Portals fornece uma forma elegante de renderizar um elemento filho dentro de um nó DOM que existe fora da hierarquia do componente pai. ```js ReactDOM.createPortal(child, container) @@ -16,7 +14,7 @@ O primeiro argumento (`child`) é qualquer [elemento filho React renderizável]( ## Uso {#usage} -Normalmente, quando retornamos um elemento pelo método render de um componente, ele é montado dentro do DOM como um filho do nó pai mais próximo: +Normalmente, quando retornamos um elemento pelo método render de um componente ele é montado dentro do DOM como um filho do nó pai mais próximo: ```js{4,6} render() { @@ -47,7 +45,7 @@ Um caso típico do uso de portals é quando um componente pai tem o estilo `over > > Quando estiver trabalhando com portals, lembra-se que [tratar os eventos de foco do teclado](/docs/accessibility.html#programmatically-managing-focus) se torna muito importante. > -> No caso de modais, assegure-se que todos possam interagir com o modal seguindo as práticas descritas em [WAI-ARIA Modal Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal). +> No caso dos modais, assegure-se que todos possam interagir com o modal seguindo as práticas descritas em [WAI-ARIA Modal Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal). [**Experimente no CodePen**](https://codepen.io/gaearon/pen/yzMaBd) @@ -56,7 +54,7 @@ Um caso típico do uso de portals é quando um componente pai tem o estilo `over Apesar de um portal poder estar em qualquer lugar na árvore DOM, seu comportamento é como o de qualquer outro elemento React filho. Funcionalidades como contexto funcionam da mesma forma independente se o filho é um portal, pois o portal ainda existe na *árvore React* independentemente da posição que esteja na *árvore DOM*. Isso inclui a propagação de eventos. Um evento disparado dentro de um portal será propagado para os elementos antecessores da *árvore React*, mesmo que estes não sejam antecessores na *árvore DOM*. -This includes event bubbling. An event fired from inside a portal will propagate to ancestors in the containing *React tree*, even if those elements are not ancestors in the *DOM tree*. Considerando a seguinte estrutura HTML: +Considerando a seguinte estrutura HTML: ```html @@ -70,7 +68,7 @@ This includes event bubbling. An event fired from inside a portal will propagate Um componente `Pai` em `#app-root` será capaz de capturar a propagação de um evento não tratado vindo do nó irmão `#moda-root`. ```js{28-31,42-49,53,61-63,70-71,74} -// These two containers are siblings in the DOM +// Estes dois contêineres são irmãos no DOM const appRoot = document.getElementById('app-root'); const modalRoot = document.getElementById('modal-root'); @@ -81,14 +79,14 @@ class Modal extends React.Component { } componentDidMount() { - // The portal element is inserted in the DOM tree after - // the Modal's children are mounted, meaning that children - // will be mounted on a detached DOM node. If a child - // component requires to be attached to the DOM tree - // immediately when mounted, for example to measure a - // DOM node, or uses 'autoFocus' in a descendant, add - // state to Modal and only render the children when Modal - // is inserted in the DOM tree. + // O elemento portal é inserido na árvore DOM, depois + // o componente Modal filho é montado, o que significa que o filho + // será montado em nó DOM separado. Se um componente + // filho precisa ser colocado na árvore DOM + // imediatamente quando é montado, por exemplo para medir um + // nó DOM, ou usar 'autoFocus' em um descendente, adicione + // state ao Modal e renderize apenas o filho quando o Modal + // estiver inserido na árvore DOM. modalRoot.appendChild(this.el); } @@ -112,9 +110,9 @@ class Parent extends React.Component { } handleClick() { - // This will fire when the button in Child is clicked, - // updating Parent's state, even though button - // is not direct descendant in the DOM. + // Isso é disparado quando o botão no filho é clicado, + // atualizando o state do componente Pai, mesmo que o filho + // não seja um descendente direto no DOM. this.setState(state => ({ clicks: state.clicks + 1 })); @@ -123,12 +121,12 @@ class Parent extends React.Component { render() { return (
-

Number of clicks: {this.state.clicks}

+

Número de cliques: {this.state.clicks}

- Open up the browser DevTools - to observe that the button - is not a child of the div - with the onClick handler. + Abra o DevTools do navegador + para notar que o botão + não é um filho da div + com o onClick.

@@ -139,11 +137,11 @@ class Parent extends React.Component { } function Child() { - // The click event on this button will bubble up to parent, - // because there is no 'onClick' attribute defined + // O evento de clique nesse botão irá propagar para o ascendente, + // porque o atributo 'onClick' não está definido return (
- +
); } @@ -153,4 +151,4 @@ ReactDOM.render(, appRoot); [**Experimente no CodePen**](https://codepen.io/gaearon/pen/jGBWpE) -Catching an event bubbling up from a portal in a parent component allows the development of more flexible abstractions that are not inherently reliant on portals. For example, if you render a `` component, the parent can capture its events regardless of whether it's implemented using portals. +Capturar a propagação de um evento de um portal em um componente pai permite o desenvolvimento de abstrações mais flexíveis que não são propriamente inerentes aos portals. Por exemplo, se você renderizar um componente ``, o componente pai pode captura seus eventos independentemente se são implementados usando portals. From 29f893dfa6152c6b1dce1d78214b328b58b9d212 Mon Sep 17 00:00:00 2001 From: Ramon Date: Thu, 14 Feb 2019 08:42:13 -0200 Subject: [PATCH 03/12] Fix typos --- content/docs/portals.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/content/docs/portals.md b/content/docs/portals.md index d6606a2ef..99ad7ce2e 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -54,7 +54,7 @@ Um caso típico do uso de portals é quando um componente pai tem o estilo `over Apesar de um portal poder estar em qualquer lugar na árvore DOM, seu comportamento é como o de qualquer outro elemento React filho. Funcionalidades como contexto funcionam da mesma forma independente se o filho é um portal, pois o portal ainda existe na *árvore React* independentemente da posição que esteja na *árvore DOM*. Isso inclui a propagação de eventos. Um evento disparado dentro de um portal será propagado para os elementos antecessores da *árvore React*, mesmo que estes não sejam antecessores na *árvore DOM*. -Considerando a seguinte estrutura HTML: +Considere a seguinte estrutura HTML: ```html @@ -79,13 +79,13 @@ class Modal extends React.Component { } componentDidMount() { - // O elemento portal é inserido na árvore DOM, depois + // O elemento portal é inserido na árvore DOM depois que // o componente Modal filho é montado, o que significa que o filho - // será montado em nó DOM separado. Se um componente + // será montado em um nó DOM separado. Se um componente // filho precisa ser colocado na árvore DOM // imediatamente quando é montado, por exemplo para medir um - // nó DOM, ou usar 'autoFocus' em um descendente, adicione - // state ao Modal e renderize apenas o filho quando o Modal + // nó DOM ou usar 'autoFocus' em um descendente, adicione + // state ao Modal e renderize o filho apenas quando o Modal // estiver inserido na árvore DOM. modalRoot.appendChild(this.el); } From b3d256c17606e4762943b2f5e67ae9796c4a514a Mon Sep 17 00:00:00 2001 From: Ramon Date: Thu, 14 Feb 2019 17:56:29 -0200 Subject: [PATCH 04/12] =?UTF-8?q?Atualiza=C3=A7=C3=A3o=20de=20"Uso"=20para?= =?UTF-8?q?=20"Utiliza=C3=A7=C3=A3o"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/portals.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/portals.md b/content/docs/portals.md index 99ad7ce2e..a1c28499b 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -12,7 +12,7 @@ ReactDOM.createPortal(child, container) O primeiro argumento (`child`) é qualquer [elemento filho React renderizável](/docs/react-component.html#render), como um elemento, string ou fragmento. O segundo argumento (`container`) é um elemento DOM. -## Uso {#usage} +## Utilização {#usage} Normalmente, quando retornamos um elemento pelo método render de um componente ele é montado dentro do DOM como um filho do nó pai mais próximo: From f118a92d76afcf76de85c7833ff1f5c3bff694e5 Mon Sep 17 00:00:00 2001 From: Ramon Date: Thu, 14 Feb 2019 17:58:12 -0200 Subject: [PATCH 05/12] =?UTF-8?q?Corre=C3=A7=C3=A3o=20de=20erro=20de=20dig?= =?UTF-8?q?ita=C3=A7=C3=A3o?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/portals.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/portals.md b/content/docs/portals.md index a1c28499b..a7458fa05 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -31,7 +31,7 @@ Entretanto, em algumas situação é útil inserir um elemento filho em um local ```js{6} render() { - // React *não* cria uma nova div. Ele renderiza o filho dentro do `domNode`. + // React *não* cria uma nova div. Ele renderiza os filhos dentro do `domNode`. // `domNode` é qualquer nó DOM válido, independente da sua localização no DOM. return ReactDOM.createPortal( this.props.children, From 909f12d9d44b0b426b1dfdf878982528715470b0 Mon Sep 17 00:00:00 2001 From: Ramon Date: Thu, 14 Feb 2019 18:00:47 -0200 Subject: [PATCH 06/12] =?UTF-8?q?Corre=C3=A7=C3=A3o=20de=20erro=20de=20dig?= =?UTF-8?q?ita=C3=A7=C3=A3o?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/portals.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/portals.md b/content/docs/portals.md index a7458fa05..0bd9476ea 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -43,7 +43,7 @@ Um caso típico do uso de portals é quando um componente pai tem o estilo `over > Nota: > -> Quando estiver trabalhando com portals, lembra-se que [tratar os eventos de foco do teclado](/docs/accessibility.html#programmatically-managing-focus) se torna muito importante. +> Quando estiver trabalhando com portals, lembre-se que [tratar o eventos de focus](/docs/accessibility.html#programmatically-managing-focus) se torna muito importante. > > No caso dos modais, assegure-se que todos possam interagir com o modal seguindo as práticas descritas em [WAI-ARIA Modal Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal). From 9ed353ac45ef7bf5dfeaca2242db6285c3372e2e Mon Sep 17 00:00:00 2001 From: Ramon Date: Thu, 14 Feb 2019 18:05:52 -0200 Subject: [PATCH 07/12] =?UTF-8?q?Corre=C3=A7=C3=A3o=20da=20tradu=C3=A7?= =?UTF-8?q?=C3=A3o=20de=20"modal"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/portals.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/portals.md b/content/docs/portals.md index 0bd9476ea..100523cab 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -45,7 +45,7 @@ Um caso típico do uso de portals é quando um componente pai tem o estilo `over > > Quando estiver trabalhando com portals, lembre-se que [tratar o eventos de focus](/docs/accessibility.html#programmatically-managing-focus) se torna muito importante. > -> No caso dos modais, assegure-se que todos possam interagir com o modal seguindo as práticas descritas em [WAI-ARIA Modal Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal). +> No caso dos modals, assegure-se que todos possam interagir com eles seguindo as práticas descritas em [WAI-ARIA Modal Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal). [**Experimente no CodePen**](https://codepen.io/gaearon/pen/yzMaBd) From 23d16d645495d4bab663d4d9183060638709dcc7 Mon Sep 17 00:00:00 2001 From: Ramon Date: Thu, 14 Feb 2019 18:06:51 -0200 Subject: [PATCH 08/12] =?UTF-8?q?Corre=C3=A7=C3=A3o=20de=20erro=20de=20dig?= =?UTF-8?q?ita=C3=A7=C3=A3o?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/portals.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/portals.md b/content/docs/portals.md index 100523cab..16dc956c7 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -65,7 +65,7 @@ Considere a seguinte estrutura HTML: ``` -Um componente `Pai` em `#app-root` será capaz de capturar a propagação de um evento não tratado vindo do nó irmão `#moda-root`. +Um componente `Pai` em `#app-root` será capaz de capturar a propagação de um evento não tratado vindo do nó irmão `#modal-root`. ```js{28-31,42-49,53,61-63,70-71,74} // Estes dois contêineres são irmãos no DOM From bfc989b1db18ffa52689bfcba2a01fbf7036a8ec Mon Sep 17 00:00:00 2001 From: Ramon Date: Thu, 14 Feb 2019 18:09:05 -0200 Subject: [PATCH 09/12] =?UTF-8?q?Corre=C3=A7=C3=A3o=20de=20plural?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/portals.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/portals.md b/content/docs/portals.md index 16dc956c7..eec09f2da 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -80,8 +80,8 @@ class Modal extends React.Component { componentDidMount() { // O elemento portal é inserido na árvore DOM depois que - // o componente Modal filho é montado, o que significa que o filho - // será montado em um nó DOM separado. Se um componente + // os componentes filhos de `Modal` são montados, o que significa que os filhos + // serão montados em um nó DOM separado. Se um componente // filho precisa ser colocado na árvore DOM // imediatamente quando é montado, por exemplo para medir um // nó DOM ou usar 'autoFocus' em um descendente, adicione From bbc896be9ff72221ca22dd469eccb30c35fb1c0f Mon Sep 17 00:00:00 2001 From: Ramon Date: Thu, 14 Feb 2019 18:09:52 -0200 Subject: [PATCH 10/12] =?UTF-8?q?Atualiza=C3=A7=C3=A3o=20de=20"notar"=20pa?= =?UTF-8?q?ra=20"observar"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/portals.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/portals.md b/content/docs/portals.md index eec09f2da..c0cf6a4d1 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -124,7 +124,7 @@ class Parent extends React.Component {

Número de cliques: {this.state.clicks}

Abra o DevTools do navegador - para notar que o botão + para observar que o botão não é um filho da div com o onClick.

From 65c264871e364f56f2ee35736fc5fc6958b1f017 Mon Sep 17 00:00:00 2001 From: Ramon Date: Thu, 14 Feb 2019 18:12:48 -0200 Subject: [PATCH 11/12] =?UTF-8?q?atualiza=C3=A7=C3=A3o?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/portals.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/portals.md b/content/docs/portals.md index c0cf6a4d1..8e2dbdb1b 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -151,4 +151,4 @@ ReactDOM.render(, appRoot); [**Experimente no CodePen**](https://codepen.io/gaearon/pen/jGBWpE) -Capturar a propagação de um evento de um portal em um componente pai permite o desenvolvimento de abstrações mais flexíveis que não são propriamente inerentes aos portals. Por exemplo, se você renderizar um componente ``, o componente pai pode captura seus eventos independentemente se são implementados usando portals. +Capturar um evento propagado a partir de um portal em um componente pai permite o desenvolvimento de abstrações mais flexíveis que não dependem diretamente de portals. Por exemplo, se você renderizar um componente ``, o componente pai pode captura seus eventos independentemente se são implementados usando portals. From f06e2d3a30d2c5955d8f395341b8460608de01c8 Mon Sep 17 00:00:00 2001 From: Ramon Date: Fri, 15 Feb 2019 11:30:47 -0200 Subject: [PATCH 12/12] Update portals.md --- content/docs/portals.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/portals.md b/content/docs/portals.md index 8e2dbdb1b..621fbe0b6 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -43,7 +43,7 @@ Um caso típico do uso de portals é quando um componente pai tem o estilo `over > Nota: > -> Quando estiver trabalhando com portals, lembre-se que [tratar o eventos de focus](/docs/accessibility.html#programmatically-managing-focus) se torna muito importante. +> Quando estiver trabalhando com portals, lembre-se que [tratar o evento focus](/docs/accessibility.html#programmatically-managing-focus) se torna muito importante. > > No caso dos modals, assegure-se que todos possam interagir com eles seguindo as práticas descritas em [WAI-ARIA Modal Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal).