Enterprise: Специальные возможности - требуется изображение профиля с вкладками

@tmcconechy выглядит как пример, который мы указываем на Blockgrid. Поддерживает ли API выбора уже наличие состояния фокуса?

Поэтому, думая об этих классах image-sm и т. Д., Мы добавляем вокруг него состояние фокуса, добавляем tabindex и обеспечиваем наличие альтернативного текста. Итак, еще два других примера, поскольку ваша правая сетка блоков имеет api выделения / фокуса, который мы могли бы использовать.

Итак, исправьте все три из них:
http://master-enterprise.demo.design.infor.com/components/images/example-photos.html -> добавить состояние фокуса и тег alt
http://master-enterprise.demo.design.infor.com/components/images/example-index.html -> добавить состояние фокуса и тег alt
http://master-enterprise.demo.design.infor.com/components/images/example-image-list.html -> используйте классы изображений (которые будут иметь тег alt и состояние фокуса) или, как вы сказали заставить его работать с api блочной сетки?

Немного перечитав, я не уверен, что изменение наших классов CSS отображения для изображений - правильный способ исправить. У нас есть Blockgrid API для списка изображений, которые могут обрабатывать выбор и навигацию с клавиатуры, если есть список вещей, которые нужно выбрать. Что касается отдельных изображений, я не думаю, что мы должны делать их все фокусируемыми с помощью управления состоянием. По умолчанию изображения не являются компонентами формы, поэтому нам не следует изменять эти значения по умолчанию, за исключением особых случаев.

@ 508it , разве это нельзя решить, просто добавив tabindex к любому изображению, которое вам нужно сделать фокусируемым? Отсутствуют ли дополнительные функции, которых вы ожидаете? Если нет, добавление tabindex в ваши HTML-шаблоны также добавит состояние выбора браузера по умолчанию, которое должно охватывать случай.

НА странице в приложении это изображение профиля. Наверное, мне не стоило связывать всю эту папку, так как это вызвало путаницу. Им нужно было одно изображение - аватарку. Итак, класс / стиль для состояния фокуса (когда они добавляют к нему tabindex). На данный момент добавление tabindex не добавит никакого стиля.

Поэтому в основном убедитесь, что http://master-enterprise.demo.design.infor.com/components/images/example-index.html будет работать, если на нем есть tabindex. Но зациклился на других страницах.

Хорошо, я вижу. В таком случае, определенно нечего добавить. Я не видел отсутствующего состояния фокуса ни на одном из этих изображений при добавлении tabindex:

Хром

Fire Fox

Может быть, просто сделать его более выраженным на FF - это ключ.

Верно, или я думал сделать это так же, как и состояние фокуса ввода. И просто убедитесь, что все примеры имеют теги alt и хорошо работают.

Если мы можем, сделайте миксин "focus", а затем проведите рефакторинг CSS, чтобы включить эти стили повсюду. Таким образом, если мы изменим состояние фокуса в одном месте, оно изменится везде.

На самом деле у нас есть переменная sass https://github.com/infor-design/enterprise/blob/master/src/core/_config.scss#L28 или, по крайней мере, ее часть, но это можно очистить (оба box-shadow и граница вокруг)

QA Failed. Фокус не работает в браузере MacOS Mojave Firefox.

Очень странно...

• на моем Mac (Mojave + Firefox 67) все работает нормально.
• один стек браузера (Mojave + Firefox 67), я вижу, что ничто не может быть сфокусировано.

Я не уверен, что мы можем сделать.

Какую ОС вы используете в BS?

Mac (Mojave + Firefox 67) -> так что это та же ОС и браузер, которые я использую на самом деле. Я также пробовал + и минус несколько версий FF в стеке браузера, и, похоже, они не работают.

Я бы попросил Landmark, может быть, @ 508it протестировали это и подтвердили, что это работает для них. Если это так, то мы спишем это на проблему BS.

• [x] Утверждено @pwpatton
• [] Утверждено @ 508it

Кажется, это связано с одной страницей. http://master-enterprise.demo.design.infor.com/components/images/example-index.html, потому что http://master-enterprise.demo.design.infor.com/components/button/example-index. html действительно работает.

Подождите, я знаю, что это такое. Это настройка Mac http://www.weba11y.com/blog/2014/07/07/keyboard-navigation-in-mac-browsers/

