Botón vs Div: ¿Qué es tan importante de todos modos?

Cuando miramos nuestra aplicación, puedes ver que tengo un botón y un div. El botón activa la sección. Lo que vamos a hacer ahora es hacer que nuestro botón sea accesible. Así que cuando miramos aquí, vemos que tenemos un botón y un div. Para hacer que este botón sea accesible, queremos proporcionar un rol de botón. Mucha gente dice que no necesariamente necesitas esto. Sin embargo, el primer botón en una página se asume que es un botón de envío, lo que significa que si no quieres que se envíe cuando presionas Enter en una página, entonces vas a querer convertir este rol en un botón. Después de eso, ya casi has terminado. Eso es más o menos todo. Así que vamos a ver qué necesitas hacer para convertir tu div en un botón.

Voy a hacer un poco de trampa. Tengo mi opción completada, pero echa un vistazo a esto por un momento. Tenemos nuestro rol de botón, pero sin la capacidad de tabular, no podemos tabular hasta nuestro div. Así que vamos a agregar eso. En este punto, podemos tabular, lo cual es genial. Eso es útil. Sin embargo, no podemos presionar Enter. No podemos presionar Espacio para ingresar si es un div. No hace nada. Así que vamos a tener que agregar nuestro onClick para ocultar y mostrar el texto dentro de nuestro botón div, que estamos pasando. En este punto, cuando haces clic en él, puedes ver que funciona. Pero aún no podemos tabular ni presionar espacio o enter para activarlo. Así que vamos a necesitar agregar esto a nuestro botón. Y también vamos a agregar nuestras teclas permitidas. Y en ese punto, podemos tabular, podemos presionar espacio, lo cual aún no funciona del todo, y podemos presionar Enter.

La siguiente sección será el CSS para hacer que se vea como un div. Y tenemos que ponerlo como inline block. Así es como funciona un div o un botón. Vamos a alinear el texto al centro, el color del texto del botón. Esto permite heredar el color que todos los botones en la página tienen.

El border radius se utiliza para asegurarse de que obtengas estas esquinas redondeadas. Vamos a tener el background color para que coincida. Podrás hacer lo que quieras con esto. Box sizing es interesante. El propósito de box sizing significa que el padding está incluido dentro del tamaño de un botón, lo cual es fantástico. Eso significa que no tienes que tener el ancho de tu botón como el ancho, y luego el padding, y luego el border. Todo está incluido en ese ancho real.

El padding en un botón por defecto es realmente extraño. No estoy seguro de por qué alguien eligió exactamente 7 píxeles, pero eso es lo que es. Luego también tenemos el border, que requiere un outset y una opción de color interesante. Y luego, si no lo sabías, en algunos dispositivos iOS, si no incluyes el pointer, nunca lo detectará como un botón. No lo abrirá realmente. Y luego también tenemos que tener nuestros hovers. Así que este es un bloque de código bastante grande que necesitaremos solo para que esto funcione. Puede parecer un botón. Y actúa como un botón. Pero hay mucha información que debes recordar para que esto funcione. ¿Preferirías tener role equals button, o preferirías tener que recordar todo esto?

Ahora, hay momentos en los que usar la plataforma no funciona. Por ejemplo, cuando intentas construir una navegación, o cuando intentas construir un menú desplegable de selección múltiple. Y lo que es realmente fascinante acerca de esos es que si te adhieres estrictamente a usar botones cuando quieres hacer clic en algo, o checkboxes cuando quieres seleccionar varios elementos, entonces no tienes que engañar al sistema para que sea accesible. Aún funciona. Si quieres obtener más información al respecto, el sitio web de Yaria incluye opciones y ejemplos de cómo construir ese tipo de componentes. Hoy aprendimos que un botón no requiere mucho para ser accesible, pero un div requiere muchas cosas que debes recordar. Si tienes alguna pregunta, siempre puedes contactarme en Twitter en NickCodeMonkey.

Y gracias de nuevo. Eso es mucho conocimiento en solo 20 o 28 minutos. Cuatro grandes temas.

Me gustaría invitar a todos los oradores de las charlas relámpago al escenario para la última ronda de preguntas y respuestas del día.

¡Hola a todos! Hola. Hola. Hola. Hola. Buenos días, tardes, noches, lo que sea para ti.

Voy a ir directamente a las preguntas. Voy a empezar con la primera pregunta de Matt McClure. ¿A qué mercado te diriges? ¿Y por qué alguien usaría Mux en lugar de Twitch o YouTube? Sí, es una pregunta válida. Somos un producto dirigido a los desarrolladores. Por lo tanto, somos puramente APIs para que los desarrolladores las integren en sus plataformas, a diferencia de Twitch y YouTube, que son productos más orientados al consumidor. Si eres un streamer que solo quiere transmitir sin escribir código, esas son excelentes plataformas. Deberías usarlas. Pero si estás intentando construir una plataforma, probablemente seamos una mejor opción. OK. Así que se trata más del público objetivo, supongo, y de que tienes más control sobre lo que estás haciendo. Sí, lo pensaría un poco como una mala analogía que mencioné en Slack. Son más como PayPal o Venmo. Nosotros somos más como Stripe, si lo piensas en términos de APIs de pago. OK, gracias.

La siguiente pregunta es para Jen. ¿Cuáles son las razones por las que a alguien del equipo web de React Native le gustaría usar un div como botón? La razón es que poner HTML dentro de un botón no es HTML semántico. Por lo tanto, es posible que deseen envolver ese contenido, por ejemplo, una tarjeta o un bloque de imagen y texto, en un div y convertirlo en un botón accesible en lugar de poner un botón alrededor de él. Sí, por lo tanto, si tienes una tarjeta completamente clickable con diferentes elementos dentro, no puedes hacerlo de manera semántica dentro de un botón. Correcto. En ese caso, querrás hacer un div accesible. Bueno, al menos deberías querer hacerlo.

Quizás. Y puedo decir, si no lo haces, Jen va a venir y te buscará. Te tocaré amablemente en el hombro y te haré sugerencias. ¿Qué te parece eso?

Sí, pero tocar no funciona. Entonces tendré que hacerlo.

Sí, sí. Otra pregunta. Pero solo para Uri, un toque amable en el hombro de Martin van Houten. No es realmente una pregunta, solo quería decir, match se ve increíble. Siempre es agradable escuchar eso. Muchas gracias. Espero que después de probarlo, sientas lo mismo y no me odies. Bueno, en realidad en la empresa para la que trabajo, Albert Heijn, lo estamos utilizando. Y debo decir que ha sido un placer, así que muchas gracias.

Oh, eres mi vecino. Puedo ir a visitarte. Sí, sería un placer.

Mike, ¿Ionic admite aplicaciones nativas similares a React Native? ¿O es como una aplicación estándar de Cordova, donde es una interfaz de usuario web en lugar de una aplicación nativa? Es una combinación de ambos, donde la mayoría de la interfaz de usuario se muestra en una vista web, pero puedes integrar vistas nativas personalizadas o actividades en Android, y mezclar qué se muestra en una vista web o la vista nativa, o incluso superponer la vista nativa encima de la vista web. Así que obtienes lo mejor de ambos mundos. Eso suena poderoso.

De acuerdo, gracias, chicos y señorita, por esta gran charla. Para las personas que están viendo, también estarán en las salas de Zoom para preguntas, pero la parte formal ha terminado. Me voy a despedir por un rato. Así que gracias por unirse. Gracias. Gracias. Adiós. Gracias. Adiós. Gracias. Adiós.

Gracias. Adiós.

Gracias. Gracias. Adiós.

Gracias. Adiós.

Adiós.

Adiós.

Gracias. Adiós.

Gracias. Adiós.

Gracias. Adiós.

Adiós.