Таким образом, вы не сможете установить это на Mac BS. Итак, BS не будет работать, но я думаю, что это совершенно нормально, поскольку это конфигурация, которую использует Mac - так что это вне нашего контроля.

вернуться к повторному тестированию или подтвердить, что оно выполнено - к сожалению, вы хотите иметь возможность протестировать это на Mac в браузере

Мы протестировали, используя настройки по умолчанию на Mac и опцию «все элементы управления», перечисленную выше, и это все равно не удалось. Проблема в том, что есть возможность просмотреть / очистить изображение, которое можно выбрать с помощью мыши, но нельзя выбрать с помощью клавиатуры.

Есть ли у него индекс вкладок в DOM @ 508it ? Я бы предположил, что ориентир еще не реализовал это. Но вы можете протестировать на страницах http://master-enterprise.demo.design.infor.com/components/images.

@tmcconechy Это не так. Ссылка, которую вы предоставили, работает, и она проходит.

http: // локальный : 4000 / компоненты / изображения
Прошел QA во всех браузерах. Сначала фокус вкладки не работает в моем Mojave Firefox 67 даже после применения всех элементов управления в системных настройках, но у меня сработал трюк about: config , https://stackoverflow.com/questions/11704828/how-to-allow- клавиатура-фокус-ссылок-в-Firefox

Нужно ли нам одобрение @pwpatton , чтобы переместить это в «Готово»?

Так чего же нам не хватает в ориентире?

к вашему сведению: @vonnyw

@pwpatton просто обязательно используйте такие классы, как image-sm или image-md и добавьте tabindex="0" . Тогда у вас будет состояние фокусировки, и изображение будет фокусируемым.

@brianjuan только что закончил

Изменение кода на tabindex = 0 на самом деле исправляет ориентир.

Индекс вкладок работает, но у нас нет стиля с фокусировкой, доступного для изображений нестандартного размера. В ориентирах мы сами определяем размер изображений на основе определений LPL.
Запрос простого класса image-auto , который будет помещен в элемент img для достижения фокусируемого стиля, найденного в этом примере http://master-enterprise.demo.design.infor.com/components /images/example-index.html

Просто для уточнения.

1. добавить класс image-auto без высоты и ширины и с кодом фокуса. это будет использовать размер изображения
2. добавьте его на страницу примера http: // localhost : 4000 / components / images / example-index.html
3. также не уверен, почему мы сделали это с родительским div. он должен работать непосредственно с тегом изображения.

<div class="image-lg">
   <img src="http://placehold.it/300x350/999999/FFFFFF" alt="image-md 300x350" tabindex="0">
</div>

<~--Instead of-->

<img class="image-lg"src="http://placehold.it/300x350/999999/FFFFFF" alt="image-md 300x350" tabindex="0">

Не удалось переместить этот билет в QA. Фокус не виден на изображениях-заполнителях.

-MAC FF

• URL: http://master-enterprise.demo.design.infor.com/components/images/example-index.html?theme=soho&variant=light&colors=2578a9
• Вкладка по всей странице. Фокус виден только на серых изображениях.
• См. Прикрепленный снимок экрана.
  

Я думаю, здесь возникает вопрос: «Должно ли изображение-заполнитель быть с возможностью табуляции / фокусировки?»

Я думаю, что @davidcarlsonberg тоже является «изображением». Вариант использования - изображение отсутствует, поэтому вместо него можно использовать этот заполнитель. Но может быть случай, когда к нему прикреплено меню или что-то, что требует его фокусировки.

Это как type: bug (проблема состояния фокуса), так и type: demo-app bug (проблема tabindex на примерах страниц).

http: // локальный : 4000 / компоненты / изображения / пример-index.html
Заполнители теперь можно вкладывать / фокусировать. Я только что заметил в Mac Firefox, изображения не интерактивны, но их можно сфокусировать с помощью клавиши табуляции, даже после установки системных настроек и about: config.

К сожалению, я сомневаюсь, что мы можем что-то сделать с другим поведением Firefox. Поэтому я предлагаю пока игнорировать это.

Получил @tmcconechy , теперь переместим это в Готово и проведем повторное тестирование после развертывания бета-версии.